SSE 实现方式简介
SSE，即服务器发送事件 (Server-Sent Events)，是一种服务器向客户端单向推送数据的技术。与传统的轮询方式相比，SSE 更加实时、高效、稳定，可以极大提升客户端与服务器之间的交互效率。
下面我们就来介绍一下 SSE 的实现方式。
- 与 WebSocket 的区别
首先，要明确 SSE 与 WebSocket 的区别。WebSocket 是一种双向通讯协议，而 SSE 只支持服务器向客户端单向推送数据。因此，SSE 可以看做是 WebSocket 的一个子集。
- 使用 EventSource 对象
SSE 的实现方式，主要是通过 EventSource 对象实现的。它是浏览器内置的对象，用于接收服务器推送的事件消息。
在客户端使用 EventSource 对象时，需要指定一个事件源 URL，用于接收服务器端的消息推送。这个 URL 必须是一个普通的 HTTP 链接，而不是 WebSocket 链接。在 JavaScript 代码中，可以这样创建一个 EventSource 对象：
const eventSource = new EventSource('/events');上面的代码中，/events 就是指定的事件源 URL。
- 服务器端推送消息
在服务器端，推送消息的方式有很多种。常用的有两种方式：
- 使用 HTTP 长连接：在客户端向服务器发起请求后，服务器不立即关闭连接，而是保持连接处于打开状态。当有消息需要推送到客户端时，就将消息发送到客户端，并通过响应头中的 Content-Type 字段标识为 text/event-stream 格式。客户端收到消息后，可以通过 onmessage 事件回调函数进行处理。
示例代码：
-- -------------------- ---- -------
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- --------------
-- ------
---上面的代码中，使用 Express 框架创建了一个路由，其中 /events 路径对应的处理函数实现了服务器推送消息的逻辑。本例中，服务器每隔 1 秒向客户端推送当前时间。
- 使用 WebSocket 连接：在使用 WebSocket 建立连接后，服务器可以直接向客户端发送消息。这时，客户端需要监听 message 事件来处理收到的消息。
示例代码：
const server = require('ws').Server;
const wss = new server({ port: 8080 });
wss.on('connection', (ws) => {
setInterval(() => {
ws.send(new Date());
}, 1000);
});上面的代码中，使用 ws 模块创建了一个 WebSocket 服务器，监听 8080 端口。在有客户端连接到服务器时，服务器会不断向客户端发送当前时间。
- 关闭 EventSource 对象
在使用 EventSource 对象的过程中，如果需要关闭连接，可以调用其 close 方法来实现：
eventSource.close();
同时要注意的是，如果 EventSource 对象发生错误，可以通过 onerror 事件回调函数来处理异常情况。
- 兼容性问题
虽然 SSE 是一种高效实时的技术，但是由于一些浏览器不支持或者支持缺陷，因此在实际开发中还需要注意兼容性问题。可以通过 Modernizr 等类似的库来检测浏览器是否支持 SSE。
总结
通过本文的介绍，相信大家已经了解了 SSE 的实现方式及其在实际开发中的应用。虽然 SSE 相对于 WebSocket 来说功能较为单一，但是在某些场景下仍然能够发挥优越的性能。同时，使用 SSE 还可以避免 JavaScript 对象的序列化和反序列化等问题，节省了服务器的性能开销。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f2f6fef6b2d6eab3c7da2a