Jsonbank Realtime Collaboration Powered by Ably

GIF
Ably Space avatars and typing status update in action
GIF
Realtime analytics.

Inspiration

Adding real-time and pub/sub features has always been at the top of my roadmap for jsonbank.io, and it's also the most requested feature by my close friends who use the platform. However, the thought of setting up a WebSocket Service to communicate with other microservices programmed in different languages has always kept this feature in the procrastinated zone.

The moment I discovered Ably and played with it, I knew a significant change was on the horizon. Ably won me over with its multi-language SDK support, as it meant I could accomplish so much more with less code.

What It Does

Jsonbank is an online JSON data storage/database solution that offers developers CRUD (Create, Read, Update, Delete) access via an API. It comes with a host of features designed to simplify JSON data management, such as schema validations, a browser view, history tracking, and the ability to monitor files via webhooks, among others.

Integrating Ably has empowered Jsonbank to:

Maintain synchronization across multiple server-side services.
Utilize Ably's spaces to detect multiple users' presence, showcase their avatars, and indicate who is typing.
Notify all connected clients about document changes, keeping the document history up to date.
Transform our Editor interface into a real-time, collaborative platform, ensuring every connected client stays updated and engaged.
Render all analytics pages in real-time, providing instant insights into when a document was accessed, updated, or created.

How I Built It

Integrating Ably was a mix of easy and challenging.

Keeping Multiple Services in Sync

The server side was crucial as it's the backbone of Jsonbank. Under the hood, Jsonbank is built with Go but also has three microservices in Node.js. These services did not communicate with each other initially, only saving data on a remote Redis. With Ably, the ecosystem got friendlier, every service got the data it needed in real time, regardless of the service location. The solution was simple: publish and subscribe to a single channel across all services.

Ably Spaces

Implementing the features of Ably Spaces without Ably would have been tough. It's a well-thought-out feature by the Ably team. Even without a Vue.js example to reference, I managed to use the Ably JavaScript SDK, use spaces, detect who is typing, and show avatars of all users working on a particular document.

Notifying Connected Clients of Document Changes

Using the Ably channel feature, I subscribed to document update events from the backend, keeping all connected clients updated, and enabling other tasks to make real-time collaboration as quick as possible.

Real-Time Collaboration Interface

At Jsonbank, the editor has a file-system/code editor-like structure. Before Ably, actions like creating a file triggered a poll to refresh the view, but this only happened on the current editor's browser. Other users viewing the same document had to refresh to see the new file. Now, polling is gone and all connected users are updated in real-time on all events within the project editor interface.

Real-Time Analytics

Impressed by the real-time features of Ably, I decided to go further by making the project and document analytics pages real-time. This meant bringing Ably into the core of our API to notify and provide real-time stats as requests come in. Since the websocket load isn't on our server, sending updates on every request didn’t slow us down, showcasing one of the biggest advantages of having Ably handle your real-time features.

Challenges I Ran Into

Ably does have a Go package, but it's not listed as an option in the official documentation's code preview. This led me to spend more time reading the documentation on GitHub and second-guessing, using Ably's JavaScript example for reference.

While Ably provides helpers for React, which would have made integration easier had I been using React, I needed to figure out how to get it working with Vue.js, which Jsonbank client-side is built with. It wasn’t too difficult, but it did take a fair share of time.

Accomplishments That We're Proud Of

Implementing Ably's real-time features brought about some advantages that I hadn't anticipated. Initially, I thought it was all about sending messages back and forth, but there's more to it.

The project became more dynamic.
Bandwidth usage decreased as many auto-polling services were eliminated.
Server load was reduced.
Microservices were notified and completed tasks on time.
All clients remained connected seamlessly.

What we learned

First, I appreciate the team who wrote the Ably official docs, Tutorials, and blogs. They are very informative and found a few new tools I needed from reading them. For example:

websocat - Command-line client for WebSockets
jq - A lightweight and flexible command-line JSON processor

Secondly, The birth of Ably in Jsonbank has brought up new ideas and possibilities that will shape the future of jsonbank and what it will offer for the better.