在现代 Web 应用程序中，实时数据查询已经成为了必不可少的功能。如果你正在构建一个需要实时更新数据的应用程序，那么你需要一种可靠的方式来传递数据和事件。在这种情况下，Server-sent Events 和 GraphQL 是两种非常有用的技术。
什么是 Server-sent Events？
Server-sent Events 是一种 HTML5 技术，用于在客户端和服务器之间建立实时连接。它允许服务器向客户端推送数据，而无需客户端发送请求。这使得实时数据查询变得更加容易和高效。
Server-sent Events 使用一个长连接来保持客户端和服务器之间的连接，从而允许服务器向客户端推送数据。当客户端接收到数据时，它可以执行任何必要的操作，例如更新 UI 或执行其他操作。
什么是 GraphQL？
GraphQL 是一种查询语言和运行时环境，用于构建 Web 应用程序中的 API。它允许客户端明确地请求需要的数据，而无需获取整个数据集。这使得数据查询更加高效和可靠。
GraphQL 使用一个单一的端点来处理所有的数据请求，从而简化了数据查询的过程。它还提供了一种灵活的方式来定义数据模型和查询语言，使得应用程序更加易于维护和扩展。
如何使用 Server-sent Events 和 GraphQL？
使用 Server-sent Events 和 GraphQL 实现实时数据查询需要以下步骤：
- 在服务器上配置 Server-sent Events 和 GraphQL。
- 在客户端上实现 Server-sent Events 和 GraphQL。
- 编写 GraphQL 查询来获取数据。
- 使用 Server-sent Events 推送数据到客户端。
在服务器上配置 Server-sent Events 和 GraphQL
要在服务器上配置 Server-sent Events 和 GraphQL，你需要一个支持这些技术的服务器。有许多不同的服务器可以使用，例如 Node.js 和 Apache。
在这个例子中，我们将使用 Node.js 和 Express 来实现服务器端。首先，我们需要安装以下依赖：
npm install express express-graphql graphql graphql-subscriptions
然后，我们可以编写以下代码来配置服务器：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - -------------- ------------------ ------------- - - -------------------
----- - ------------------ - - --------------------------------------
----- - -------------------- - - ---------------------------------
----- - ------------ - - ----------------
----- - -------- --------- - - -------------------
----- --- - ----------
----- ------ - ----------------------
--------- -
---- ----- -
------ ------
-
---- ------------ -
--------- ------
-
--
---------- -
------ -
------ -- -- ------ -------
--
------------- -
--------- -
---------- -- -- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- ---------
-- ------
---
-
-
-
-
---
------------------- -------------
-------
--------- ----
----
----- ------ - ------------------
------------------- -- -- -
------------------- --------- -- ---- -------
---
----- ------------------ - --------------------------
- -------- ---------- ------ --
- ------- ----- ---------------- --
--这个代码片段定义了一个包含一个查询和一个订阅的 GraphQL schema。查询返回一个字符串 "Hello world!"，而订阅定期发送一个 "Hello, world!" 字符串。我们还将 Express 应用程序绑定到端口 4000，并将订阅服务器绑定到路径 /subscriptions。
在客户端上实现 Server-sent Events 和 GraphQL
要在客户端上实现 Server-sent Events 和 GraphQL，你需要一个支持这些技术的浏览器。大多数现代浏览器都支持 Server-sent Events 和 GraphQL。
在这个例子中，我们将使用 JavaScript 和 Apollo Client 来实现客户端。首先，我们需要安装以下依赖：
npm install apollo-client apollo-link apollo-link-http apollo-link-ws graphql graphql-tag subscriptions-transport-ws
然后，我们可以编写以下代码来配置客户端：
-- -------------------- ---- -------
------ - ------------- -------------- --------- ----- - ---- -----------------
------ - ------------- - ---- ------------------
------ - ----------------- - ---- ---------------------------
------ - ------------------ - ---- -----------------------------
----- -------- - --- ----------
---- -------------------------------
---
----- ------ - --- --------------
--- ------------------------------------------------------- -
---------- ----
--
--
----- --------- - ------
-- ----- -- -- -
----- ---------- - -------------------------
------ --------------- --- --------------------- -- -------------------- --- ---------------
--
-------
--------
--
----- ------ - --- --------------
----- ----------
------ --- ---------------
---这个代码片段定义了一个 Apollo Client，它使用 HTTP 和 WebSocket 链接来连接到服务器。我们还使用了 subscriptions-transport-ws 库来实现 WebSocket 链接。
编写 GraphQL 查询来获取数据
要编写 GraphQL 查询来获取数据，你需要了解 GraphQL 查询语言和数据模型。GraphQL 查询语言允许你明确地请求需要的数据，而数据模型定义了数据的结构。
在这个例子中，我们将编写一个查询来获取服务器端的 hello 字符串。我们可以使用 Apollo Client 的 useQuery 钩子来执行查询：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ --- ---- --------------
----- ----------- - ----
----- -
-----
-
--
-------- ----- -
----- - -------- ------ ---- - - ----------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ------------------------
-这个代码片段定义了一个查询，它获取服务器端的 hello 字符串。我们还使用了 Apollo Client 的 useQuery 钩子来执行查询，并根据查询状态显示相应的 UI。
使用 Server-sent Events 推送数据到客户端
要使用 Server-sent Events 推送数据到客户端，你需要了解 Server-sent Events 的 API 和事件模型。Server-sent Events API 允许你建立和维护与服务器的长连接，并在服务器推送数据时触发事件。
在这个例子中，我们将编写一个使用 Server-sent Events 推送数据的组件。我们可以使用 EventSource API 来建立连接，并在服务器推送数据时触发 events：
-- -------------------- ---- -------
-------- ---------- -
----- ---------- ------------ - -------------
------------ -- -
----- ----------- - --- ---------------------------------------------------
--------------------- - ------- -- -
------------------------
--
------ -- -- -
--------------------
--
-- ----
------ ----------------------
-这个代码片段定义了一个组件，它使用 EventSource API 来建立连接，并在服务器推送数据时触发 events。我们还使用了 useState 钩子来更新组件的状态。
结论
使用 Server-sent Events 和 GraphQL 实现实时数据查询是一种非常有用的技术。它允许你建立可靠的连接，并在服务器推送数据时触发事件。如果你正在构建一个需要实时更新数据的应用程序，那么你应该考虑使用 Server-sent Events 和 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675e423be1dcc5c0fa453ebd