sse（server-sent events）是一种服务器向客户端推送实时数据的单向通信方式，适用于股票行情、新闻推送、聊天消息等场景。1. 使用javascript连接sse流的方法是创建eventsource对象并监听事件，如onmessage处理默认消息，onerror处理错误，addeventlistener监听自定义事件；2. 服务器端发送sse事件需设置content-type为text/event-stream，并按格式发送以data:开头、nn结尾的数据，示例使用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}nn`; 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: 开头，以 nn 结尾。 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}nn`; 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: 字段，并以 nn 分隔每个事件。客户端则使用 addEventListener 监听自定义事件。
以上就是HTML SSE是什么？实时更新的3种Server-Sent事件用法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1568859.html
微信扫一扫 
支付宝扫一扫 
