這是我在 dev.to 網(wǎng)站上寫的第 14 篇文章。這篇文章示範(fàn)了一種使用即時(shí)訊息功能的奇怪方法。

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

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

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

這個(gè)概念很簡(jiǎn)單：想像一個(gè) Web 或行動(dòng)應(yīng)用程序，其中包含一個(gè)表單和一個(gè)記錄清單（例如待辦事項(xiàng)清單、購物清單或聯(lián)絡(luò)人清單），儲(chǔ)存為單一持久性訊息。當(dāng)您在任何裝置（PC、平板電腦或手機(jī)）上啟動(dòng)該應(yīng)用程式時(shí)，它會(huì)同步 Ably 的資料。您對(duì)資料所做的任何變更都會(huì)儲(chǔ)存為新的持久性訊息，從而有效地建立可在所有裝置上存取的「即時(shí)資料庫」。

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

我測(cè)試了這個(gè)概念，它運(yùn)作得很好。新增和刪除記錄會(huì)觸發(fā)訊息更新，使所有客戶端應(yīng)用程式（網(wǎng)路/移動(dòng)）保持同步。

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

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

app中有一個(gè)重要的部分，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)用

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

以上是好奇心：使用 Ably.io 即時(shí)訊息作為輕量級(jí)資料庫的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！