這是我在 dev.to 網(wǎng)站上寫的第 14 篇文章。這篇文章演示了一種使用實時消息傳遞功能的奇怪方法。

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

Ably 為開發(fā)者提供了各種解決方案，其中最受歡迎的是基于 pub/sub 模型的實時消息傳遞。當(dāng)您向頻道發(fā)布消息時，連接到該頻道的所有設(shè)備都會立即收到該消息。

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

這個概念很簡單：想象一個 Web 或移動應(yīng)用程序，其中包含一個表單和一個記錄列表（例如待辦事項列表、購物列表或聯(lián)系人列表），存儲為單個持久消息。當(dāng)您在任何設(shè)備（PC、平板電腦或手機(jī)）上啟動該應(yīng)用程序時，它都會同步 Ably 的數(shù)據(jù)。您對數(shù)據(jù)所做的任何更改都會保存為新的持久消息，從而有效地創(chuàng)建可在所有設(shè)備上訪問的“實時數(shù)據(jù)庫”。

有一些限制需要考慮。最大消息長度為 64 KB（包括元數(shù)據(jù)、ID、時間戳等）。由于超過 2 KB 的消息會被分成塊進(jìn)行傳輸，因此 Ably 建議將數(shù)據(jù)大小保持在遠(yuǎn)低于此限制的水平。因此，該解決方案最適合少量數(shù)據(jù)。

我測試了這個概念，它運行得很好。添加和刪??除記錄會觸發(fā)消息更新，使所有客戶端應(yīng)用程序（網(wǎng)絡(luò)/移動）保持同步。

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

1. 創(chuàng)建 Ably 應(yīng)用
2. 將您的 API 密鑰插入 JS 代碼（第 37 行）
3. 創(chuàng)建一個名為“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 上的應(yīng)用

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

以上是好奇心：使用 Ably.io 實時消息傳遞作為輕量級數(shù)據(jù)庫的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！