随着互联网的发展，客户端和服务器之间的通信变得越来越重要。而传统的客户端/服务器通信技术，如轮询和长轮询，存在一些缺点，比如效率低、资源占用高等问题。而 Server-Sent Events（SSE）则是一种新的客户端/服务器通信技术，它可以很好地解决这些问题。
什么是 Server-Sent Events
Server-Sent Events 是一种允许服务器向客户端发送事件流的技术。它基于 HTTP 协议，使用纯文本的数据格式（即 MIME 类型为 text/event-stream）进行通信。主要用于实时流式数据的处理，比如消息推送、交易状态更新、数据监控等场景。
SSE 的最大优点是不需要客户端不断向服务器发送请求获取数据，而是服务器实时向客户端推送事件。这样可以大大节约网络资源，降低响应延迟，提高通信效率。
如何使用 Server-Sent Events
使用 Server-Sent Events 也很简单，只需要在服务端和客户端进行相应的代码实现就可以。
服务端实现
服务端需要做到以下几点：
- 在响应头中设置 Content-Type 为 text/event-stream。
- 设置响应头的 Cache-Control 为 no-cache，避免浏览器缓存数据。
- 使用 send() 方法向客户端发送事件流，每个事件通过\n隔开。
以下是一个简单的 Node.js 服务端示例代码：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer(function(request, response) {
response.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
});
setInterval(function() {
response.write(`data: ${new Date()}\n\n`);
}, 1000);
}).listen(8080);上面的代码中，我们设置了 Content-Type 和 Cache-Control，使用 setInterval 定时向客户端发送事件流。
客户端实现
客户端需要做到以下几点：
- 创建一个 EventSource 类型的对象，指定服务器端地址。
- 监听事件的 onmessage 方法，处理服务器发送的消息。
- 可以监听 onopen 和 onerror 分别处理连接成功和连接出错的情况。
以下是一个简单的 JavaScript 客户端示例代码：
// javascriptcn.com 代码示例
const eventSource = new EventSource('/stream');
eventSource.onopen = function() {
console.log('Connected');
};
eventSource.onerror = function() {
console.log('Error occurred');
};
eventSource.onmessage = function(event) {
console.log(event.data);
};上面的代码中，我们创建了一个 EventSource 类型的对象，并设置了服务器地址。然后我们监听了 onmessage 事件，处理服务器发送的数据。
总结
Server-Sent Events 是一种新的客户端/服务器通信技术，它可以避免传统技术的缺点，如效率低、资源占用高等问题。使用 SSE，可以让客户端实时获得服务器端发送的事件流，减少网络资源的占用，提高通信效率。通过以上的代码示例，相信大家已经掌握了 SSE 的基本用法，可以在自己的项目中尝试使用了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65389e967d4982a6eb18d00e