如何在 GraphQL 中使用 Websocket？

面试官：小伙子，你的数组去重方式惊艳到我了

GraphQL 是一种用于 API 的查询语言，其具有明确定义的类型系统，使得数据查询变得更加高效与可靠。而 Websocket 是一种实现了双向通信的协议，能够在服务器和客户端之间建立长连接，为实时通信提供了更好的能力。在使用 GraphQL 进行实时数据推送时，Websocket 可以成为实现方案之一。本文将介绍如何在 GraphQL 中使用 Websocket 来实现实时通信。

基础知识

在开始使用 Websocket 之前，需要了解一些基础知识：

  1. WebSocket API: Websocket API 是指在 HTML5 中新增的一组 JavaScript API，用于在客户端与服务器之间建立 Websocket 连接。

  2. GraphQL subscriptions: subscriptions 是 GraphQL 操作之一，用于订阅服务器上的实时事件和更新。它们允许客户端接收有关服务器状态更改的推送通知。

  3. Apollo-Client: Apollo-Client 是一个用于连接客户端和 GraphQL 服务器的 JavaScript 库，其中包含许多开箱即用的功能，如查询缓存和 subscriptions。

使用 Apollo-Client

下面我们将使用 Apollo-Client 来订阅服务器上的实时事件。在使用 Apollo-Client 之前，需要先安装它：

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

客户端配置

在客户端中配置 Apollo-Client 时，需要创建一个 WebSocketLink，并将其添加到 HttpLink 的链中。例如：

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

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

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

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

这里在配置 Apollo-Client 时创建了一个分裂链接 split link，用于在订阅操作时切换到 WebsocketLink。需要注意的一点是，WebsocketLink 的 uri 不是使用 HTTP 协议，而是使用 WS 协议。

订阅数据

使用 Apollo-Client 进行订阅时，需要在 gql 中定义订阅类型的操作。例如：

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

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

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

这里定义了一个名为 NEW_MESSAGE_SUBSCRIPTION 的 subscription，并在 Subscription 组件中订阅它。当数据被推送到客户端时，onSubscriptionData 可以接收到新的数据。

服务端配置

在服务端可以使用 Apollo-Server 来支持 GraphQL subscriptions。例如：

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

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

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

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

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

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

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

这里定义了名为 pubsub 的 PubSub 实例，并通过该实例发布和订阅 NEW_MESSAGE_EVENT 事件。在 Subscriptions 中，将订阅器的 subscribe 函数绑定到事件上，即可实现当事件被发布时，subscriptions 服务等待与之关联的客户端。在服务端使用 SubscriptionServer 添加 Websocket 连接。

结论

使用 Apollo-Client 可以很容易地实现 GraphQL subscriptions。在使用 Websocket 建立连接时，需要注意协议要使用 ws 而非 HTTP。在服务端可以使用 Apollo-Server 来支持 GraphQL subscriptions。通过对相关代码的分析，我们可以更好地使用 Websocket 和 GraphQL 进行实时通信。

参考资料：

GraphQL Subscriptions with Apollo

GraphQL Subscriptions for Real-Time Communication

How to use GraphQL subscriptions with Apollo Client

GraphQL Subscriptions with NodeJS and Apollo Server

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

阅读全文

猜你喜欢

  • 使用 Mongoose 让 Express.js 与 MongoDB 更好地合作

    前言 在现代 Web 应用中，前端类技术已成为了不可或缺的一部分。作为一名前端工程师，我们需要掌握多种技术，其中包括 Express.js 和 MongoDB。 Express.js 是 Node.j...

    8 天前
  • ESLint 在 Webpack 中的使用及常见问题

    ESLint 在 Webpack 中的使用及常见问题 前言 随着 JavaScript 的日益普及，越来越多的前端开发者开始意识到使用代码规范可以提高代码的质量、可读性和可维护性。

    8 天前
  • Docker 数据管理指南：如何使用 Docker 容器解决数据管理的挑战？

    在软件开发和部署过程中，数据管理是一个至关重要的挑战。数据需要被存储、备份和恢复，以及在不同环境之间传输。然而，传统的数据管理方案往往会面临复杂、难以控制的问题，这使得数据管理变得更加困难。

    8 天前
  • 解决 ES11 中 switch 语句默认分支失效问题

    在 ES11 中，switch 语句默认分支有可能失效，这是一个非常棘手的问题，因为它可能导致你的代码产生难以发现的 bug，那么我们该如何解决这个问题呢？ 问题的背景 在 ES11 中，ECMA 规...

    8 天前
  • 如何用 Koa 框架搭建 API 网站

    前言：在实际的开发中，前端开发者并不仅仅只负责页面的展示，也要对接后端提供的数据接口。对于 API 接口的搭建，现在主流的方式是使用 Node.js 作为后台语言，而 Koa 是一个基于 Node.j...

    8 天前
  • 如何优雅地捕获 Promise 中的错误？

    引言 Promise 是 JavaScript 中编写异步代码时的重要工具之一，它允许把代码分为不同的阶段，使代码更加清晰易读。但是，即使 Promise 的模式看起来是完美的，它仍然充满了错误和问题...

    8 天前
  • Kubernetes 中调度失败的 Pod 排查思路

    在 Kubernetes 中，Pod 被调度到合适的 Node 上运行是非常关键的。然而，有时候 Pod 可能会因为各种原因而无法被调度，这就需要我们使用一些排查思路来解决问题。

    8 天前
  • 如何与前端技术（如 React）结合使用 GraphQL？

    GraphQL 是一种由 Facebook 创建的查询语言，用于 API 开发，它允许前端通过一次请求获取服务端所提供的需求（点对点）的数据，没有其它的冗余信息和语法难度。

    8 天前
  • 如何选择适合自己的 Redis 大 Key 清理方案？

    前言 Redis 作为 NoSQL 数据库之一，处理速度极快，在 Web 项目中得到了广泛的应用。但是，在长时间运行之后，可能会出现 Redis 数据库中的大 Key。

    8 天前
  • 利用 Flexbox 实现两列布局

    Flexbox（Flex布局）是一种强大的CSS布局模型。它提供了一种简单、直观的方式来对元素进行布局，并且在适应各种屏幕大小和设备类型方面非常灵活。在本篇文章中，我们将讨论如何使用Flexbox实现...

    8 天前
  • 使用 Deno 连接 MySQL 数据库

    简介 Deno 是一个基于 V8 引擎的可信赖的 TypeScript 运行时环境，而 MySQL 是一个流行的开源关系型数据库管理系统，在前端开发中，访问数据库是必不可少的。

    8 天前
  • Headless CMS 中如何实现内容的权限管理

    在现代前端开发中，Headless CMS 是一个非常流行的解决方案，它可以帮助我们更好地管理和展示网站的内容。但是，内容的权限管理是 Headless CMS 中一个非常重要的话题，因为对于不同的用...

    8 天前
  • 使用 Socket.io 解决实时数据同步的问题

    随着现代 Web 应用不断发展，实时数据同步成为了一个十分重要的技术需求。例如在聊天应用、协同工具以及游戏中，需要实现数据的实时同步，允许多个用户同时交互。 Socket.io 是一种开源库，专门用于...

    8 天前
  • Sparrow：由 5 种极简前端框架组成的 SPA 开发工具包

    简介 Sparrow 是一个由五种极简前端框架组成的 SPA（单页面应用）开发工具包。这五种框架都具有不同的特点和功能，可以根据项目的需要进行选择。Sparrow 提供了一些常用的工具、组件与指南来快...

    8 天前
  • 如何使用 Chai 和 Mocha 测试 AngularJS 1 代码？

    AngularJS 是一个受欢迎的 JavaScript 框架，旨在让前端开发变得更加轻松、快捷和高效。为了确保我们的 AngularJS 代码完全正常运行，我们需要对其进行测试。

    8 天前
  • PM2 集群模式下的多核优化策略解析

    PM2 集群模式下的多核优化策略解析 随着单台服务器的 CPU 核数不断提高，利用多核优化应用程序已经成为了必要的操作。在前端开发中，Node.js 作为一种常用的运行环境，也需要进行多核优化。

    8 天前
  • ES8 中 Object.getOwnPropertyDescriptors() 的深度研究及其应用

    作为前端开发人员，我们在日常工作中不可避免的需要处理对象。ES8 中引入的 Object.getOwnPropertyDescriptors() 方法允许我们更方便地操作对象属性，为我们的工作带来了一...

    8 天前
  • MongoDB 与 Redis 的应用场景分析

    在前端开发中，使用 NoSQL 数据库已经成为一种趋势。MongoDB 和 Redis 都是常见的 NoSQL 数据库，但它们的应用场景有很大的不同。本文将分析 MongoDB 和 Redis 的应用...

    8 天前
  • 如何在 TailwindCSS 中使用自定义 UI 组件？

    TailwindCSS 是一个流行的 CSS 框架，它提供了许多现成的类名，可以帮助我们快速地构建出漂亮且可用性强的 UI。但是，在实际的项目中，我们常常需要编写自己的 UI 组件以满足特定的需求。

    8 天前
  • 如何使用 React Native 调用 API 接口？

    React Native 是一种使用 JavaScript 语言编写原生移动应用的框架。它允许开发者使用类似 React 的组件模型来构建 UI，然后调用原生 API 来处理应用的各种功能，例如文件系...

    8 天前

相关推荐

    暂无文章