在现代的网站开发中，实时数据展示是非常常见的需求。例如，一个在线聊天室需要实时地展示用户发送的消息，一个股票交易平台需要实时地展示股票价格变化等等。在这些场景中，传统的轮询方式已经无法满足需求，因为它会浪费大量的网络带宽和服务器资源。而 Server-Sent Events（SSE）则是一种更加高效的实现方式。
什么是 Server-Sent Events
Server-Sent Events 是一种浏览器和服务器之间实现实时通信的技术。它允许服务器向浏览器单向地发送数据，而不需要浏览器不断地向服务器发起请求。这种方式相对于 WebSocket 来说更加轻量级，因为它只需要使用 HTTP 协议，而不需要使用专门的协议。
在 SSE 中，服务器会发送一系列的事件（event），每个事件都由一个事件名称和一个数据字段组成。浏览器可以通过监听这些事件来获取服务器发送的数据。同时，SSE 还支持一些特殊的事件，例如 keep-alive 事件和注释事件。
如何使用 Server-Sent Events
使用 Server-Sent Events 非常简单。首先，在服务器端需要设置一个 HTTP 头部，告诉浏览器这是一个 SSE 连接：
Content-Type: text/event-stream Cache-Control: no-cache
然后，服务器就可以向浏览器发送数据了。数据需要按照以下格式发送：
event: <event-name> data: <data>
其中，<event-name> 是事件名称，<data> 是事件数据。注意，每个事件需要以两个换行符结尾。
在浏览器端，我们可以使用 JavaScript 来监听这些事件：
const source = new EventSource('/sse');
source.addEventListener('message', function(event) {
const data = JSON.parse(event.data);
console.log(data);
});在这个例子中，我们使用 EventSource 类来创建一个 SSE 连接，并且监听 message 事件。当服务器发送一个事件时，浏览器会触发 message 事件，并且我们可以获取到事件数据并进行处理。
SSE 的应用场景
SSE 可以在很多场景中使用，例如：
- 实时聊天室：服务器可以将用户发送的消息作为一个事件发送给浏览器，从而实现实时聊天的功能。
- 股票交易平台：服务器可以将股票价格变化作为一个事件发送给浏览器，从而实时展示股票价格变化。
- 实时数据监控：服务器可以将服务器运行状态作为一个事件发送给浏览器，从而实时监控服务器运行情况。
总结
Server-Sent Events 是一种轻量级的实时通信技术，可以在很多场景中使用。它相对于传统的轮询方式更加高效，可以减少网络带宽和服务器资源的浪费。在实现实时数据展示的需求时，我们可以考虑使用 SSE 来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fee3095b1f8cacd89a143