在现代 web 应用程序中，实时数据更新非常重要。传统的轮询和长轮询虽然可以用于实时数据更新，但是它们都有缺陷。 Server-Sent Events（SSE）是一种新型的实时通信技术，可以解决这些缺陷。
什么是 Server-Sent Events
Server-Sent Events 是一种服务器端推送技术，可以让服务器端向客户端发送事件。 与传统的轮询和长轮询相比，它具有以下优点：
- 实现简单，基于标准的 HTTP 协议。
- 适用于实时通信和消息传递。
- 通过单个 HTTP 连接实现双向通信，可以节省网络资源和带宽。
- 可以处理大量并发连接。
- 在客户端断开连接后可以自动重连。
基本的 SSE 流程
使用 SSE 的基本流程如下：
客户端通过创建一个 EventSource 对象来建立与服务器的连接。
服务器端向客户端发送事件，客户端通过监听 onmessage 事件来接收这些事件。
服务器端可以使用 EventSource 对象的 write 函数向客户端发送数据。
如果客户端断开连接，服务器端会自动关闭 SSE 连接。
SSE 的浏览器支持
SSE 已经成为了 HTML5 标准之一，现在在新版浏览器中都有很好的支持。有些老浏览器不支持 SSE，但是可以通过使用 polyfill 来实现 SSE 功能。
SSE 的示例代码
下面是一个基本的 SSE 示例代码。在这个例子中，我们通过一个简单的 Node.js 服务器来发送事件，并通过客户端的 web 浏览器接收事件。我们将定期发送随机整数，当一个整数被发送时，它将在客户端的 HTML 中显示。
服务器端代码
// javascriptcn.com 代码示例
const http = require('http');
// 发送 SSE 给客户端函数
function sendSSE(res, id, data) {
res.write('id: ' + id + '\n');
res.write('data: ' + data + '\n\n');
}
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 定时向客户端发送事件
setInterval(() => {
sendSSE(res, Date.now(), Math.random());
}, 1000);
}).listen(3000);客户端代码
const source = new EventSource('http://localhost:3000');
source.onmessage = (event) => {
// 接收到事件
document.body.innerHTML += '<p>' + event.data + '</p>';
}在这个例子中，我们创建了一个 HTTP 服务器，定期向所有连接的客户端发送随机整数事件。在客户端，我们创建了一个 EventSource 对象，当接收到事件时，它将在客户端的 HTML 页面中显示整数。
总结
Server-Sent Events 是一种新型的实时通信技术，可以与传统的轮询和长轮询相比优化性能和效率。本文中我们介绍了 SSE 的基本原理和使用流程，并提供了一个简单的 SSE 示例代码，希望能对你的实时通信应用程序开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538edfd7d4982a6eb21a361