GraphQL 是一种用于构建 API 的查询语言和运行时环境。它可以帮助前端开发人员更有效地获取和管理数据。除了查询和变更，GraphQL 还支持订阅，这是一种用于实时数据传输的机制。本文将比较两种常见的 GraphQL 实时数据传输方案：WebSocket 和 Server-Sent Events。
WebSocket
WebSocket 是一种基于 TCP 的协议，它允许在客户端和服务器之间进行双向通信。在 GraphQL 中，WebSocket 可以用于实现订阅功能。客户端可以向服务器发出订阅请求，并随时接收服务器推送的更新。
优点
- 双向通信：WebSocket 允许客户端和服务器之间进行双向通信，这意味着客户端可以随时接收服务器的更新。
- 实时性：由于 WebSocket 可以在客户端和服务器之间实时传输数据，因此可以实现实时更新，而不需要客户端轮询服务器。
- 可扩展性：WebSocket 可以轻松扩展，因为它支持多种协议和数据格式。
缺点
- 复杂性：WebSocket 协议比较复杂，需要额外的开发工作。
- 安全性：WebSocket 不支持跨域请求，需要特殊的安全措施来确保数据安全。
示例代码
客户端：
-- -------------------- ---- -------
----- ------ - --- -----------------------------------------
------------- - -- -- -
----------------------------
----- ------------
-------- -
------ -
------------ -
------- -
--
-----
-------
-
-
-
-
----
-
---------------- - ------- -- -
----- ---- - -----------------------
---------------------------------------
-服务器：
-- -------------------- ---- -------
----- - ------------ - - ----------------
----- - -------- --------- - - -------------------
----- - ------------------ - - --------------------------------------
----- - -------------------- - - -------------------------
----- -------- - -
---- ---- -
--- ---
------ -------
-------- -------
-
---- ----- -
------ --------
-
---- ------------ -
-------- -----
-
--
----- ----- - -
- --- ---- ------ ----- --- -------- -------- -- --
- --- ---- ------ ----- --- -------- -------- -- --
--
----- --------- - -
------ -
------ -- -- ------
--
------------- -
-------- -
---------- -- -- ---------------------------------
--
--
--
----- ------ - ---------------------- --------- --------- ---
----- ------ - ---------------------- --------- -- -
------------------------
---------------
---
------------------- -- -- -
------------------- -- ------- -- ------------------------
---
----- -- - --- -------------------
-
--------
----------
-------
--
-
-------
----- -----------
-
--
-------------- -- -
-------------------------- - -------- ------------------------------ - -------------- ---
-- ------Server-Sent Events
Server-Sent Events（SSE）是一种基于 HTTP 的协议，它允许服务器向客户端发送事件流。在 GraphQL 中，SSE 可以用于实现订阅功能。客户端可以通过监听服务器推送的事件流来接收更新。
优点
- 简单性：SSE 是一种基于 HTTP 的协议，比 WebSocket 简单易用。
- 安全性：SSE 支持跨域请求，并且可以通过 HTTPS 进行加密传输，因此更加安全。
缺点
- 单向通信：SSE 只允许服务器向客户端发送数据，客户端无法向服务器发送请求。
- 不支持二进制数据：SSE 只支持文本数据，无法传输二进制数据。
示例代码
客户端：
const eventSource = new EventSource('http://localhost:4000/graphql');
eventSource.addEventListener('newPost', (event) => {
const data = JSON.parse(event.data);
console.log(data.payload.data.newPost);
});服务器：
-- -------------------- ---- -------
----- - ------------ - - ----------------
----- - -------- --------- - - -------------------
----- - ------------------ - - ---------------------------------------
----- - -------------------- - - -------------------------
----- -------- - -
---- ---- -
--- ---
------ -------
-------- -------
-
---- ----- -
------ --------
-
---- ------------ -
-------- -----
-
--
----- ----- - -
- --- ---- ------ ----- --- -------- -------- -- --
- --- ---- ------ ----- --- -------- -------- -- --
--
----- --------- - -
------ -
------ -- -- ------
--
------------- -
-------- -
---------- -- -- ---------------------------------
--
--
--
----- ------ - ---------------------- --------- --------- ---
----- ------ - ---------------------- --------- -- -
------------------------
---------------
---
------------------- -- -- -
------------------- -- ------- -- ------------------------
---
----- --- - --- -------------------
-
--------
----------
-------
--
-
-------
----- -----------
-
--
-------------- -- -
-------------------------- - -------- ------------------------------ - -------------- ---
-- ------结论
WebSocket 和 Server-Sent Events 都可以用于实现 GraphQL 的订阅功能。WebSocket 支持双向通信和实时性，但比较复杂，需要额外的开发工作。Server-Sent Events 简单易用，支持跨域请求和安全传输，但只支持单向通信和文本数据。
在选择实时数据传输方案时，需要根据具体的需求和场景进行选择。如果需要双向通信和实时性，可以选择 WebSocket；如果需要简单易用和安全传输，可以选择 Server-Sent Events。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760f40003c3aa6a56076b49