在前端开发中，我们经常会面临着要实时更新数据的情况。传统的做法可能是通过定时器或者轮询来实现实时更新，但是这种方式会占用大量的网络带宽和服务器资源，而且实时性也无法保证。这时候我们可以使用 Server-Sent Events （SSE）来优化我们的 web 应用性能。
SSE 是什么
Server-Sent Events 是一种基于 HTTP 协议的实时通信技术，在 HTML5 中被正式引入到浏览器中。相较于 WebSocket，SSE 仅使用了 HTTP 协议中的一个部分，即服务器端向客户端发送长连接的一种方式。其特点是：
- SSE 无需客户端发起请求，而是由服务器端主动推送消息给客户端
- SSE 使用了 HTTP 协议，因此它是基于传统的 HTTP 协议工作的，可以直接处理跨域请求问题
- SSE 具有更好的兼容性，因为大多数浏览器都支持 SSE，而我们所使用的技术栈，如 Node.js 也都可以方便地实现 SSE
SSE 的应用场景
SSE 可以应用于数据实时推送、事件提醒、服务器日志推送、股票行情推送等需求场景。比如，在一个在线多人协作编辑器的场景中，当有人更新了文档，就可以通过 SSE 技术将更新的文档推送到其他客户端，从而实现编辑实时同步。
如何使用 SSE
在服务端，我们需要使用 Node.js 的 http 模块创建一个 HTTP 服务。具体实现代码如下：
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer((req, res) => {
const headers = {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': '*'
};
res.writeHead(200, headers);
setInterval(() => {
const data = new Date().toLocaleTimeString();
res.write(`data: ${data}\n\n`);
}, 1000);
});
server.listen(9090, () => {
console.log('Server is running at http://localhost:9090');
});上述代码创建了一个 HTTP 服务并监听 9090 端口，在每次请求中都会返回一个 MIME 类型为 text/event-stream 的响应头，其中 Access-Control-Allow-Origin:* 表示跨域请求允许所有来源。随后我们使用 setInterval 设置了一个定时器，每秒钟向客户端发送一条消息，其中 data 表示消息实体，两个换行符表示消息结束。
在客户端，我们可以通过 EventSource 类来接收服务端推送的消息。具体实现代码如下：
const source = new EventSource('http://localhost:9090');
source.addEventListener('message', (event) => {
console.log(event.data);
});上述代码通过创建 EventSource 对象并传入服务地址，从而建立了与服务端的长连接。当服务端向客户端推送消息时，客户端会触发 message 事件，我们可以通过监听该事件来获取服务端推送的消息。在本例中，我们简单地将消息打印到控制台上。
总结
通过使用 SSE 技术，我们可以实现高效、实时地更新数据，而不会占用大量的带宽和服务器资源。SSE 具有与 WebSocket 相同的优点，但是它的实现更加简单，兼容性更好，因此在一些场景中可以替代 WebSocket 来使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6532ee187d4982a6eb5fc0a4