Heim >Web-Frontend >js-Tutorial >Neugier: Verwendung von Ably.io Realtime Messaging als leichtgewichtige Datenbank

Neugier: Verwendung von Ably.io Realtime Messaging als leichtgewichtige Datenbank

Susan Sarandon
Susan SarandonOriginal
2025-01-05 02:48:38192Durchsuche

Curiosity: Using Ably.io Realtime Messaging as a Lightweight Database

Dies ist mein 14. Beitrag auf der dev.to-Website. Dieser Beitrag zeigt eine merkwürdige Möglichkeit, Echtzeit-Messaging-Funktionen zu nutzen.

Hinweis: Dies ist NICHT die typische Lösung für Echtzeit-Messaging.

Ably bietet verschiedene Lösungen für Entwickler, wobei die beliebteste Lösung Echtzeit-Messaging auf Basis des Pub/Sub-Modells ist. Wenn Sie eine Nachricht auf einem Kanal veröffentlichen, empfangen alle mit diesem Kanal verbundenen Geräte sie sofort.

Ably bietet Nachrichtenpersistenz für die Nachrichten Ihres Kanals (24 Stunden bei kostenlosen Konten). Besonders interessant ist ihre Funktion, die es ermöglicht, dass die letzte Nachricht 365 Tage lang bestehen bleibt.Ich werde diese Funktion in diesem Beispiel nutzen.

Das Konzept ist einfach: Stellen Sie sich eine Web- oder mobile App mit einem Formular und einer Liste von Datensätzen (z. B. einer Aufgabenliste, Einkaufsliste oder Kontaktliste) vor, die als einzelne dauerhafte Nachricht gespeichert sind. Wenn Sie die App auf einem beliebigen Gerät (PC, Tablet oder Telefon) starten, synchronisiert sie Daten von Ably. Alle Änderungen, die Sie an Ihren Daten vornehmen, werden als neue dauerhafte Nachricht gespeichert, wodurch effektiv eine „Echtzeitdatenbank“ erstellt wird, auf die auf allen Ihren Geräten zugegriffen werden kann.

Es sind einige Einschränkungen zu beachten. Die maximale Nachrichtenlänge beträgt 64 KB (einschließlich Metadaten, ID, Zeitstempel usw.). Da Nachrichten, die 2 KB überschreiten, für die Übertragung in Blöcke aufgeteilt werden, empfiehlt Ably, die Datengröße deutlich unter dieser Grenze zu halten. Daher eignet sich diese Lösung am besten für kleine Datenmengen.

Ich habe dieses Konzept getestet und es funktioniert perfekt. Durch das Hinzufügen und Löschen von Datensätzen werden Nachrichtenaktualisierungen ausgelöst, die alle Client-Anwendungen (Web/Mobil) synchron halten.

Ich habe auf flems.io einen einfachen Proof-of-Concept als einzelne Seite (HTML CSS JS) erstellt. Um es selbst auszuprobieren, müssen Sie:

  1. Erstellen Sie eine Ably-App
  2. Fügen Sie Ihren API-Schlüssel in den JS-Code ein (Zeile 37)
  3. Erstellen Sie einen Kanal mit dem Namen „Echtzeit“ und aktivieren Sie die Option „Letzte Nachricht beibehalten“

Es gibt einen wichtigen Teil der App, den 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;
  });
}

Meine App auf flems.io

Ich hoffe, das inspiriert Sie! :-)

Das obige ist der detaillierte Inhalt vonNeugier: Verwendung von Ably.io Realtime Messaging als leichtgewichtige Datenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn