Heim >Web-Frontend >js-Tutorial >Neugier: Verwendung von Ably.io Realtime Messaging als leichtgewichtige Datenbank
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:
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!