在前端开发中，实时通信已经成为了一个非常重要的需求。而在实现实时通信时，我们通常会选择 WebSocket 技术。但是，WebSocket 技术需要服务器端支持，而有些时候我们并没有这样的条件。这时候，Server-Sent Events (SSE) 技术就能够派上用场了。本文将介绍如何使用 SSE 技术实现实时通信，并探讨 SSE 和 WebSocket 技术之间的联系和区别。
什么是 Server-Sent Events
Server-Sent Events 是一种基于 HTTP 协议的实时通信技术。它允许服务器向客户端推送事件流，而客户端可以通过 EventSource 接口来监听这些事件流。在 SSE 中，服务器发送的事件流是一系列的文本数据，而客户端可以通过 JavaScript 代码来处理这些文本数据。
SSE 的实现
在服务器端，我们需要使用一种能够推送事件流的技术。这里我们使用 Node.js 平台来实现 SSE 技术。Node.js 提供了一个 http 模块，我们可以使用这个模块来创建一个 HTTP 服务器，并在服务器上推送事件流。
const http = require('http');
http.createServer((request, response) => {
response.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = `data: ${new Date().toLocaleTimeString()}\n\n`;
response.write(data);
}, 1000);
}).listen(3000);在上面的代码中，我们创建了一个 HTTP 服务器，并将响应头的 Content-Type 设置为 text/event-stream，这是 SSE 技术的标准 MIME 类型。Cache-Control 的值设置为 no-cache，这样可以确保客户端每次都会从服务器获取最新的数据。Connection 的值设置为 keep-alive，这样可以保持连接的持续性。
在 setInterval 函数中，我们每隔一秒钟向客户端发送一个事件流。这个事件流的格式是固定的，以 data: 开头，后面是我们要发送的数据，以及两个换行符。这里我们发送的数据是当前时间的字符串格式。
在客户端，我们可以使用 EventSource 接口来监听服务器发送的事件流。
const source = new EventSource('http://localhost:3000');
source.onmessage = event => {
console.log(event.data);
};在上面的代码中，我们创建了一个 EventSource 对象，并将服务器地址传递给它。source.onmessage 函数会在每次接收到服务器发送的事件流时被调用，我们可以在这个函数中处理服务器发送的数据。
SSE 和 WebSocket 的区别
SSE 和 WebSocket 都是实现实时通信的技术，它们之间有什么区别呢？首先，WebSocket 是一种双向通信技术，而 SSE 只能从服务器向客户端推送事件流。其次，WebSocket 的数据传输是二进制数据，而 SSE 的数据传输是文本数据。另外，WebSocket 需要服务器端支持，而 SSE 可以在任何支持 HTTP 协议的服务器上使用。
总结
本文介绍了如何使用 SSE 技术实现实时通信，并探讨了 SSE 和 WebSocket 技术之间的联系和区别。SSE 技术虽然不能像 WebSocket 那样实现双向通信，但是它可以在一些场景下派上用场。比如，在没有 WebSocket 支持的情况下，我们可以使用 SSE 技术来实现实时通信。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658cfa06eb4cecbf2d2df45c