随着现代 Web 应用程序不断增长的需求，实时更新已经成为一个必不可少的 feature。GraphQL 是一个流行的数据查询语言，具有灵活性和性能优势，也可以方便地实现实时更新。
在本篇文章中，我们将介绍如何使用 GraphQL 和 WebSocket 实现实时更新，并提供详细步骤和示例代码。
什么是 GraphQL
GraphQL 是一个由 Facebook 开发的数据查询语言，它的主要目的是提高 Web 应用程序的性能和灵活性。它通过单个 API 来提供所有数据，使用它可以减少网络请求和数据传输量。此外，GraphQL 还可以让客户端请求特定的数据字段和关联数据，减少了不必要的数据传输。
GraphQL 将所需数据的请求和响应捆绑在一起，这意味着数据可以在一起被传输。然而，尽管在数据传输方面有优势，但它并不能实现实时更新。
为什么需要实时更新
实时更新是指在服务器上发生更改时，Web 应用程序自动更新其端点。这种实时性对于许多应用程序非常重要。例如，聊天应用程序需要与服务器即时通信，以便正确地显示信息。
对于许多应用程序来说，使用轮询的传统方法可能是不可行的，因为轮询会产生大量的网络请求和数据传输。而使用实时更新可以节省带宽和服务器资源，并且可以提供更快的响应时间和更好的用户体验。
如何实现实时更新
实时更新需要使用传输协议来实现。WebSocket 是实现实时 Web 应用程序所需的一种最流行的协议之一。由于它是一种双向协议，客户端和服务器可以同时发送和接收数据，并允许服务器通过推送来更新客户端。这使得 WebSocket 成为实现实时更新的理想选择。
GraphQL 和 WebSocket 可以结合使用来实现实时更新。GraphQL 的订阅功能允许客户端订阅特定的查询，并在服务器发生更改时自动接收更新。结合 WebSocket 等实时更新技术，可以实现高效的 Web 应用程序。
如何使用 GraphQL 和 WebSocket 实现实时更新
下面是如何使用 GraphQL 和 WebSocket 实现实时更新的具体步骤
步骤1：安装所需软件包
首先需要安装下列技术。因此，可以直接使用 NPM 进行安装。
- graphql
- graphql-subscriptions
- subscriptions-transport-ws
- express
- graphql-express
- body-parser
- cors
- ws
npm install graphql graphql-subscriptions subscriptions-transport-ws express graphql-express body-parser cors ws
步骤2：定义 GraphQL schema
在定义 GraphQL schema 时，需要添加 Subscription 类型并编写所有订阅的逻辑。在此示例中，我们将使用名为 numberAddition 的订阅，该订阅将持续添加数字，并将结果发送回客户端。
-- -------------------- ---- -------
----- - -------------- ------------------ ---------- - - -------------------
----- - ---------- - - ---------------------------------
----- -------------- - -
----- -----------
---------- -----------
--- --- - ------ -- -- -
------ ----------------------------------------
--
--------- ---------- -- -
------ -----
-
--
-------- --------- -- -
------ ---------------
--
--
----- ---------------- - --- -------------------
----- ---------------
------- -
---------------
--
---
----- ------ - --- ---------------
------ ----------
--------- -------------
------------- -----------------
---步骤3：启动 Express 服务器
在启动 Express 服务器之前，需要进行一些配置。这包括加载中间件和创建 GraphQL 服务。在此示例中，我们将使用 express-graphql 中间件来创建 GraphQL 服务。
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ---------------------------
----- - -------------------- - - --------------------------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- - ------------ - - ----------------
----- ---- - ----------------
----- -
--------
----------
--------------
------------------
-----------
--------------
- - -------------------
----- - ---------- - - ---------------------------------
----- - ------------------ - - --------------------------------------
----- --- - ----------
----------------
----------------------------
-------------------------------- --------- ----- ---
--------
-----------
-------------
------- -------
--------- -----
---------- -----
-------- - ------ --
-------- ------
--
--步骤4：创建和启动 WebSocket 服务器
WebSocket 服务器可以使用 ws 软件包创建。在此示例中，我们将 WebSocket 服务器添加到 Express 服务器中，以使用与现有服务器相同的端口。
-- -------------------- ---- -------
----- ------ - ------------------
----- -------- - --- -----------
------- -------
----- -----------
-- -------- ---------
---
------------------------- -------- -------- -- -
----- ------ - --------------------------
----- -- - ------------ -----------------------------------
----- ------ - --- -------------------
---------------------------------------
-
---------- -----
--
---
--
--------------------- -- -
------------------- ------------ ------------
---
------------------------ -- -
------------------- ------------ ---------------
---
---------------------- -- -
-------------------- -- ------ --------------- -------
---
----- --------- - --------- -- -
--- -
----- ------------- - --------------------
-- ------------------- --- ------------------ -
------------------- ------------ --------------
---------------------------- ----- ---------------- ----
- ---- -- ------------------- --- -------- -
----- ----- - ----------------------------
----- --------- - --------------------------------
----- ------- - -
-------
-------
--
-----------
------- -------
--------- ------
------------- --------
--------------- ----------
--
-------------------- --
------------------------
----- ------- --
------------
----------------
----- -------
--- -----------------
-------- ------
--
--
------ ------- --
------------
----------------
----- --------
--- -----------------
-------- ------
--
--
--------- -- --
------------
----------------
----- -----------
--- -----------------
--
--
--
-
-------- --
------------------- ------------ ---------------
-
-------------- --
--------------------- ------ -- -------------- ------
--
-
- ----- ------- -
-------------------- -- ------ --------------- -------
-
--
-------------------- -----------
------------------ -- -- -
---------------
------------------- ------------ ---------------
---
---
------------------- -- -- -
-------------------- ------ -- --- ------- -- ------------------------
---完成上述步骤后，您现在已经可以使用 GraphQL 和 WebSocket 实现实时更新，如下所示：
-- -------------------- ---- -------
----- -- - --- ----------------------------------------------
--------- - -- -- -
--------
---------------
- ----- ----------------- --
-
--
--------
----------------
----- --------
--- --
-------- -
------ -
------------ -
--------------
-
--
---------- ---
--
--
--
--
---------- - ------- -- -
---------------------
--
------------ - --------- -- -
--------------------------------------
--此代码订阅 numberAddition 并打印每次更新。
结论
GraphQL 是一个灵活且高性能的数据查询语言，它可以通过结合 WebSocket 实现实时更新。本文介绍了如何使用 GraphQL 和 WebSocket 实现实时更新，并提供了详细步骤和示例代码。通过了解这个过程，开发人员可以更好地了解如何在现代 Web 应用程序中使用 GraphQL 来实现实时性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6738428e317fbffedf0f2aec