在前端开发中，实时通信变得越来越重要。在过去，我们使用轮询或者 WebSockets 来实现实时通信，但是这些方法都不是很完美。近年来，GraphQL 的出现解决了这个问题。GraphQL subscriptions 是一个实现实时通信的协议，它支持服务器向客户端发送数据的推拉方式，使得我们可以轻松实现实时通信。本文将会介绍如何在 React 项目中使用 GraphQL subscriptions 来实现实时通信。
安装依赖包
首先需要安装 graphql-subscriptions 和 subscriptions-transport-ws 两个包。使用 npm 安装：
npm install graphql-subscriptions subscriptions-transport-ws
实现 subscriptions
在开始实现 WebSocket 的订阅前，我们需要准备好一个服务端，该服务端能够处理 GraphQL subscriptions。GraphQL subscriptions 使用 WebSocket 协议实现，在服务端部分，我们可以使用 graphql-yoga，它就支持 Subscriptions。
在服务端的实现里，实时推送信息到客户端的步骤是这样的：我们需要为每个连接保存一个 Set，每当有信息推送时，遍历 Set，向所有客户端发送信息即可。
这里提供了一个例子，服务端使用 graphql-yoga 和 express，并假设现在有一个计数器应用程序。
-- -------------------- ---- -------
----- - ------------- - - ------------------------
----- ------- - -------------------
----- - ------------ - - ----------------
----- - ------------------ - - --------------------------------------
----- - -------------------- - - -------------------------
----- - ------ - - ---------------------------------
----- --- - ----------
----- ---------- - ------------------
----- -------- - -
---- ----- -
------ ----
-
---- -------- -
---------- --------
-
---- ------------ -
------------- ----
-
--
----- ------ - --- ---------
----- ------------- - ----------------
----- --------- - -
------ -
------ -- -- --
--
--------- -
---------- -- -- -
----------------------------- - ------------- - ---
------ -----
--
--
------------- -
------------- -
---------- -- -- ------------------------------------
--
--
--
----- ------ - ---------------------- --------- --------- ---
----- ------- - ----- ---- -- -- ---- --- ---
----- ------ - --- ---------------
-------
--------
---
-------------- ---------- -- -- --
--- -------------------
-
-------
--------
----------
--
-
------- -----------
----- -----------------
-
-
--这里在服务端定义了一个计数器，每次调用 increment mutation，就会向所有客户端推送计数器变化的信息。
客户端 subscriptions 的实现
我们需要使用一个 GraphQL 客户端，这里用到的是 apollo-boost，因为它已经含有了 subscriptions-transport-ws。
-- -------------------- ---- -------
------ ------------ ---- ---------------
------ - -------------- - ---- ---------------
----- ------ - ------------------------------------
----- ------ - --- --------------
---- --------------------------------
------------ -
--------- -
------ --
--
---------- ---
--
-------- -
-------------- ------- ----------------------------------
--
-------- --------- -- -
----------------------
-------- -
-------------- ------- ----------------------------------
--
---
--
-- -- -- --
-- --- --- ------------------------ --
-- ------------------------ ----------
-- -- ---------------- --
-- -------- --- -----
------------ -
--------- -
------ --
--
---------- ---
--------- -
---- ----- -
------ ---
-
--
---------- ---
--------- -
---- ----- -
------ ---
-
---- -------- -
---------- --------
-
---- ------------ -
------------- ----
-
--
---------- -
--------- -
---------- -- -- --------------- --------- ----------------- ---
--
------------- -
-- ------------ ------- -----
------------- -
---------- -- --
------------------ ------ ------------------------ --------------
---------- -
------------------
------------------------
----- - ------ ---------------------- --
---
--
---
--
--
--
--
-- -- -- --
-- ------------------ --- ------------ ----
-- --- ------ ----------- --- --
-- -- ------ --- ------------
-- --- -------------- ----
------- --- ----------------- --------------------------- - ----- ----- ---------- ---- ---
---
----- ------------------------ - ----
------------ -
------------
-
--
----- ----------------- - ----
-------- -
---------
-
--
-------
--------------- ----------------
-----
------- ------------- ----------- -- --------------- --------- ----------------- ----
--
---------
-----
------ ------------ ----- --- ----------------
--- -------- ---- -- -- -
-- --------- ------ -------------
------ -----------
--
--------
------
------
------------------
-------------------------------
--这里客户端可以足以支持一个简单的计数器应用。在客户端启动后，每次调用 increment mutation，服务端将会向所有客户端发送实时信息，实时更新 UI。
总结
通过这个例子我们可以看到，使用 GraphQL subscriptions 的过程既简单又过程直观。使用这个协议来实现实时通信，能够为社交应用、游戏，以及实时文本编辑器等应用程序提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bdf6d95b1f8cacd37aa29