在现代的 Web 应用中，实时通信已经成为了必需的功能之一。而实现实时通信时，往往会涉及到使用 WebSocket 等技术来建立长连接，以及使用推送服务（如 Pusher、Firebase 等）来实时推送消息。但是，在某些情况下，使用这些技术可能会带来额外的成本和复杂性。那么，在这种情况下，如何实现一个简单、高效的实时消息推送方案呢？答案就是使用 GraphQL 中的 Subscription。
GraphQL Subscription 是什么？
GraphQL 是一种用于 API 的查询语言和运行时。通过定义类型和字段的方式，它可以准确地描述 API 中可用的数据，并允许客户端仅请求所需的数据。而 GraphQL Subscription 则是建立在 GraphQL 之上的另一种 API 类型，它可以实现客户端与服务端之间的实时通信。在 GraphQL Subscription 中，客户端可以订阅某些事件，当事件发生时，服务端会实时推送相关的数据给订阅的客户端。
如何使用 GraphQL Subscription 实现实时消息推送？
在使用 GraphQL Subscription 实现实时消息推送时，我们需要对 GraphQL Schema 进行适当的修改，以支持 Subscription 类型。假设我们有一个简单的消息列表应用，它的数据结构如下：
-- -------------------- ---- ------- ---- ------- - --- --- ----- ------- ---------- ------- - ---- ----- - --------- --------- -
现在，我们需要添加一个名为 newMessage 的 Subscribe 类型，以便在服务端有新消息时，实时推送给客户端：
type Subscription {
newMessage: Message
}然后，在服务端实现 newMessage 的订阅处理逻辑。当有新消息时，服务端会向所有订阅了 newMessage 的客户端实时推送消息数据：
-- -------------------- ---- -------
----- ------ - --- ---------
----- --------- - -
------------- -
----------- -
---------- -- -- --------------------------------------
--
--
--
-- --------- -- --- ---- ---- - --- ------- -- -------
----------------------------- - ----------- ---------- ---最后，在客户端，我们可以使用 Apollo Client 提供的 subscribeToMore 函数来订阅 newMessage 事件。在订阅成功后，每当服务端有新消息时，客户端自动收到推送，无需手动轮询。
-- -------------------- ---- -------
----- ------------ - ----
----- -
-------- -
--
----
---------
-
-
--
----- ------------------------ - ----
------------ -
---------- -
--
----
---------
-
-
--
---
------------------- -
----------------------------
--------- -------------------------
------------ ------ - ---------------- -- -- -
-- ------------------------ ------ -----
----- ---------- - ---------------------------------
------ -
--------- ------------------ ------------
--
--
---
-
---总结
使用 GraphQL Subscription 可以轻松实现高效的实时消息推送，大大减少实现实时通信时的成本和复杂性。在实践中，我们不仅可以使用它来实现消息推送，还可以用它来实现实时地更新 UI 等功能。
示例代码：https://github.com/apjamesyang/graphql-subscription-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485a6d948841e98944677b0