在前端开发中，常常需要与后台进行实时数据通信。对于需要对数据进行实时处理的场景，WebSocket 是当之无愧的首选方案，但是 WebSocket 也存在一些问题，如跨域请求需要服务器端特殊处理、需要保持心跳等等。
在这种情况下，使用 Server-Sent Events(SSE) 可以很好地解决这些问题，同时又能实现数据的实时推送。
什么是 SSE
SSE 是一种服务器向客户端推送数据的技术，它是通过一个持久化的 HTTP 连接，提供实时的数据传输。SSE 使用文本协议来发送数据，每次只发送一条消息。
SSE 和 WebSocket 相似，但是 SSE 只支持服务器向客户端进行单向推送，而 WebSocket 支持双向推送。
SSE 的优势
- 支持跨域请求
SSE 可以使用普通的 AJAX 发起跨域请求，并且不需要对服务器的响应做出特殊的处理。而 WebSocket 的跨域请求需要服务器端特殊处理。
- 保持连接并且自动重连
SSE 会维护一个长时间的连接，并且会自动进行重连。这就避免了 WebSocket 必须自己维护心跳的情况。
- 不需要专用服务器端实现
由于 SSE 是基于 HTTP 的，因此在服务器端无需使用专用的实现。
使用 SSE
客户端代码
在客户端，可以使用 EventSource API 来建立 SSE 连接：
const source = new EventSource('http://localhost:3000/sse');
source.onmessage = function (event) {
console.log(event.data);
};通过创建 EventSource 对象，并指定服务器端的地址，就可以建立一个 SSE 连接。当服务器端有数据推送时，就会触发 onmessage 回调函数，并且可以通过 event.data 属性获取到推送的数据。
服务器端代码
在服务器端，对 SSE 的支持主要体现在以下两个 HTTP 头：
Content-Type: text/event-stream：表示这是一个 SSE 的响应。Cache-Control: no-cache：表示不缓存。
下面是一个使用 Node.js 的 SSE 服务器端的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
-------------------------- ----- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
--- ----- - --
-------------- -- -
-- --------
----- ---- - ------ ------------------ ------ ------- -------
----------------
-- ------
----------------在这个示例中，我们创建了一个 HTTP 服务器，并且在创建响应时，通过设置 HTTP 头告诉浏览器这是一个 SSE 的响应。然后我们设置了一个计时器，每秒钟向客户端推送一条消息。
总结
在实际项目开发中，我们需要根据实际需求选择合适的技术方案。在一些需要实时推送数据、跨域请求、不需要双向推送的场景下，使用 SSE 会比使用 WebSocket 更加简单、更加方便。
同时，我们还需要注意 SSE 在浏览器兼容性上的问题。虽然目前 SSE 已经被所有现代浏览器都支持，但是对于一些较老的浏览器可能不支持 SSE。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd7a9395b1f8cacdcdc04f