npm 包 subscriptions-transport-ws 使用教程

前言

Websocket 是一种基于 TCP 协议的全双工通信协议，在前端开发中得到了广泛的应用。而 subscriptions-transport-ws 是一个在 GraphQL 中实现 Websocket 订阅功能的 npm 包。本篇文章将介绍怎样使用 subscriptions-transport-ws 包实现 GraphQL Websocket 订阅功能。

安装

使用 npm 安装 subscriptions-transport-ws:

--- ------- --------------------------

使用 subscriptions-transport-ws

引入 subscriptions-transport-ws 包：

------ - ------------------ - ---- -----------------------------

创建一个 SubscriptionClient 实例：

----- ------------------ - --- ------------------------------------------------- -
  ---------- ----
---

SubscriptionClient 的第一个参数为服务器地址，第二个参数为选项，这里我们设置开启重连模式。

创建一个 WebSocketLink 实例：

------ - ------------- - ---- -----------------

----- ---- - --- ----------------------------------

这里使用了 apollo-link-ws 这个 npm 包，它提供了一个将 SubscriptionClient 转换成 ApolloLink 的方法。

使用 Apollo Client 创建一个 Apollo 实例：

------ ------------ ---- ----------------
------ - ------------- - ---- ------------------------

----- ----- - --- ----------------
----- ------ - --- --------------
  ------
  ----
---

这里使用了 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 包。

参考资源

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/59162

阅读全文

猜你喜欢

  • npm 包 passwd-user 使用教程

    前言 在前端开发中，如果需要实现注册功能，就需要考虑如何安全的存储用户密码。但是，很多开发者经常忽略了这个问题，直接将用户的密码明文存储在数据库中。这种做法非常危险，一旦数据库被黑客入侵，用户的个人信...

    6 年前
  • NPM 包 fullname 使用教程

    什么是 NPM 包 fullname fullname 是一个 Node.js 模块，它提供了一种简单的方式来拼接和格式化人名的组件，用于将名字、中间名和姓氏组合成完全格式化的名称。

    6 年前
  • npm 包 npm-keyword 使用教程

    在现代的前端开发中，使用 npm 包已经成为了一种非常常见的工作方式。但是，随着 npm 上出现的 npm 包数量不断增加，有时候我们可能会非常困难地查找到需要的 npm 包。

    6 年前
  • npm 包 sort-on 使用教程

    当我们需要对 JavaScript 对象数组按照某个属性进行排序时，通常会使用 Array.sort() 方法来实现。但是，该方法仅支持对数字类型和字符串类型进行排序，对于其它类型的对象则无法进行排序...

    6 年前
  • npm 包 sudo-block 使用教程

    npm 是 JavaScript 世界的包管理工具，能够很方便地下载、安装和更新各种依赖包。然而，在很多情况下，我们需要在使用 npm 时获得 root 权限，才能够执行一些需要特权的操作。

    6 年前
  • npm 包 default-uid 使用教程

    简介 在前端开发中，一个常见的需求是生成一个唯一的用户 ID。而 npm 包 default-uid 就是为了解决这个问题而诞生的。 default-uid 可以帮助你生成一个唯一的用户 ID，支持自...

    6 年前
  • npm 包 downgrade-root 使用教程

    npm 是前端开发者必不可少的工具之一，它可以方便地安装和管理众多的第三方包。然而，有时我们在使用某些包时会遇到版本兼容性的问题。这时候我们可能需要降级某些依赖包的版本才能保持项目的正常运行。

    6 年前
  • npm 包 root-check 使用教程

    简介 root-check 是一个可以检查当前进程是否以 root 权限（或管理员权限，即 Windows 平台下的管理员账户权限）进行运行的 npm 包。在开发一些需要访问系统资源或执行敏感操作的应...

    6 年前
  • npm 包 parse-help 使用教程

    在现代前端开发中，我们往往需要与各种开源库、框架或者工具进行交互。其中一个不可或缺的元素就是了解如何使用 npm。而其中一个常用的 npm 包 parse-help 则可以帮助你解析命令行工具的帮助信...

    6 年前
  • npm 包 yeoman-doctor 使用教程

    为什么需要 yeoman-doctor 在前端开发的过程中，我们经常会使用到 Yeoman，它是一个现代化的前端开发脚手架工具，可以帮助我们快速创建项目、生成代码等。

    6 年前
  • npm 包 yeoman-character 使用教程

    什么是 yeoman-character yeoman-character 是一个基于 yeoman-generator 的 npm 包，主要用于快速生成各种字符图案，如 ASCII 字符画、彩色字符...

    6 年前
  • npm 包 yo 使用教程

    什么是 npm 包 yo？ npm 包 yo 是一款 Node.js 的脚手架工具，用于生成项目的基础结构和代码。它可以帮助开发者快速创建项目，并提供了丰富的插件和模板，使得开发更加高效和规范化。

    6 年前
  • npm 包 webscaledb 使用教程

    在现代的 Web 应用程序中，数据库是至关重要的。而 webscaledb 是一个超高效的数据库，可以帮助您处理大规模的 Web 数据。本文将详细介绍 webscaledb 的使用方法，包括安装、配置...

    6 年前
  • npm 包 bloater 使用教程

    在开发中，我们经常需要处理字符串，而字符串操作过多会导致代码不够简洁、难以维护。此时，一个好用的 npm 包就显得尤为重要。本篇文章将介绍一个常用的 npm 包 bloater，并详细讲解如何正确使用...

    6 年前
  • npm 包 yaml-front-matter 使用教程

    在前端开发中，经常需要使用 YAML Front Matter 来处理文本文件（如 markdown 文件）中的元数据（metadata）。而 npm 包 yaml-front-matter 则提供了...

    6 年前
  • npm 包 parcel-plugin-md2vue 使用教程

    在前端开发过程中，我们经常会用到 Markdown 来编写文档，但是在项目中，我们通常会需要将 Markdown 文件转换成 Vue 单文件组件，以便于插入样式等前端元素。

    6 年前
  • npm 包 ejs-compiled-loader-webpack4 使用教程

    在前端开发中，我们经常需要使用到模板引擎来渲染数据。ejs 是一种非常流行的模板引擎，它可以帮助我们快速生成 HTML 页面。本文将介绍如何使用 npm 包 ejs-compiled-loader-w...

    6 年前
  • npm 包 csjs 使用教程

    npm 包 csjs 使用教程 在前端开发中，我们经常需要对网页样式进行处理，而样式表文件的维护和调试常常令人头痛，特别是团队配合开发时更是如此。csjs 就是为解决这个问题而产生的一种工具。

    6 年前
  • React Refs

    在 React 中，Refs 是用来访问组件实例或 DOM 元素的方法。Refs 提供了一种直接操作 DOM 元素的方式，通常在需要处理焦点、媒体播放、动画等场景下使用。

    6 年前
  • React 表单与事件

    在 React 中，表单和事件处理是非常重要的部分，因为它们允许用户与应用程序进行交互。本章将介绍如何在 React 中处理表单和事件。 表单 在 React 中，表单元素的工作方式与普通的 HTML...

    6 年前

相关推荐

    暂无文章