介绍
Server-sent Events (SSE) 是一种用于在客户端和服务器之间实现实时双向通信的技术。相比于 WebSocket，SSE 更加简单易用，并且可以兼容性更好，因为它是基于 HTTP 协议的。
SSE 允许服务器向客户端发送事件流，而客户端可以通过 EventSource API 来订阅这些事件流并处理它们。这种通信方式的优点在于它不需要客户端发起请求，而是通过长连接，服务器可以持续向客户端发送事件流。
使用
服务端
在服务端，我们可以使用 Node.js 的 http 模块来创建一个 HTTP 服务器，并在请求时返回 SSE 事件流。下面是一个简单的例子：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('data: hello\n\n');
setInterval(() => {
res.write('data: ping\n\n');
}, 1000);
}).listen(3000);在这个例子中，我们创建了一个 HTTP 服务器，并在请求时返回了一个 text/event-stream 类型的响应。在响应中，我们可以使用 data 字段来发送事件数据，每个事件之间需要以 \n\n 分隔符隔开。
在这个例子中，我们使用 setInterval 函数来每秒钟发送一个 ping 事件。
客户端
在客户端，我们可以使用 EventSource API 来订阅服务器发送的事件流，并在收到事件时进行处理。下面是一个简单的例子：
const source = new EventSource('http://localhost:3000');
source.onmessage = (event) => {
console.log(event.data);
};在这个例子中，我们创建了一个 EventSource 对象，并指定了服务器的 URL。当服务器发送事件时，我们可以通过 onmessage 回调函数来处理事件数据，并在控制台中输出。
实例
下面是一个完整的例子，它可以在客户端上显示当前时间，并在服务器上每秒钟更新一次时间：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Server-sent Events 示例</title>
</head>
<body>
<h1>当前时间：<span id="time"></span></h1>
<script>
const time = document.getElementById('time');
const source = new EventSource('/time');
source.onmessage = (event) => {
time.innerText = event.data;
};
</script>
</body>
</html>// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/time') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
}, 1000);
} else {
res.writeHead(404);
res.end();
}
}).listen(3000);在这个例子中，我们在客户端上显示一个当前时间的标题，并使用 EventSource API 来订阅 /time 路径上的事件流。在服务器端，我们创建了一个 /time 路径，用于每秒钟发送一个包含当前时间的事件数据。
总结
Server-sent Events 是一种非常有用的技术，可以用于实现实时双向通信。相比于 WebSocket，SSE 更加简单易用，并且可以兼容性更好，因为它是基于 HTTP 协议的。我们可以使用 Node.js 的 http 模块来创建一个 SSE 服务器，并在客户端上使用 EventSource API 来订阅事件流。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c495cd2f5e1655d6624a1