在现代互联网应用中，实时性是一种非常重要的需求。无论是在在线聊天、在线游戏还是在线视频等应用场景下，实时性都是必须考虑的因素。而 WebSocket 技术是实现该需求的一种十分优秀的解决方案。但是，由于它需要与服务端建立长连接，在某些场景下可能产生一定的资源开销。于此同时，Server-Sent Events (SSE) 技术也可以应对实时性的需求，且并不需要长连接。
什么是 Server-Sent Events
Server-Sent Events （SSE）是一种基于 HTTP 协议的推送技术。使用 SSE 技术，服务端可以向客户端单向发送消息。客户端通过建立一个 HTTP 连接来订阅服务器端发送的事件。一旦有事件发生，服务端就会将数据以文本流的形式发送给客户端。SSE 支持的数据类型有文本和二进制数据。客户端可以通过监听消息事件来接收服务器端发送的消息。
如何使用 SSE
在客户端使用 SSE 技术时，需要通过 JavaScript 代码来建立 SSE 连接。SSE 连接建立后，客户端可以订阅服务器端发送的事件以及取消事件的订阅。以下是建立 SSE 连接代码的示例：
const source = new EventSource('/api/sse')
source.addEventListener('message', event => {
console.log(event.data)
})上述代码中，EventSource 对象的构造函数接收一个表示 SSE 服务的 URL，浏览器会自动向该 URL 建立一个 SSE 连接。使用 source.addEventListener() 方法可以监听服务器端发送的消息事件，通过 event.data 可以获取到服务器端发送的消息数据。
在服务器端，需要通过设置特定的响应头（Content-Type 为 text/event-stream）来告知浏览器该响应流是 SSE 流。以下是一个使用 Node.js 的 Express 框架搭建 SSE 服务的示例代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
----- ---- - -
-------- ------ ------
-
---------------- -----------------------------
-- -----
--
---------------- -- -- -
------------------- ------------
--上述代码中，通过 writeHead 方法设置响应头，然后使用 setInterval 定时向客户端发送消息。消息数据必须以 data: 开头，并且每个消息之间都必须用一个空行（\n\n）隔开。
SSE 与 WebSocket 的比较
SSE 和 WebSocket 都是实现实时性通信的技术，本质上从数据传输的角度来看，SSE 和 WebSocket 都是以单向的方式传输数据。
WebSocket 与 SSE 相比，最大的区别在于 WebSocket 可以建立双向的全双工通信，而 SSE 只能以单向的方式向客户端传输数据。当应用场景需要服务器端向客户端发送大量的数据时，建议使用 SSE。而当应用场景需要双向通信时，则需要使用 WebSocket。
此外，WebSocket 的连接建立需要较大开销，需要进行握手等复杂过程。而 SSE 仅仅只需要通过 HTTP 头信息以及一些简单的协议来建立连接，开销相对较小。
总结
本文介绍了 SSE 技术以及如何在客户端与服务器端使用 SSE 技术实现实时性通信。同时，也比较了 SSE 和 WebSocket 的异同。相信读者在使用实时性通信时，根据自己的需求可以合理地选择 SSE 或 WebSocket 进行实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1609ff6b2d6eab3b37f93