前言
WebSocket 是一种实现了双向通信的网络协议，它可以在客户端和服务器之间建立一个持久化的连接，使得服务器可以主动向客户端推送数据。但是，WebSocket 并不是所有浏览器都支持，尤其是一些旧版本的浏览器。
那么，有没有一种方式可以在不支持 WebSocket 的浏览器中实现类似的功能呢？这就是我们今天要介绍的 Server-sent Events。
什么是 Server-sent Events
Server-sent Events（简称 SSE）是一种浏览器和服务器之间实现单向通信的技术。它允许服务器向客户端推送数据，而客户端则可以通过 JavaScript 事件监听器来处理这些数据。
SSE 是基于 HTTP 协议的一种技术，它使用了长连接（长轮询）来保持服务器和客户端之间的连接。当服务器有数据需要推送时，它会在这个连接上发送一个事件，客户端可以通过监听这个事件来获取数据。
如何实现 SSE
实现 SSE 需要有一个服务器端程序和一个客户端程序。
服务器端程序
服务器端程序需要能够接收客户端的请求，并且能够根据客户端的请求返回数据。在 SSE 中，服务器要发送的数据被称为事件（Event），服务器需要将这些事件发送给客户端。
下面是一个 Node.js 实现 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' // 设置连接类型为长连接
});
setInterval(() => {
res.write(`event: time\n`);
res.write(`data: ${new Date().toLocaleTimeString()}\n\n`); // 发送事件和数据
}, 1000);
}).listen(3000);上面的代码创建了一个 HTTP 服务器，并且设置了响应头，告诉浏览器这是一个 SSE 连接。然后，它会每隔一秒钟向客户端发送一个事件和数据。
在这个示例中，我们发送了一个名为 time 的事件，然后发送了当前的时间作为数据。客户端可以根据这个事件名称来识别服务器发送的数据。
客户端程序
客户端程序需要能够监听服务器发送的事件，并且能够处理这些事件。在 SSE 中，客户端使用 EventSource 来建立与服务器的连接，并且使用 addEventListener 来监听事件。
下面是一个使用 JavaScript 实现 SSE 的示例代码：
const source = new EventSource('http://localhost:3000');
source.addEventListener('time', (event) => {
const data = event.data;
console.log(data);
});上面的代码创建了一个 EventSource 对象，并且指定了服务器的地址。然后，它使用 addEventListener 来监听名为 time 的事件，并且在事件发生时打印出事件的数据。
SSE 与 WebSocket 的比较
SSE 和 WebSocket 都是用于实现双向通信的技术，它们有一些相似之处，也有一些不同之处。
相似之处
- 都是基于 HTTP 协议的。
- 都可以实现服务器向客户端推送数据。
- 都可以使用事件（Event）来进行数据传输。
不同之处
- SSE 是单向通信，WebSocket 是双向通信。
- SSE 使用长连接（长轮询）来保持连接，WebSocket 使用真正的双向连接。
- SSE 可以在不支持 WebSocket 的浏览器中使用，WebSocket 则需要浏览器支持。
- SSE 只能发送文本数据，WebSocket 可以发送任何类型的数据。
- SSE 可以使用 HTTP 的缓存机制，WebSocket 不支持缓存。
总结
Server-sent Events 是一种实现类似 WebSocket 功能的技术，它可以在不支持 WebSocket 的浏览器中使用。SSE 使用长连接来保持连接，并且使用事件来进行数据传输。与 WebSocket 相比，SSE 的优势是可以在不支持 WebSocket 的浏览器中使用，缺点是只能实现单向通信。
如果你需要实现双向通信，或者需要发送二进制数据，那么 WebSocket 是更好的选择。但是，如果你只需要实现单向通信，并且需要兼容旧版本的浏览器，那么 SSE 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655bec4dd2f5e1655d5fea64