好奇心：使用 Ably.io 即時訊息作為輕量級資料庫

這是我在 dev.to 網站上寫的第 14 篇文章。這篇文章示範了一種使用即時訊息功能的奇怪方法。

注意：這不是即時訊息傳遞的典型解決方案。

Ably 為開發者提供了各種解決方案，其中最受歡迎的是基於 pub/sub 模型的即時訊息傳遞。當您向頻道發布訊息時，連接到該頻道的所有裝置都會立即收到該訊息。

Ably 為您的頻道訊息提供訊息持久性（免費帳號為 24 小時）。特別有趣的是他們的功能，允許最後一條訊息保留 365 天。 我將在本範例中利用此功能。

這個概念很簡單：想像一個 Web 或行動應用程序，其中包含一個表單和一個記錄清單（例如待辦事項清單、購物清單或聯絡人清單），儲存為單一持久性訊息。當您在任何裝置（PC、平板電腦或手機）上啟動該應用程式時，它會同步 Ably 的資料。您對資料所做的任何變更都會儲存為新的持久性訊息，從而有效地建立可在所有裝置上存取的「即時資料庫」。

有一些限制需要考慮。最大訊息長度為 64 KB（包括元資料、ID、時間戳記等）。由於超過 2 KB 的訊息會被分成區塊進行傳輸，因此 Ably 建議將資料大小保持在遠低於此限制的水平。因此，此解決方案最適合少量數據。

我測試了這個概念，它運作得很好。新增和刪除記錄會觸發訊息更新，使所有客戶端應用程式（網路/移動）保持同步。

我在 flems.io 上創建了一個簡單的概念驗證作為單一頁面 (HTML CSS JS)。要親自嘗試，您需要：

1. 創建 Ably 應用
2. 將您的 API 金鑰插入 JS 程式碼（第 37 行）
3. 建立一個名為「Realtime」的頻道並啟用「保留最後一則訊息」選項

app中有一個重要的部分，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;
  });
}

我在 flems.io 上的應用

希望這對您有所啟發！ :-)

以上是好奇心：使用 Ably.io 即時訊息作為輕量級資料庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！