This is my 14th write up on dev.to site. This post demonstrates a curious way to use realtime messaging capabilities.

Note: this is NOT the typical solution of realtime messaging.

Ably offers various solutions for developers, with their most popular being realtime messaging based on the pub/sub model. When you publish a message to a channel, all devices connected to that channel receive it instantly.

Ably provides message persistence for your channel's messages (24 hours on free accounts). What's particularly interesting is their feature that allows the last message to persist for 365 days. I'll leverage this capability in this example.

The concept is straightforward: imagine a web or mobile app with a form and a list of records (such as a todo list, shopping list, or contact list) stored as a single persisted message. When you launch the app on any device (PC, tablet, or phone), it synchronizes data from Ably. Any changes you make to your data are saved as a new persisted message, effectively creating a "realtime database" accessible across all your devices.

There are some limitations to consider. The maximum message length is 64 KB (including metadata, ID, timestamp etc.). Since messages exceeding 2 KB are split into chunks for transmission, Ably recommends keeping data size well below this limit. Therefore, this solution is best suited for small amounts of data.

I tested this concept, and it works perfectly. Adding and deleting records triggers message updates that keep all client applications (web/mobile) in sync.

I've created a simple proof-of-concept as a single page (HTML + CSS + JS) on flems.io. To try it yourself, you'll need to:

1. Create an Ably app
2. Insert your API key into the JS code (row 37)
3. Create a channel named "Realtime" and enable the "persist last message" option

There is an important part of app, JS code:

const ably = new Ably.Realtime("put your API KEY here");
const channel = ably.channels.get('[?rewind=1]Realtime');
var persons = [];

channel.subscribe("db", (message) => {
  persons = message.data;
  renderTable();
});

function addPerson() {
  const name = document.getElementById('name').value;
  const age = document.getElementById('age').value;
  const role = document.getElementById('role').value;

  if (name && age && role) {
    const newPerson = { name: name, age: age, role: role };
    persons.push(newPerson);
    updatePersons();
    document.getElementById('name').value = '';
    document.getElementById('age').value = '';
    document.getElementById('role').value = '';
  }
}

function deletePerson(index) {
  persons.splice(index, 1);
  updatePersons();
}

function updatePersons() {
  channel.publish("db", persons);
}

function renderTable() {
  const personTable = 
  document.getElementById('personTable');
  personTable.innerHTML = '';
  persons.forEach((person, index) => {
    const row = `<tr>
    <td>${person.name}</td>
    <td>${person.age}</td>
    <td>${person.role}</td>
    <td><button onclick="deletePerson(${index})">( X )</button></td>
    </tr>`;
    personTable.innerHTML += row;
  });
}

My app on flems.io

Hope this inspires you! :-)