什么是 SSE 通信协议
SSE（Server-Sent Events）即服务器推送事件，是一种浏览器与服务器之间的单向通信协议，用于实时地传递服务器推送的事件数据。与 WebSocket 不同的是，SSE 只能从服务器主动向浏览器推送数据，而无法由浏览器向服务器发送数据。SSE 可以使用纯 JavaScript 进行实现，因此成本较低且易于使用，是实现实时数据推送的一种良好方式。
如何使用 SSE 通信协议
使用 SSE 协议，我们需要建立一个 HTTP 连接。客户端可以通过创建一个新的 EventSource 对象并向其提供 URL，来建立与服务器的 SSE 连接。如下所示：
let source = new EventSource('/events');
source.onmessage = function(event) {
console.log(event.data);
};其中，/events 是客户端与服务器建立 SSE 连接的 URL。EventSource 对象通过 onmessage 事件监听服务器的推送数据，并在接收到数据时执行相应的回调函数。
服务器可以使用 Node.js 等后台语言进行 SSE 的实现，例如 Node.js 的 http 模块提供了 SSE 的 API，主要包括 response.writeHead()、response.write() 和 response.end() 等方法。
下面是一个简单的 Node.js 服务器 SSE 实现的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
-
----------------以上代码中，setInterval 定时器每隔一秒向客户端发送当前时间戳，并通过 res.write() 方法向客户端发送数据。在发送数据的同时，还需要设置 HTTP 响应头信息，如 'Content-Type': 'text/event-stream' 声明响应类型为 SSE，以及 'Cache-Control': 'no-cache' 等参数，以避免缓存。
SSE 的优缺点
使用 SSE 协议可以实现低延迟、高效率的实时数据推送，因此广泛应用于 Web 应用程序和移动应用程序等领域。它具有以下优点：
- 轻量级：SSE 使用 HTTP 协议，不需要额外的协议栈，因此可以减少通信时的网络负载。
- 简单易用：SSE 可以使用纯 JavaScript 进行实现，不需要特殊的客户端库，因此易于开发和维护。
- 可靠性高：SSE 使用 HTTP 连接保持长连接，且每次通信都由服务器主动推送数据，因此具有较高的可靠性和稳定性。
- 支持跨域：SSE 可以跨域通信，因此具有较强的适应性和可用性。
但是，SSE 协议也存在以下缺点：
- 不支持双向通信：SSE 是一种单向通信协议，无法支持浏览器向服务器发送数据的双向通信，因此不适用于一些需要双向通信的场景。
- 仅支持文本数据：SSE 只支持文本数据的传输，不支持二进制数据的传输，因此无法满足一些需要传输大量二进制数据的应用场景。
示例代码
以下是一个简单的 SSE 示例代码，使用 Node.js 模拟客户端和服务器：
服务器端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- ----- - --
-------------- -- -
---------------- -----------------
-- ------
- ---- -
------------------ ---------------- --------------
---------
--------- -----
------
------
------- ---------
--------
--- ------ - --- -----------------------
---------------- - --------------- -
----------------------- -- ----- - ---------- - -------
--
---------
-------
-------
---
-
----------------客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
------- ---------
--------
--- ------ - --- -----------------------
---------------- - --------------- -
----------------------- -- ----- - ---------- - -------
--
---------
-------
-------在浏览器中打开 http://localhost:3000 后，页面输出 0、1、2…… 等数字。
总结
SSE 通信协议提供了一种低延迟、高效率的实时数据推送方案，对于一些需要向客户端实时传送数据的应用场景非常适用。它使用 HTTP 连接保持长连接，且支持跨域通信和纯 JavaScript 的实现，具有较高的可靠性和稳定性，但缺点是不能支持双向通信和二进制数据传输。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d31e43b5eee0b525aa48ee