好奇心：使用 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中文网其他相关文章！