什么是 SSE
SSE (Server-Sent Events) 是一种浏览器与服务器之间实现实时通信的技术。与 Websocket 相比，SSE 的优点在于不需要建立一个全双工的连接，服务器可以在需要的时候向客户端推送消息，而客户端仅仅是一个单向的HTTP连接。除此之外，SSE 可以使用 EventSource API 直接在浏览器中使用。
连接 SSE
要连接 SSE，我们需要创建一个新的 EventSource 对象。EventSource 对象需要一个参数，即 SSE 服务器的 URL，SSE 服务器则需要支持 SSE（即发送 text/event-stream 类型的数据）。例如：
const source = new EventSource('/sse');后端如何发送 SSE
SSE 服务器通过发送 text/event-stream 类型的数据来向客户端推送消息。例如，在 Node.js 中可以通过以下方式发送 SSE 数据：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('event: hello\n');
res.write('data: {"msg": "Hello, SSE!"}\n\n');这里的 event 表示事件类型，这个可以由开发者自定义。data 节点表示需要传输的数据。
客户端如何接收 SSE
客户端通过监听 EventSource 对象的 message 事件来接收 SSE 数据。例如：
source.addEventListener('hello', function(event) {
console.log(event.data); // 输出：{"msg": "Hello, SSE!"}
});这里的 hello 就是后端发送的事件类型，需要与后端约定好。
实现客户端与后端之间自定义事件类型的传输
为了实现自定义事件类型的传输，我们需要将事件类型和数据打包发送到客户端，然后客户端解析出事件类型和数据。例如：
res.write('event: custom\n');
res.write('data: {"type": "foo", "data": {"foo": "bar"}}\n\n');这里的 custom 事件类型和 foo 数据都是开发者自定义的。
客户端接收 SSE 数据后，需要解析出事件类型和数据，例如：
source.addEventListener('custom', function(event) {
const data = JSON.parse(event.data);
console.log(data.type); // 输出：foo
console.log(data.data.foo); // 输出：bar
});这里将 SSE 数据中的 data 解析为 JSON 格式，然后通过 type 属性和 data 属性得到了事件类型和数据，开发者可以根据这些数据来执行相应的操作。
示例代码
后端 Node.js 代码：
-- -------------------- ---- -------
----- ---- - ----------------
------------------------------- ---- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ----------
---------------- ------- ------- -------------
----------------- -----------
---------------- -------- ------ ------- ------- --------------
---------------------- -
----------------- ----------
---------------- ------- ------- -------------
-- ------
-
----------------前端 JavaScript 代码：
-- -------------------- ---- ------- ----- ------ - --- -------------------- -------------------------------- --------------- - ------------------------ --- --------------------------------- --------------- - ----- ---- - ----------------------- ----------------------- --------------------------- ---
总结
SSE 技术可以实现浏览器与服务器之间的实时通信，而且与 Websocket 技术相比，SSE 无需建立全双工连接，更加轻量级。在 SSE 中，开发者可以自定义事件类型和事件数据，在客户端接收到 SSE 数据后，解析出事件类型和数据，然后进行相应的操作。该技术应用场景广泛，例如在线聊天室、实时推送等场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479039a968c7c53b05184ff