面向 Web 开发人员的 Appwrite Realtime 入门

对于所有一直在等待 Appwrite 实时服务的用户，我们有个好消息。Appwrite 的最新版本已经发布，其中包含实时服务，使用起来就像 Appwrite 的 REST API 一样简单。自我们发布实时 alpha 版本和入门教程以来，我们进行了几次更新。在本教程中，我们将通过构建一个简单的看板项目来学习如何使用 Appwrite 更新后的实时服务。

📝 先决条件

要继续本教程，您需要访问带有项目的 Appwrite 控制台。如果您尚未安装 Appwrite，请先安装。按照 Appwrite 的官方安装文档操作，安装 Appwrite 非常简单。安装大约只需 2 分钟。安装完成后，登录控制台并创建一个新的项目。

💾 设置数据库

登录控制台并选择项目后，从仪表板左侧边栏单击数据库选项即可进入数据库页面。

进入数据库页面后，单击“添加集合”按钮。

在弹出的对话框中，将集合名称设置为“Tasks”，然后点击“创建”按钮创建集合。之后，您将被重定向到新集合的页面，我们可以在其中定义其规则。定义以下规则，然后点击“更新”按钮。同时，请记下设置页面右侧的集合 ID ，因为我们稍后在代码中会用到它。

标题
- 标签：标题
- 关键词：标题
- 规则类型：文本
- 必需：true
- 数组：false
柱子
- 标签：列
- 键：列
- 规则类型：文本
- 必需：true
- 数组：false
用户身份
- 标签：UserId
- 键：userId
- 规则类型：文本
- 必需：true
- 数组：false

在权限中，将读取和写入权限都设置为，role:member以便任何登录的用户都可以读取和写入集合。

现在我们就可以开始进行我们的项目了。

➕️ 添加 Web 平台

要初始化 Appwrite SDK 并开始与 Appwrite 服务交互，首先需要向项目添加一个新的 Web 平台。要添加新平台，请转到 Appwrite 控制台，选择您的项目，然后点击项目仪表板上的“添加平台”按钮。选择“新建 Web 应用”。

在出现的对话框中，输入名称和主机名。您的主机名将是localhost（如果不是本地运行，则为域名）。

通过注册新平台，您可以允许您的应用程序与 Appwrite API 进行通信。

⚙️ 设置项目和依赖项

我们有一个使用 Svelte 构建的简单看板的启动项目。您可以从我们的GitHub 仓库下载该启动项目。

将项目下载到本地后，请使用您常用的文本编辑器打开它。打开src/service/appwrite.js，并更新您的端点和集合 ID。查看此文件，您会发现我们已提供所有用于添加、删除和更新任务的方法，以及登录和注销方法。我们将在src/App.svelte中导入并使用这些函数。

要运行此项目，请先在终端中运行npm install以安装依赖项，然后运行npm run dev以在开发模式下在本地运行该项目。现在，您可以通过浏览器访问http://localhost:3000来访问该应用程序。

为避免 cookie 问题，请确保端点 URL 使用与客户端相同的协议（ http或https ）。

目前，如果您添加任务，只有刷新页面后才能查看。此外，如果您更新或删除任务，也只有刷新页面后才能查看更改。我们将使用 Appwrite 的实时服务来解决这个问题。

👩‍🔧 实时

我们首先在src/service/appwrite.js中添加一个 subscribe 方法，该方法将连接到 Appwrite 实时服务器，并监听我们想要监听的任何更改。在我们的用例中，我们将监听上面创建的任务集合中文档的更改。为此，请编写以下函数：



subscribe = (callback) => {
  return this.appwrite.subscribe(`collections.${this.tasksCollection}.documents`, callback);
}

此方法将接受一个回调函数，并订阅collections.[ID].documents ，以便我们获取对任务集合中文档所做的任何更改的更新。每次服务器发送任何更新时，都会调用此回调函数。

现在，如果我们转到src/App.svelte，那里已经存在一个名为的函数subscribe，我们只需要更新函数体以订阅更改并更新我们的任务数组。按如下方式更新订阅函数。



function subscribe() {
  appwrite.subscribe((payload) => {
    switch (payload.event) {
      case 'database.documents.create':
        tasks.push(payload.payload)
        tasks = tasks
        break
      case 'database.documents.update':
        tasks = tasks.map((task) => {
          if (task.$id === payload.payload.$id) {
            return payload.payload
          } else {
            return task
          }
        })
        break
      case 'database.documents.delete':
        tasks = tasks.filter((task) => task.$id !== payload.payload.$id)
        break
    }
  })
}

在这里，我们调用之前在src/service/appwrite.js中添加的订阅方法，并传递接收服务器发送的实时有效负载的回调函数。

我们收到的有效载荷将包含一个event，并且由于我们订阅了collections.[ID].documents，事件将是database.documents.create、database.documents.update或之一database.documents.delete。因此，我们正在处理每个事件，并且与该事件一起收到的有效载荷将是相关文档。

根据事件，我们可以添加、删除或更新任务数组，以反映更改。当我们更新任务数组时，Svelte 会自动处理 UI 更新。就这么简单。

🥂 结论

我希望你喜欢这篇构建实时看板的教程，就像我喜欢编写这篇教程和构建项目一样。你可以在这里查看应用程序的实时预览，完整的源代码可以在GitHub 仓库中找到。如有任何疑问或意见，请随时联系我们。我们非常期待看到社区将如何使用 Flutter 和 Appwrite Realtime 构建更多精彩内容。

面向 Web 开发人员的 Appwrite Realtime 入门

面向 Web 开发人员的 Appwrite Realtime 入门

📝 先决条件

💾 设置数据库

➕️ 添加 Web 平台

⚙️ 设置项目和依赖项

👩‍🔧 实时

🥂 结论

🎓 了解更多