随着现代 Web 应用的发展，前端与后端之间需要进行实时通信的场景越来越多，其中一种实现方式是使用长连接（Long Polling）。长连接是指客户端与服务器建立一个长时间的连接，当服务器有数据返回时，就立刻将数据推送给客户端，在一定时间内保持连接，再由客户端主动断开连接。
虽然长连接可以实现实时通信，但是当用户访问量较大时，会对后端 Redis 服务器产生巨大的负担，造成性能问题。SSE 即 Server-sent Events，是一种与长连接类似的技术，但是能够有效地减轻后端负担。
SSE 原理
SSE 是一种 HTML5 规范，允许服务器发送事件流（Event Stream）到客户端，利用 HTTP 的标准请求-响应方式，与服务器建立单向连接，再由浏览器进行事件监听。SSE 的建立过程如下：
- 客户端发起一个 HTTP 连接到服务器，请求订阅某个事件流。
- 服务器响应并建立连接，向客户端发送数据，并在 HTTP 响应头中设定 "Content-Type: text/event-stream"。
- 客户端通过 EventSource 对象监听事件流，处理服务器发送的数据。
在服务器端，我们可以使用 node.js 框架的 express 和 SSE 模块来实现 SSE：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
----- ------- - --- -------------
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- -- --- ---
---------------------- -----
---
-- ------- --- ---
--------------
------ ----------
----- --- ------
---客户端使用对应的 EventSource 对象进行监听，如下：
const source = new EventSource('/events');
source.addEventListener('myevent', (event) => {
console.log(event.data);
});SSE 的优势
相较于长连接，SSE 的优势在于：
- 协议独立。SSE 使用类似于 HTTP 的协议，因此不需要额外的协议库。
- 简单易用。使用 SSE 只需要浏览器端的 JavaScript 代码和服务器端的 SSE 实现，相较于 WebSocket 更易于使用和实现。
- 减轻后端负担。SSE 建立的是单向连接，不需要客户端发送大量数据，减轻后端的压力。
相较于 WebSocket，SSE 协议不提供双向通信，只能客户端订阅服务器端事件流，因此适用于一些不需要建立实时双向通信的场景。
结论
基于 SSE 技术的实时通信方式不仅适用于个别 Web 应用场景，通过 SSE 的单向连接，SSE 可以有效地解决多长连接对后端 Redis 带来的负担问题，从而优化 Web 应用的性能表现。
如果需要进行高并发或者实时双向通信，可以考虑使用 WebSocket 等技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671983c2ad1e889fe2315f6e