前言
Websocket 是一种基于 TCP 协议的全双工通信协议，在前端开发中得到了广泛的应用。而 subscriptions-transport-ws 是一个在 GraphQL 中实现 Websocket 订阅功能的 npm 包。本篇文章将介绍怎样使用 subscriptions-transport-ws 包实现 GraphQL Websocket 订阅功能。
安装
使用 npm 安装 subscriptions-transport-ws:
npm install subscriptions-transport-ws
使用 subscriptions-transport-ws
引入 subscriptions-transport-ws 包：
import { SubscriptionClient } from 'subscriptions-transport-ws';创建一个 SubscriptionClient 实例：
const subscriptionClient = new SubscriptionClient('ws://localhost:4000/graphql', {
reconnect: true
});SubscriptionClient 的第一个参数为服务器地址，第二个参数为选项，这里我们设置开启重连模式。
创建一个 WebSocketLink 实例：
import { WebSocketLink } from 'apollo-link-ws';
const link = new WebSocketLink(subscriptionClient);这里使用了 apollo-link-ws 这个 npm 包，它提供了一个将 SubscriptionClient 转换成 ApolloLink 的方法。
使用 Apollo Client 创建一个 Apollo 实例：
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
const cache = new InMemoryCache();
const client = new ApolloClient({
cache,
link
});这里使用了 apollo-cache-inmemory 这个 npm 包，它提供了一个使用 JavaScript 的缓存实现。
创建一个 GraphQL 订阅：
-- -------------------- ---- -------
------ --- ---- --------------
----- ------------ - ----
------------ -
------- -
-----
-------
-
-
--新建一个 SubscriptionObserver 订阅者实例：
-- -------------------- ---- -------
------ - -------------------- - ---- --------------------------------
--- -------------------- - -----
---------------------------------- -- -- -
-------------------- - ------
------------
------ ------------
--
-----------
------ -- -
-- ------
--
----- -- -
-- ------
-
--
---
------------------------------------ -- -- -
-------------------- - ------
------------
------ ------------
--
-----------
------ -- -
-- ------
--
----- -- -
-- ------
-
--
---
------------------------------------- -- -- -
-- ---------------------- -
-----------------------------------
-------------------- - -----
-
---这里我们使用了 Apollo Client 提供的 SubscriptionObserver 类，订阅成功后，可以获取到返回的数据 result，订阅失败可以获取到错误信息 error。
当连接断开时，我们需要将订阅者实例 unsubscribe，并将订阅者实例置为 null。
示例代码
下面是一个完整使用 subscriptions-transport-ws 包的示例代码：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ - ------------- - ---- -----------------
------ - ------------- - ---- ------------------------
------ ------------ ---- ----------------
------ --- ---- --------------
------ - -------------------- - ---- --------------------------------
----- ------------------ - --- ------------------------------------------------- -
---------- ----
---
----- ---- - --- ----------------------------------
----- ----- - --- ----------------
----- ------ - --- --------------
------
----
---
----- ------------ - ----
------------ -
------- -
-----
-------
-
-
--
--- -------------------- - -----
---------------------------------- -- -- -
-------------------- - ------
------------
------ ------------
--
-----------
------ -- -
--------------------
--
----- -- -
-------------------
-
--
---
------------------------------------ -- -- -
-------------------- - ------
------------
------ ------------
--
-----------
------ -- -
--------------------
--
----- -- -
-------------------
-
--
---
------------------------------------- -- -- -
-- ---------------------- -
-----------------------------------
-------------------- - -----
-
---结论
subscriptions-transport-ws 是一个实现 GraphQL Websocket 订阅的 npm 包，它可以帮助我们快速地实现订阅功能。本篇文章中，我们详细介绍了如何使用 subscriptions-transport-ws 包。
参考资源
- subscriptions-transport-ws 官方文档: https://github.com/apollographql/subscriptions-transport-ws
- apollo-link-ws 官方文档: https://www.apollographql.com/docs/link/links/ws/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59162