介绍
在 Web 开发中，实现异步和实时通信是十分重要的，而 Server-Sent Events（SSE）就是一种实现这种通信的方法。SSE 是一种基于 HTTP 的单向通信技术，可以在服务器端向客户端发送事件流，从而实现实时通信。
SSE 的优点在于它简单易用，不需要使用 WebSocket 或者长轮询等复杂的技术。此外，SSE 还支持事件流的自定义，可以根据需要发送不同类型的事件。
实现 SSE
服务器端
在服务器端，实现 SSE 需要发送以下 HTTP 响应头：
Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
其中 Content-Type 表示响应的内容是事件流，Cache-Control 表示不缓存响应，Connection 表示保持连接。
在发送事件流时，需要使用以下格式：
event: <event-name>\n data: <event-data>\n\n
其中 <event-name> 表示事件的名称，<event-data> 表示事件的数据。\n 表示换行符，最后需要两个换行符表示事件的结束。
以下是一个 Node.js 的示例代码：
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/events') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const now = new Date();
res.write(`event: time\n`);
res.write(`data: ${now.toISOString()}\n\n`);
}, 1000);
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(`
<!doctype html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>Server-Sent Events Example</h1>
<div id="time"></div>
<script>
const timeEl = document.getElementById('time');
const eventSource = new EventSource('/events');
eventSource.addEventListener('time', (event) => {
timeEl.innerText = event.data;
});
</script>
</body>
</html>
`);
}
}).listen(3000);上述代码创建了一个 HTTP 服务器，当访问 /events 时，会向客户端发送一个每秒钟更新一次的时间事件。当访问其他路径时，会返回一个包含 JavaScript 代码的 HTML 页面，该代码会使用 SSE 接收时间事件，并将其显示在页面上。
客户端
在客户端，可以使用 JavaScript 的 EventSource 对象来接收 SSE 事件。以下是一个基本的示例代码：
const eventSource = new EventSource('/events');
eventSource.addEventListener('event-name', (event) => {
const data = JSON.parse(event.data);
// 处理事件数据
});需要注意的是，EventSource 对象只能接收单向的事件流，不能向服务器发送数据。如果需要双向通信，可以考虑使用 WebSocket 或者其他技术。
总结
Server-Sent Events 是一种实现异步和实时通信的简单易用的技术，可以在不使用 WebSocket 等复杂技术的情况下实现实时通信。在使用 SSE 时，需要注意服务器端和客户端之间的通信协议，以及事件流的格式和内容。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658d200beb4cecbf2d310b79