一、什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，它允许服务端向客户端推送数据，而无需客户端发起请求。SSE 可以理解为是一种通过 HTTP 长连接实现的消息推送技术。
二、SSE 原理解析
SSE 通信基于 HTTP 协议，但是它与普通的 HTTP 请求有所不同。下面是它的请求报文：
GET /stream HTTP/1.1 Host: example.com Accept: text/event-stream Cache-Control: no-cache
其中，GET 请求的路径为 /stream，Accept 头部字段指定数据类型为 text/event-stream。SSE 接收文本数据，而不是二进制数据。
服务端向客户端推送数据时，会将数据封装成如下格式的事件：
event: myEvent
data: {"name": "John", "age": 18}
event: myEvent
data: {"name": "Lucy", "age": 20}每个事件包含了两个部分：事件类型（event）和数据（data），它们都是以换行符分隔的键值对形式呈现。事件类型是可选的，如果不指定，那么默认为 message。数据可以是任意字符串，可以是 JSON 格式的字符串，也可以是纯文本。
客户端接收到数据后，会执行一个回调函数（onmessage），该回调函数传递参数是一个事件对象，事件对象包含了事件类型和数据。
三、SSE 应用实战
1. 服务端实现
对于服务端来说，实现 SSE 的方式有很多种，下面以 Node.js 为例，介绍如何实现 SSE。
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/stream') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
// 每 5 秒发送一条消息
setInterval(() => {
res.write('data: ' + new Date().toLocaleTimeString() + '\n\n');
}, 5000);
} else {
res.writeHead(404);
res.end();
}
}).listen(3000);请求路径为 /stream 时，服务端会将响应头设置为 text/event-stream，并且在每 5 秒发送一条消息到客户端。
2. 客户端实现
客户端实现 SSE 的方式也很多。下面以 JavaScript 为例，展示如何使用 SSE。
const source = new EventSource('/stream');
source.onmessage = (event) => {
console.log(event.data);
};通过 EventSource 创建一个 SSE 连接，并在回调函数中获取到服务端推送的数据。
四、SSE 的指导意义
SSE 作为一种服务器推送技术，它的应用场景非常广泛，尤其适用于需要实时更新数据的应用场景。
与 WebSocket 不同，SSE 是基于 HTTP 协议实现的，不需要额外的协议协商过程，而且浏览器对 SSE 的支持度也比较高，甚至某些老版本的浏览器也支持 SSE。
除此之外，SSE 还具有以下优点：
- 可以携带自定义事件类型，更具语义
- 对于服务端推送大量小数据时更加高效
- 可以自定义事件重连机制，提高数据传输的可靠性
因此，掌握 SSE 的技术原理和实现方式，对于前端工程师来说具有非常重要的指导意义。
五、总结
本文详细讲解了 SSE 的工作原理，以及如何在 Node.js 和 JavaScript 中实现 SSE。通过对 SSE 技术的学习，我们可以进一步了解各种服务器推送技术的区别和优劣，更好地应用于实际开发中，提高应用程序的用户体验和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652e281a7d4982a6ebf35d05