GraphQL 中的订阅和实时更新

GraphQL 是一种用于API的查询语言，它由Facebook开发并于2015年发布。与REST API不同，GraphQL并不遵循固定的URL结构或HTTP方法。它允许您精确地指定需要提取的数据，并且减少了不必要的资源获取。此外，GraphQL还具有一项出众功能，即订阅和实时更新。

什么是订阅和实时更新

订阅是一种类似于长轮询的技术，它允许客户端与服务器之间建立一个持久的连接并保持打开状态，从而可以及时获取与查询相关的任何事件更新。订阅的实现方式是WebSocket协议，这是一种基于TCP协议的传输层协议，可以提供实时和双向的数据传输。

实时更新是指当后端数据发生更改时，前端自动及时更新的过程。这种实时更新的实现方式常常使用WebSocket进行实现，以实现真正的实时更新，而不只是在用户请求时及时返回数据。鉴于其高效和便利性，订阅和实时更新正在快速走向前端开发的主流趋势。

如何在GraphQL中实现订阅和实时更新

首先，需要在后台服务器上使用GraphQL Subscriptions来启用该功能。GraphQL Subscriptions是GraphQL规范的补充，是一种Server-to-Client模式的实现方式。此外，还需要使用Apollo Client、GraphQL Yoga等前端库，以便能够在前端应用程序中进行订阅和实时更新。

下面我们使用GraphQL Subscriptions和Apollo Client来实现一个简单的聊天程序的订阅和实时更新功能：

1. 准备工作

首先，我们需要在后端服务器上使用GraphQL Subscriptions来启用该功能。

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

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

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

在上面的代码中，我们使用subscriptions-transport-ws库来启动服务器使用WebSocket协议。接着，我们创建了一个HTTP服务器，并将其与我们的WebSocket服务器进行了连接。我们还将subscriptions-transport-ws库提供的createSubscription函数公开在服务路线上。

2. 创建数据库

在这个例子中，可以用以下方法来创建一个内存数据库来存储聊天室历史记录和正在进行的会话：

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

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

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

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

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

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

在上面的代码中，我们定义了一个空“消息”数组，一个空的“会话”对象，以及一些操作这些对象的函数。

3. 定义 GraphQL schema

我们使用GraphQL schema来描述数据模型以及客户端如何请求它。下面是我们用来查询当前消息记录和创建新消息的查询和突变。

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

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

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

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

我们定义了一个messages字段来查询当前“消息”记录。我们还定义了一个sendMessage突变，用于向聊天室发送新消息。

4. 编写subscription

现在，我们可以通过GraphQL Subscriptions定义订阅。这将使用WebSocket来建立与客户端的长期连接，并在后端数据发生更改时通知它们。以下是用于订阅新消息的定义。

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

我们定义了一个messageSent订阅，用于订阅发生在给定“ sessionId”的新消息。

5. 在前端应用程序中编写客户端代码

对于前端应用程序，我们将使用Apollo Client和subscriptions-transport-ws库来建立与后端服务器的WebSocket连接，并从“ messageSent”订阅接收消息。

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

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

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

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

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

上面的代码创建了Apollo Client，并使其可以与我们的WebSocket服务器建立连接。我们确保我们和HTTP服务器也建立了连接。我们使用split()函数来组合这两个链接。

现在，我们可以使用我们编写的订阅消息的代码来从后端服务器接收聊天消息。以下是完整的代码：

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

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

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

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

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

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

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

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

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

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

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

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

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

当我们运行代码时，在前端应用程序中，我们可以看到自动实时更新聊天框中的消息，从而实现了订阅和实时更新的功能。

结论

GraphQL的订阅和实时更新机制使得开发实时应用变得更加便捷和高效，能够大幅缩短数据更新的延迟时间，更好地实现数据的实时传输，同时也能够更好地保证数据安全。在实际开发项目中，考虑实时应用或者及时更新的需求，GraphQL的订阅和实时更新机制尤其值得注意。这里我们提供了一个简单的聊天程序的例子，讲述了如何使用Apollo Client、GraphQL Subscriptions来实现基于WebSocket的订阅和实时更新机制。

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

阅读全文

猜你喜欢

  • 采用 CSS Reset 避免兼容性问题实践分享

    在前端开发中，CSS 是必不可少的一部分。但由于不同浏览器的渲染机制不同，往往会导致不同的兼容性问题。为了解决这些问题，本文介绍了如何使用 CSS Reset 避免兼容性问题，以及实践过程中需要注意的...

    8 天前
  • 使用 Node.js 和 Express.js 处理身份验证的完整指南

    身份验证是一个网站或应用程序中的关键功能，它确保只有授权用户才能访问敏感信息或执行敏感操作。在本文中，我们将介绍如何使用 Node.js 和 Express.js 创建一个带有身份验证的完整 web ...

    8 天前
  • 如何使用 AspNetCore MVC 构建 RESTful API 并进行单元测试

    在前端开发中，RESTful API 是一个非常重要的概念。在实现 Web 应用程序的同时，还需要构建 API，以便其他开发人员可以使用它们来获取应用程序的数据。使用 AspNetCore MVC，您...

    8 天前
  • Babel 编译 ES6 时出现”TypeError: Cannot read property 'bindings' of null“错误该如何解决？

    在进行 ES6 开发时经常需要使用 Babel 编译器将 ES6 代码转换为 ES5，以便让最新的 JavaScript 语言特性可以得到到广泛的支持。但是，有时候在使用 Babel 编译时会遇到一个...

    8 天前
  • 解决自定义元素在滚动时闪烁的问题

    在前端开发中，我们经常会用到自定义元素，尤其是在构建可重用的组件时。然而，当我们在滚动页面时，自定义元素可能会出现闪烁的问题，这会影响用户的体验并降低页面的质量。 本文将介绍该问题的原因，并提供解决方...

    8 天前
  • 使用 ESLint 和 Vue.js 开发应用程序

    Vue.js 是一个流行的前端框架，可以让开发者更容易地构建复杂的单页应用程序。 但是，编写大型应用程序往往变得困难。代码结构变得混乱，面对大量重复代码以及处理这些代码中的错误和警告变得非常麻烦。

    8 天前
  • 在 Kubernetes 中使用自动伸缩组 (ASG) 来管理节点的自动缩放

    前言 在 Kubernetes 集群中，节点的数量直接关系到集群的负载能力和可靠性，如果节点数量过多或过少，都会导致资源的浪费或者集群的不稳定。而自动伸缩组（ASG）则可以帮助我们根据实际的负载情况来...

    8 天前
  • ECMAScript 2019 及其新特性汇总

    ECMAScript 2019 及其新特性汇总 ECMAScript 是一个国际标准组织，该组织发布了 JavaScript 的标准。每年，ECMAScript 都会发布一个新版本来支持新的特性。

    8 天前
  • Enzyme：React 单元测试的高效方式

    对于前端工程师而言，单元测试是保证代码质量和可靠性的关键步骤之一。而对于使用 React 开发的应用而言，单元测试却往往需要借助于额外的工具本质实现。Enzyme 就是其中一种功能强大的测试工具，它可...

    8 天前
  • 响应式设计中处理数据重叠的方法

    随着移动设备的普及，响应式设计已成为现代网页设计的重要组成部分。然而，在移动设备上，有时候会出现一种情况：当数据量较大时，数据会在页面上重叠，影响用户体验。本文将介绍在响应式设计中，处理数据重叠的方法...

    8 天前
  • 深入浅出 Hapi.js 路由：理解 Server、Route 和 Handler

    在前端开发中，Web 服务器框架是一种非常重要的工具。Hapi.js 作为一款现代化的 Web 服务器框架，有着非常广泛的应用，尤其是在 Node.js 生态系统中。

    8 天前
  • ECMAScript 2018：异步迭代器与可让人提前退出的迭代器

    ECMAScript 2018（ES2018）是 JavaScript 的最新版本，其中包含了很多新的语言特性和增强功能，其中特别引人注目的是异步迭代器和可让人提前退出的迭代器。

    8 天前
  • Deno 中如何解决模块循环引用问题？

    背景 Deno 是一个新型的 JavaScript / TypeScript 运行时环境，它的设计目标是安全、现代、可靠。Deno 的模块加载方式和 Node.js 有所不同，既没有 CommonJS...

    8 天前
  • React Native 组件性能优化的几种方法

    React Native 作为一种跨平台的移动应用开发框架，越来越受到开发者们的关注。然而，如何在 React Native 中提高组件的性能是一个值得注意的问题。

    8 天前
  • 自定义元素中使用 ECharts 进行数据可视化

    在现代化的 Web 应用程序中，数据可视化已成为一种不可或缺的工具。ECharts 是一个基于 JavaScript 的开源数据可视化库，提供了直观、交互式、高性能的图表和可视化组件，可用于创建各种类...

    8 天前
  • 使用 Web Components 实现跨端复用和可维护性

    Web Components 是一种新兴的 Web 技术，它允许开发者定义自定义元素及其行为，可以实现跨浏览器和跨平台的复用，同时也可以提高代码的可维护性和扩展性。

    8 天前
  • Tailwind CSS 输入框 focus 时如何修改边框颜色？

    Tailwind CSS 是一款流行的 CSS 框架，它具有丰富的类集合和易于使用的 API，可以快速地构建漂亮和响应式的用户界面。 在 Tailwind CSS 中，我们可以方便地修改输入框的大小、...

    8 天前
  • 如何在 Hapi.js 应用中使用 Mongoose

    概述 在现代网站和应用程序的构建中，使用数据库是非常有用的。MongoDB 是一个广泛使用的非关系型数据库，而 Mongoose 是一个开源的 JavaScript 库，可以方便地连接、访问和管理 M...

    8 天前
  • AngularJS 中的 $httpBackend 模拟后端请求

    什么是 $httpBackend？ 在 AngularJS 中，$httpBackend 是一个内置的服务，它可以模拟后端请求，包括 GET、POST、DELETE、PUT 等请求方式。

    8 天前
  • Vue.js 中的组件通信方式总结

    Vue.js 是一个流行的 JavaScript 前端框架，其组件化开发方式在前端开发中被广泛应用。在 Vue.js 中，组件是基本构建块，它们相互协同工作才能实现复杂的网页和应用程序。

    8 天前

相关推荐

    暂无文章