服务器发送事件（Server-Sent Events）是一种 HTTP 技术，它可以在客户端和服务器之间进行实时的双向通信。客户端可以从服务器实时接收数据，而不是通过轮询或长轮询等方式去获取。这种技术在前端开发中非常常见，它可以用来实现推送通知、聊天室、实时看板等高级功能。
Server-Sent Events 如何工作
在向客户端发送数据时，服务器使用 text/event-stream 格式。这个格式支持多个事件流，每个事件流都有自己的事件标识符和数据。客户端可以通过新建一个 EventSource 对象来监听服务器端的事件流，当有新的事件流到达时，就会触发 EventSource 对象的 onmessage 事件，从而实现实时通信。
实现 Server-Sent Events 的代码示例
下面是一个使用 Node.js 和 Express 实现 Server-Sent Events 的代码示例。
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
---------------------------------
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
--
--- - - -
-------------- -- -
-------------- --------
---------------- ------ ----- ----- ----------------------------------
---
-- -----
--
---------------- -- -- -
-------------------- --- --------- -- ---- -------
--上面的代码中，我们使用 Express 框架创建一个服务器，然后在 /stream 路由上发送数据。我们设置了 Content-Type 为 text/event-stream，这是 Server-Sent Events 所需要的格式。
创建的事件流每秒会发送一次数据，数据中包含了一个事件标识符 id 和实时时间。当我们在浏览器端监听 /stream 路由时，它就可以收到这些数据并在控制台输出。下面是一个监听 /stream 路由的代码示例：
var source = new EventSource('/stream');
source.onmessage = function(event) {
console.log(event.data);
};我们新建了一个 EventSource 对象并监听 /stream 路由，当服务器发送数据时，我们就会收到这些数据并输出到控制台。
Server-Sent Events 的应用
例如使用 Server-Sent Events 实现一个实时看板。我们可以编写一个类似于如下的代码，不断地将系统的实时数据发送到客户端，以便实时查看当前系统的状况。
let i = 0
setInterval(() => {
res.write(`id: ${i}\n`)
res.write(`data: Server Time: ${new Date().toLocaleTimeString()}\n\n`)
i++
}, 1000)Server-Sent Events 也能用于实时的聊天室。当一个用户发送新消息时，服务器可以实时把这些消息发布给其他用户，这样其他用户就可以实时地看到新消息。这些在传统的 HTTP 请求中很难实现。Server-Sent Events 利用 HTTP 的长连接机制，在不额外发送请求的情况下实现实时通信，不会占用过多的网络资源。
总结
Server-Sent Events 是一种非常实用的技术，它可以在客户端和服务器端之间实现实时通信，而不需要像传统的 HTTP 请求那样频繁地发送请求。它的应用场景非常广泛，例如实时看板、聊天室和实时数据展示等。在实际的前端开发过程中，我们可以根据业务需求来选择合适的实时通信方式，以便提高页面的响应速度和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649805eb48841e9894516486