SSE 实战：实现多终端推送
作为一名前端开发者，我们常常需要在客户端和服务器之间进行实时数据传输。传统的方式包括长轮询、WebSocket 等。但其中一种易用性较高，且不需要专门实现服务器端代码的方式是 SSE(Server-Sent Events)。
SSE 是什么？
SSE 是 HTML5 新增的一种事件源，它允许服务器主动向客户端推送数据。它建立在 HTTP 协议之上，请求方式为 GET。与 WebSocket 不同的是，SSE 基于 HTTP 1.1 协议，因此不需要像 WebSocket 那样在服务器端实现专门的握手协议。客户端可以通过 EventSource API 直接兼容和使用 SSE。
关于 SSE 实现多终端推送
实现 SSE 的一大特点是可以直接适用于所有终端，包括 PC、手机、平板等。由于 SSE 只需要使用 HTTP 通道，客户端只需要一个浏览器即可，不需要安装客户端程序。可以直接使用 JavaScript API，避免了兼容性的问题。
SSE 实现多终端推送需要用到事件监听。在 JavaScript 中，你可以使用 EventSource 对象来监听 SSE 事件。在服务器端，发送数据的方式与传统的请求响应方式不同，需要使用“Content-Type: text/event-stream”头，以及使用“data:”前缀来标记数据内容。
下面是 SSE 实现多终端推送的示例代码：
// 服务器端代码
var i = 0;
setInterval(() => {
i++;
const data = id:${i}\nevent:message\ndata: ${new Date().toLocaleString()}\n\n;
res.write(data);
console.log(Server message: ${data});
}, 1000);
// 客户端代码
const source = new EventSource('/event');
source.onmessage = (event) => {
console.log(Client message: ${event.data});
};
source.onerror = (err) => {
console.log(Client error: ${err});
};
从上面的代码可以看出，服务器端每隔 1 秒钟向客户端发送一条消息，客户端通过 EventSource 进行监听，接收到服务器的消息后打印到控制台中。需要注意的是，每一行数据都以“\n”结束，并且每一条数据的结尾需要添加两个“\n”，否则客户端将无法解析。
总结
SSE 实现多终端推送不仅在浏览器中完美兼容，还可以轻松实现不同终端之间的数据同步，无需进行额外的服务器端开发。SSE 还可以在 Web 端的消息推送、及时检测等场景中被广泛应用。要了解更多关于 SSE 的应用，可以前往 MDN 文档查看。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f58447d4982a6eb8e3a57