--- title: 实时数据库 slug: docs-ch/platform/parse-server-live-query-example description: 了解如何在 JavaScript 环境中使用 Parse Server 实现实时查询，增强应用程序的实时交互能力。 image: https://www.back4app.com/_public/img/back4app-og.png createdAt: 2024-02-01T14:27:02.523Z --- # 如何使用 Parse Server 实时查询 ## 介绍 实时查询旨在用于 **实时反应式应用程序**, 仅使用传统查询范式可能会导致几个问题，例如响应时间增加以及高网络和服务器使用率。实时查询应在需要持续更新页面以获取来自数据库的新数据的情况下使用，这种情况通常发生在（但不限于）在线游戏、消息客户端和共享待办事项列表中。 本节解释如何通过 Back4App 在 JavaScript 环境中使用 Back4App 的实时查询。 在本教程中，作为示例，您将构建一个 **在线待办事项列表**，如下所示: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/kt59SWYYaqeQXSBhaNuwt_image.png" size="80" width="680" height="740" position="center" showCaption="false"} :::hint{type="info"} 查看完整的 **Todo 在线列表** 项目在 [实时查询 Todo 列表项目](https://github.com/igor-ribeiiro/OnlineTodoList). ::: :::hint{type="info"} 了解更多关于 Parse SDK 的信息在 [JavaScript SDK API 参考](https://parseplatform.org/Parse-SDK-JS/api/4.3.1/) 和[ Parse 开源文档 JavaScript SDK](https://docs.parseplatform.org/js/guide/#live-queries). ::: ## 先决条件 :::hint{type="info"} **要完成本教程，您需要：** - 一个基本的 JavaScript 应用程序，连接到 Back4App 或 [实时查询 Todo 列表项目](https://github.com/igor-ribeiiro/OnlineTodoList). - **注意：**您可以使用我们在 [JavaScript 安装 Parse SDK](https://www.back4app.com/docs/javascript/parse-javascript-sdk) 教程中创建的应用程序或 [实时查询 Todo 列表项目](https://github.com/igor-ribeiiro/OnlineTodoList). - 足够的 [JavaScript Parse 查询](https://docs.parseplatform.org/js/guide/#queries) 知识（但不是强制的）。 ::: ## 1 - 启用实时查询 在开始编码之前，您需要在数据库中创建一个类以启用实时查询。为此，只需在 [Back4App 网站](https://www.back4app.com/), 点击 `仪表板` > `创建一个类`, 如下所示: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/EZk9j8BkQLq6JNVtTh7Yj_image.png) :::hint{type="info"} **注意: **在这里，这个类将被称为 `消息`. ::: 现在，为了启用实时查询功能，请登录到您的帐户，访问 [Back4App 网站](https://www.back4app.com/), 找到您的应用程序，然后点击`应用设置` > `服务器设置`。查找“服务器 URL 和实时查询”块，然后点击 `设置`。 “服务器 URL 和实时查询”块看起来像这样: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ujWY8spojft4dh-Vay9Yh_image.png" size="50" width="308" height="358" position="center" showCaption="false"} 然后，您将到达如下所示的页面。在此页面上，您需要检查 `激活您的 Back4App 子域名` 选项， `激活实时查询` 选项，以及您希望激活实时查询的所有类，如下所示： ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/oBKSK5CCjDiQV-Wstg9zy_image.png" size="60" width="461" height="514" position="center" showCaption="false"} :::hint{type="info"} 激活您的子域名以使用实时查询是必要的，因为它将作为实时服务器工作。 ::: ## 2 - 订阅您的查询 要开始使用实时查询，您首先需要创建一个 `LiveQueryClient` 来管理您的 WebSocket 连接。为此，您需要提供应用程序 ID、用于验证的 JavaScript 密钥，以及一个服务器 URL，该 URL 应该是您在上一步中设置的域名。 以下是 `LiveQueryClient` 的代码: :::CodeblockTabs liveQueryClient.js ```javascript 1 var client = new Parse.LiveQueryClient({ 2 applicationId: 'Your app Id here', 3 serverURL: 'wss://' + 'Your domain here', // Example: 'wss://livequerytutorial.back4app.io' 4 javascriptKey: 'Your JavaScript key here' 5 }); 6 client.open(); ``` ::: 在遵循上述步骤后，您应该为要订阅的对象类型创建一个查询。订阅是一个 事件发射器，当满足您的查询的对象发生更改时，它将触发事件。 在这个例子中，您将进行一个基本查询，并订阅对 `Todo` 对象的所有更改。 :::hint{type="info"} 有关查询的更多信息，请访问 [Parse 官方查询文档](https://docs.parseplatform.org/js/guide/#queries). ::: 以下是 `querySubscribe` 的代码: :::CodeblockTabs querySubscribe.js ```javascript 1 var query = new Parse.Query('Todo'); 2 query.ascending('createdAt').limit(5); 3 var subscription = client.subscribe(query); ``` ::: ## 3 - 监听事件 设置完成后，您需要编写代码以便在事件触发时应用程序将执行的操作。 在这一部分，我们将展示如何在实际示例中监听这些事件。 “**Todo 在线列表**”示例将作为您项目的指导，因为几乎没有使用样板代码。 您将在这里使用的两个主要事件是 `create` 事件和 `delete` 事件。完整的事件列表可以在 [这里](http://docs.parseplatform.org/js/guide/#event-handling)找到。 ### 3.1 - 创建事件 每当一个 `createEvent` 被触发时，表示一个 `ParseObject` 被创建并满足您插入的查询约束。此事件返回创建的对象。 在 **Todo 在线列表** 示例中，活动数组存储在 `this.todos` 变量中，当创建事件发生时，我们将把数据库中的新对象添加到这个数组中。 以下是 `createEvent` 的代码： :::CodeblockTabs createEvent.js ```javascript 1 subscription.on('create', todo => { 2 this.todos.add(todo); 3 console.log('On create event'); 4 }); ``` ::: ### 3.2 - 删除事件 每当一个满足您查询约束的现有 `ParseObject` 从数据库中删除时，您将收到此事件，它返回被删除的对象。 在 **Todo 在线列表** 示例中，每次从数据库中删除对象时，您都必须从列表中删除该对象。查找服务器和代码之间匹配的 ID，以识别被删除的对象。 以下是 `deleteEvent` 的代码： :::CodeblockTabs deleteEvent.js ```javascript 1 subscription.on('delete', todo => { 2 this.todos.forEach(t => { 3 if (t.id === todo.id) { 4 console.log('On delete event'); 5 this.todos.delete(t); 6 } 7 }); 8 }); ``` ::: ## 完成！ 到此为止，您知道如何使用实时查询来创建实时反应式应用程序。 您还知道如何使用 Back4App 进行正确的实时查询设置，并可以开始在您的应用中实现它。