在前端开发中，我们经常需要实现实时更新数据的功能，例如聊天室、股票行情等。传统的方式是使用轮询技术，即每隔一段时间向服务器发送请求，以获取最新的数据。但是这种方式会浪费带宽和服务器资源，并且不能实时更新数据。
SSE（Server-Sent Events）是一种新的技术，它可以实现服务器向客户端推送数据，而不需要客户端发送请求。SSE 可以大大提高数据传输效率，同时也可以改善用户体验。
SSE 的原理
SSE 是基于 HTTP 协议的，它使用了 HTTP 1.1 中的一个新特性——持久连接（Persistent Connection）。持久连接允许客户端与服务器保持连接，而不需要每次发送请求都要重新建立连接。这样，服务器就可以向客户端推送数据了。
SSE 的另一个重要特性是事件流（Event Stream）。服务器通过事件流向客户端发送数据，每条数据都是一个事件。客户端通过监听事件流，即可实时获取最新的数据。
SSE 的用法
服务端
在服务端，我们需要设置响应头，告诉浏览器这是一个 SSE 流。设置方法如下：
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 告诉浏览器这是 SSE 流
'Cache-Control': 'no-cache', // 禁用缓存
'Connection': 'keep-alive' // 使用持久连接
});然后，我们可以向客户端发送事件，代码如下：
res.write('event: myEvent\n'); // 发送事件名
res.write('data: ' + JSON.stringify(data) + '\n\n'); // 发送数据其中，event 表示事件名，data 表示数据。注意，每条数据要以两个换行符结束。
客户端
在客户端，我们需要使用 EventSource 对象来监听事件流。代码如下：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('myEvent', function(event) {
const data = JSON.parse(event.data);
// 处理数据
});其中，EventSource 对象的参数是服务端的 SSE 地址。addEventListener 方法用于监听事件流，其中的参数是事件名和回调函数。
SSE 的优点
SSE 相比轮询技术有以下优点：
- 实时性更高：SSE 可以实现服务器主动向客户端推送数据，而不需要客户端发送请求。这样可以大大提高数据传输效率，同时也可以改善用户体验。
- 节省带宽和服务器资源：SSE 可以减少不必要的请求，从而节省带宽和服务器资源。
- 更简单的代码：SSE 的代码相比轮询技术更简单，更易于维护。
总结
SSE 是一种新的技术，它可以实现服务器向客户端推送数据，而不需要客户端发送请求。SSE 可以大大提高数据传输效率，同时也可以改善用户体验。在实际开发中，我们可以使用 SSE 技术来实现实时更新数据的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662f6d5ad3423812e4d63168