sse（server-sent events）是一种服务器向客户端推送实时数据的单向通信方式，适用于股票行情、新闻推送、聊天消息等场景。1. 使用javascript连接sse流的方法是创建eventsource对象并监听事件，如onmessage处理默认消息，onerror处理错误，addeventlistener监听自定义事件；2. 服务器端发送sse事件需设置content-type为text/event-stream，并按格式发送以data:开头、\n\n结尾的数据，示例使用node.js每秒推送递增消息；3. 发送带事件id和自定义类型的sse消息可通过添加id:和event:字段实现，客户端可据此跟踪事件id并监听特定类型事件，如示例中根据奇偶id发送不同类型事件。
HTML SSE，简单来说，就是服务器向客户端推送数据的单向通道。它让网页无需频繁请求，就能实时更新信息，像股票行情、新闻推送、聊天室消息，都能用它实现。
解决方案：
Server-Sent Events (SSE) 提供了一种从服务器向客户端推送实时数据的高效方式。以下是三种常用的 SSE 用法，并附带代码示例。
立即学习“前端免费学习笔记（深入）”；
如何使用JavaScript连接到SSE流？
使用 JavaScript 连接到 SSE 流非常简单。你需要创建一个 EventSource 对象，指向你的 SSE 端点。然后，你可以监听不同的事件类型来处理服务器推送的数据。
const eventSource = new EventSource('/sse-endpoint');
eventSource.onmessage = (event) => {
console.log('Received data:', event.data);
// 在这里更新你的页面内容
};
eventSource.onerror = (error) => {
console.error('SSE error:', error);
eventSource.close(); // 发生错误时关闭连接
};
eventSource.addEventListener('custom_event', (event) => {
console.log('Received custom event:', event.data);
// 处理自定义事件
});这段代码创建了一个连接到 /sse-endpoint 的 EventSource。onmessage 处理默认的数据推送，onerror 处理错误，而 addEventListener 可以监听服务器发送的自定义事件。注意，错误发生时最好关闭连接，防止无限重试。
如何在服务器端发送SSE事件？
服务器端发送 SSE 事件需要设置正确的 HTTP 头部，并按照特定格式发送数据。重要的是 Content-Type 必须是 text/event-stream。
以下是一个 Node.js 示例：
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
let i = 0;
setInterval(() => {
const data = `data: Hello, SSE! ${i}\n\n`;
res.write(data);
i++;
}, 1000);
req.on('close', () => {
console.log('Client disconnected');
});
}).listen(3000, () => {
console.log('SSE server started on port 3000');
});这个服务器每秒发送一条包含递增数字的消息。关键在于 Content-Type 设置为 text/event-stream，并且每个事件以 data: 开头，以 \n\n 结尾。 Cache-Control: no-cache 也很重要，防止浏览器缓存 SSE 流。
如何发送带有事件ID和自定义事件类型的SSE？
除了基本的数据推送，你还可以发送带有事件 ID 和自定义事件类型的 SSE。这允许客户端更好地管理和处理不同的事件。
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
let eventId = 0;
setInterval(() => {
eventId++;
const eventType = (eventId % 2 === 0) ? 'even' : 'odd';
const data = `id: ${eventId}\nevent: ${eventType}\ndata: Event ${eventId} of type ${eventType}\n\n`;
res.write(data);
}, 1000);
req.on('close', () => {
console.log('Client disconnected');
});
}).listen(3000, () => {
console.log('SSE server started on port 3000');
});在这个例子中，我们添加了 id 和 event 字段。id 用于标识事件，客户端可以使用 lastEventId 属性来跟踪最后一个事件。event 字段定义了事件类型，客户端可以使用 addEventListener 监听特定类型的事件。例如，客户端可以监听 "even" 和 "odd" 事件，并分别处理它们。
服务器端需要按照规范，使用 id:, event: 和 data: 字段，并以 \n\n 分隔每个事件。客户端则使用 addEventListener 监听自定义事件。
