Curiosité : utiliser la messagerie en temps réel Ably.io comme base de données légère

C'est mon 14ème article sur le site dev.to. Cet article montre une manière curieuse d'utiliser les capacités de messagerie en temps réel.

Remarque : ce n'est PAS la solution typique de messagerie en temps réel.

Ably propose diverses solutions aux développeurs, la plus populaire étant la messagerie en temps réel basée sur le modèle pub/sub. Lorsque vous publiez un message sur une chaîne, tous les appareils connectés à cette chaîne le reçoivent instantanément.

Ably assure la persistance des messages de votre chaîne (24 heures sur les comptes gratuits). Ce qui est particulièrement intéressant est leur fonctionnalité qui permet au dernier message de persister pendant 365 jours. J'exploiterai cette fonctionnalité dans cet exemple.

Le concept est simple : imaginez une application Web ou mobile avec un formulaire et une liste d'enregistrements (comme une liste de tâches, une liste de courses ou une liste de contacts) stockés sous la forme d'un seul message persistant. Lorsque vous lancez l'application sur n'importe quel appareil (PC, tablette ou téléphone), elle synchronise les données d'Ably. Toutes les modifications que vous apportez à vos données sont enregistrées en tant que nouveau message persistant, créant ainsi une « base de données en temps réel » accessible sur tous vos appareils.

Il y a certaines limites à prendre en compte. La longueur maximale du message est de 64 Ko (y compris les métadonnées, l'ID, l'horodatage, etc.). Étant donné que les messages dépassant 2 Ko sont divisés en morceaux pour la transmission, Ably recommande de maintenir la taille des données bien en dessous de cette limite. Par conséquent, cette solution est la mieux adaptée aux petites quantités de données.

J'ai testé ce concept, et il fonctionne parfaitement. L'ajout et la suppression d'enregistrements déclenchent des mises à jour des messages qui maintiennent toutes les applications clientes (Web/Mobile) synchronisées.

J'ai créé une simple preuve de concept sous forme d'une seule page (HTML CSS JS) sur flems.io. Pour l'essayer vous-même, vous devrez :

1. Créer une application Ably
2. Insérez votre clé API dans le code JS (ligne 37)
3. Créez un canal nommé "Realtime" et activez l'option "Conserver le dernier message"

Il y a une partie importante de l'application, le code JS :

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;
  });
}

Mon application sur flems.io

J'espère que cela vous inspire ! :-)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!