随着前端页面的复杂度不断增加，后台向前端推送大量数据已经成为了常态。而这种大量的数据推送往往会导致前端页面的卡顿，影响用户的体验。随着新技术不断的涌现，SSE （Server-Sent Event）成为了解决这个问题的一个良好选择。本文会详细讲解 SSE 的原理、应用场景及如何实现 SSE 以解决大量数据推送导致的性能问题。
SSE 的原理
SSE 翻译成中文就是服务端推送事件，顾名思义就是指服务端主动推送数据到前端。与传统的前端向后端请求数据不同，SSE 是由后端主动向前端推送信息。这种方式并不会对前端造成请求上的负担，只是让前端页面变成了被动接收者，而不是主动发起请求。
具体来说，SSE 是基于一个单向持久连接，也就是说，一旦连接建立，后端就可以随时向前端发送数据。前端通过 EventSource 对象作为连接接收来自服务器的事件。服务器通过 HTTP 的 Content-Type：text/event-stream，告知浏览器这是一个 SSE 推送的数据。浏览器接收到这个数据后，会自动将数据加入到相应的事件队列中，由 JavaScript 实时接收并处理。
SSE 的格式如下：
event: ping
data: Ping at 2021/07/21
event: info
data: {"time":"2021/07/21 16:10:10","msg":"System is running..."}- 每个 SSE 消息都以两个换行符结尾，即“\n\n”。
- 每个 SSE 消息由特殊的事件 ID 和数据构成。
- 事件 ID 可以省略，省略后默认为“message”。
- 每个 SSE 消息都以“data: ”开头。
以上是 SSE 的基本原理。
应用场景
SSE 的应用非常广泛，比如在线聊天、实时监控等。下面给出几个具体的场景：
在线聊天
在线聊天是 SSE 应用最为典型的场景之一。通过 SSE，服务端可以实时推送聊天信息给前端页面，无需前端反复向服务端请求数据。这种方式大大降低了前后端之间的通信量，也提升了聊天体验的实时性。
实时监控
在企业中，实时监控对于业务的稳定运行很关键。SSE 可以让后端将监控数据实时传递到前端，前端可以实时的展示在页面上，管理员可以实时监控系统各种信息，从而使得运维变得更为便捷。
股票行情
股票行情数据是不断变化的，前端传统的方式需要不断的轮询来获取最新行情，这是一种非常不友好的方式，轮询造成了服务器负载不必要的增加，同时前后端之间的流量也会变得非常大。而 SSE 则可以实现推送实时的股票行情信息，让前端页面更加高效地展示相应的数据。
如何实现 SSE？
SSE 的实现并不困难，我们可以用 Node.js 来演示一下这个过程。下面我们用 Node.js 来搭建一个 SSE 推送的服务端。
首先，我们需要引入事件发射器和 HTTP 服务模块：
const { EventEmitter } = require('events')
const http = require('http')创建一个 HTTP 服务，并监听 8999 端口：
const server = http.createServer()
server.listen(8999, () => {
console.log('server is running at port:', 8999)
})在 HTTP 服务中监听 /event 接口，很明显，我们使用 SSE，所以响应的 Content-Type 为 text/event-stream：
-- -------------------- ---- -------
----- ------- - --- --------------
-------------------- ----- ---- -- -
-- -------- --- --------- -
------------------ -
--------------- ------------------- ---------------
---------------- -----------
----------- -------------
--
--------------- -- -- -
------------------- ------ ------------
-------------------- --------
--
------------------- --------
-------- ------------ -
---------------- ------------
-
-
--- emitter 是一个事件发射器，可以向客户端推送消息。
- res.writeHead 设置了 Content-Type 为 text/event-stream，并开启了 keep-alive，保证了连接一直处于打开状态，可以不断的向客户端推送消息。
- res.on('close', ...) 意味着当客户端关闭连接时，后端会收到该事件，并取消事件监听。这样可以保证在不需要时及时关闭推送流，防止资源泄漏。
- emitter.on('hello', sendMsg) 在开始 SSE 时监听 hello 事件，当有该事件时向客户端发送消息。
- function sendMsg(msg) 定义了如何向客户端推送消息，这里是将消息 msg 作为 SSE 的 data 推送给客户端。
最后，我们来给客户端发送消息：
setTimeout(() => {
emitter.emit('hello', 'hello')
}, 1000 * 5)在代码中使用 setTimeout 模拟一段时间后向客户端推送一个 hello 的事件。
完整的代码如下：
-- -------------------- ---- -------
----- - ------------ - - -----------------
----- ---- - ---------------
----- ------ - -------------------
------------------- -- -- -
------------------- -- ------- -- ------- -----
--
----- ------- - --- --------------
-------------------- ----- ---- -- -
-- -------- --- --------- -
------------------ -
--------------- ------------------- ---------------
---------------- -----------
----------- -------------
--
--------------- -- -- -
------------------- ------ ------------
-------------------- --------
--
------------------- --------
-------- ------------ -
---------------- ------------
-
-
--
------------- -- -
--------------------- --------
-- ---- - --我们启动服务端后就可以请求 http://localhost:8999/event 来观察效果了。我们可以用 Chrome 的控制台来检查一下。
打开控制台，进入 Network 选项卡，并尝试请求 http://localhost:8999/event。成功连接后，在 Response Headers 里面可以看到 Content-Type 的确是 text/event-stream；在 Response 里面也可以看到服务端返回了 SSE 格式的数据。
这就是 SSE 的实现过程，是不是很简单呢。
总结
SSE 提供了一种服务端推送数据的方式，对于实时更新数据的场景，它能够带来非常显著的性能提升。SSE 的实现也不难，只需要遵循 SSE 的协议来实现服务端和客户端的通信即可。
因此，在实际开发中，应用 SSE 来实现实时数据的推送，是一种非常高效的方式，也为提高用户体验带来了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483ec7148841e9894323383