运行 GraphQL 的 WebSockets 的教学

阅读时长 5 分钟读完

GraphQL 是一种用于 API 的查询语言,它可以有效地减少前端与后端的通信,并提高数据查询与传输的效率。而 WebSockets 则是一种支持双向通信的协议,它可以让前端与后端之间实现实时数据更新。

本篇文章将介绍如何在前端中运行 GraphQL 的 WebSockets,为开发者提供详细的技术学习和指导意义。

准备工作

在使用 GraphQL 的 WebSockets 之前,需要安装依赖项和配置 GraphQL 服务器。具体步骤如下:

  1. 在项目中安装 graphql-subscriptionssubscriptions-transport-ws
  1. 配置 GraphQL 服务器以支持 WebSocket:
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ - -------- --------- - ---- ----------
------ - ------------ - ---- -------
------ ------- ---- ----------
------ - ----------- - ---- ------------------
------ ------ ---- -----------

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

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

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

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

实现 GraphQL 的 WebSockets

在配置好 GraphQL 服务器后,下一步是实现 GraphQL 的 WebSockets。在前端中使用的示例代码如下:

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

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

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

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

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

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

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

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

通过 useSubscription() 钩子可以实现订阅 GraphQL 的 WebSockets,当服务器更新数据时,前端会获取到最新的数据。上述代码中,通过 SubscriptionClientWebSocketLink 可以创建一个 WebSocket 连接,然后通过 gql 函数来定义 GraphQL 请求。

useEffect() 钩子中,监听到数据更新后,使用 setMessages() 函数更新组件的状态,并渲染最新的数据。

指导意义

本篇文章介绍了如何在前端中运行 GraphQL 的 WebSockets,为开发者提供了详细的技术学习和指导意义。通过本文的阅读,读者可以学习如何配置 GraphQL 服务器以支持 WebSocket,并在前端中使用钩子来订阅 GraphQL 的 WebSockets。这种实时更新数据的方式,可以有效地提高应用的响应速度和用户体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67971da5504e4ea9bde23eb1

纠错
反馈