GraphQL 是一种用于 API 的查询语言,它可以有效地减少前端与后端的通信,并提高数据查询与传输的效率。而 WebSockets 则是一种支持双向通信的协议,它可以让前端与后端之间实现实时数据更新。
本篇文章将介绍如何在前端中运行 GraphQL 的 WebSockets,为开发者提供详细的技术学习和指导意义。
准备工作
在使用 GraphQL 的 WebSockets 之前,需要安装依赖项和配置 GraphQL 服务器。具体步骤如下:
- 在项目中安装
graphql-subscriptions
和subscriptions-transport-ws
:
npm install graphql-subscriptions subscriptions-transport-ws --save
- 配置 GraphQL 服务器以支持 WebSocket:
-- -------------------- ---- ------- ------ - ------------------ - ---- ----------------------------- ------ - -------- --------- - ---- ---------- ------ - ------------ - ---- ------- ------ ------- ---- ---------- ------ - ----------- - ---- ------------------ ------ ------ ---- ----------- ----- --- - ---------- ----- ------ - ------------------ -------- ----------- ------------- ------- --------- ----- --- -- ------------------- -- -- - --- ------------------- - -------- ---------- ------- -- - ------- ----- ----------------- -- -- ---
实现 GraphQL 的 WebSockets
在配置好 GraphQL 服务器后,下一步是实现 GraphQL 的 WebSockets。在前端中使用的示例代码如下:
-- -------------------- ---- ------- ------ ------ - ---------- -------- - ---- -------- ------ - --------------- - ---- ----------------- ------ - ------------- - ---- ------------------------- ------ - ------------------ - ---- ----------------------------- ------ - --- - ---- ----------------- ----- -------- - --- ------------------------------------------------------- - ---------- ----- --- ----- ------------- - --- ------------------------ ----- ------------------------ - ---- ------------ - ---------- - ------- - - -- -------- ----- - ----- - ---- - - ------------------------------------------ ----- ---------- ------------ - ------------- ------------ -- - -- ------ - ------------------------- ------- - -- -------- ------ - ----- ----------------------- ------ -- - -- -------------------------------------------- --- ------ -- - ------ ------- ----
通过 useSubscription()
钩子可以实现订阅 GraphQL 的 WebSockets,当服务器更新数据时,前端会获取到最新的数据。上述代码中,通过 SubscriptionClient
和 WebSocketLink
可以创建一个 WebSocket 连接,然后通过 gql
函数来定义 GraphQL 请求。
在 useEffect()
钩子中,监听到数据更新后,使用 setMessages()
函数更新组件的状态,并渲染最新的数据。
指导意义
本篇文章介绍了如何在前端中运行 GraphQL 的 WebSockets,为开发者提供了详细的技术学习和指导意义。通过本文的阅读,读者可以学习如何配置 GraphQL 服务器以支持 WebSocket,并在前端中使用钩子来订阅 GraphQL 的 WebSockets。这种实时更新数据的方式,可以有效地提高应用的响应速度和用户体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67971da5504e4ea9bde23eb1