ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端SSE包event-source-polyfill的其他变乱监听的实现 [打印本页]

---

作者: 李优秀    时间: 2025-1-7 20:19
标题: 前端SSE包event-source-polyfill的其他变乱监听的实现
event-source-polyfill库中怎样监听其他变乱

服务端在利用 EventSource 推送自定义变乱范例时，主要通过响应体来指定变乱范例，而不是在 HTTP 头字段中。
详细实现步调如下：

• 设置内容范例：首先，服务端要返回 Content-Type: text/event-stream，表明这是一个变乱流。
  
• 构造响应体：在响应体中，利用 event: 字段来指定变乱范例。客户端可以用这个变乱范例通过 addEventListener 监听。
  

详细格式

服务端发送的每一条消息都按如下格式构造：

1. event: <event-name>  
2. data: <event-data>  

复制代码

此中：

• event: 后面的内容是变乱范例，比如 update，假如不指定这个字段，默认变乱范例就是 message。
  
• data: 是变乱的详细内容，可以是 JSON、文本等。
  

代码示例（Node.js + Express）

以下是一个简单的示例，展示怎样在服务端设置自定义变乱范例：

1. const express = require('express');
2. const app = express();
4. app.get('/events', (req, res) => {
5.   res.setHeader('Content-Type', 'text/event-stream');
6.   res.setHeader('Cache-Control', 'no-cache');
7.   res.setHeader('Connection', 'keep-alive');
8.   res.status(200);
9.   res.flushHeaders();// 及时发送刷新响应头
10.   // 定时发送自定义update事件
11.   setInterval(() => {
12.     res.write('event: update\n');
13.     res.write('data: {"message": "This is an update event"}\n\n');
14.   }, 3000);
16.   // 发送默认 message 事件
17.   setInterval(() => {
18.            res.write('event: message\n');//默认事件类型，可不写
19.     res.write('data: {"message": "This is a message event"}\n\n');
20.   }, 5000);
21. });
23. app.listen(3000, () => {
24.   console.log('Server is running on http://localhost:3000');
25. });

复制代码

客户端监听

对于上述服务端代码，客户端可以像如许监听 update 和默认的 message 变乱：
原生写法：

1. const eventSource = new EventSource('http://localhost:3000/events');
3. // 监听 'update' 事件
4. eventSource.addEventListener('update', (event) => {
5.     console.log('Update event:', event.data);
6. });
8. // 监听默认的 'message' 事件
9. eventSource.onmessage = (event) => {
10.     console.log('Message event:', event.data);
11. };

复制代码

event-source-polyfill库写法：

1. import { EventSourcePolyfill } from 'event-source-polyfill';
3. const eventSource = new EventSourcePolyfill('http://localhost:3000/events');
5. eventSource.onopen = (event) =>{
6.       console.log("连接成功", event);
7. };
8. // 监听自定义事件 'update'
9. eventSource.addEventListener('update', (event) => {
10.     console.log('Update event:', event.data);
11. });
13. // 监听默认的 'message' 事件
14. eventSource.onmessage = (event) => {
15.     console.log('Message event:', event.data);
16. };
18. // 监听错误事件
19. eventSource.onerror = (error) => {
20.     console.error('EventSource encountered an error:', error);
21. };

复制代码

利用 EventSourcePolyfill 时，其 API 和标准EventSource完全兼容。
注意

• 变乱流结构：每个变乱之间要用两个换行符 \n\n 隔开，表示变乱结束。
  
• 保持连接：EventSource 是长连接，服务端需制止连接超时，大概需要定期发送心跳包。
  

定期发送心跳包

EventSourcePolyfill 支持自定义重连时间隔断，可以通过 heartbeatTimeout 设置选项来设置。
利用示例

以下示例展示了怎样利用 EventSourcePolyfill 的 heartbeatTimeout 参数来设置重连隔断：

1. import { EventSourcePolyfill } from 'event-source-polyfill';
3. // 设置重连时间间隔（单位为毫秒）
4. const eventSource = new EventSourcePolyfill('http://localhost:3000/events', {
5.     heartbeatTimeout: 10000 ,// 10秒
6.     headers: {
7.      Authorization:token?token:"Bearer niuniu",
8.     }
9. });
11. // 监听事件
12. eventSource.onmessage = (event) => {
13.     console.log('Message event:', event.data);
14. };

复制代码

参数表明

• heartbeatTimeout：表示连接失活前等候的最大时间隔断（单位是毫秒）。假如在该时间内没有收到服务端的数据，EventSourcePolyfill 会实行重新连接。这在服务器没有主动发送心跳数据的情况下尤其有效。
  

服务端的心跳设置

通常，为了保持连接状态，服务端也可以每隔一段时间发送一个空的数据包作为心跳，比方：

1. // 服务端心跳实现示例
2. setInterval(() => {
3.     res.write(':\n\n');  // ":" 是注释行，不会被客户端处理，但保持连接活跃
4. }, 10000);  // 10秒

复制代码

如允许以淘汰客户端的自动重连频率，优化网络资源。

---

什么是res.flushHeaders()

res.flushHeaders() 是 Express（基于 Node.js 的 HTTP 响应对象）的一个方法，作用是在不发送响应主体的情况下立即将响应头发送给客户端。这在处置惩罚流式响应（如 Server-Sent Events 或文件流下载）时特别有效。
用法和作用

通常，Express 在发送响应主体之前会自动发送响应头，但偶尔我们希望在发送内容之前就发送响应头信息。res.flushHeaders() 就是为这种情况设计的：

• 立即发送头信息：将当前已设定的响应头立即发送到客户端，确保客户端在收到内容之前就能得到头信息。
  
• 保持连接活跃：在 SSE（服务器推送变乱）或及时数据传输的场景中，发送响应头后保持连接，可以在不关闭连接的情况下持续传输数据。
  

利用示例

在实现 SSE 时，通常会用到 res.flushHeaders() 以保证头信息在内容流发送之前发送：

1. app.get('/events', (req, res) => {
2.   // 设置响应头
3.   res.setHeader('Content-Type', 'text/event-stream');
4.   res.setHeader('Cache-Control', 'no-cache');
5.   res.setHeader('Connection', 'keep-alive');
7.   // 强制立即发送响应头
8.   res.flushHeaders();
10.   // 发送数据流
11.   setInterval(() => {
12.     res.write(`data: ${JSON.stringify({ message: "Hello, SSE!" })}\n\n`);
13.   }, 3000);
14. });

复制代码

注意事项

• 兼容性：res.flushHeaders() 仅在支持 flushHeaders 的 Node.js 版本中可用（Node.js v8.13+）。
  
• 流式响应：该方法适用于长连接或流式内容传输的场景，不适适用于短连接请求。
  

典型应用场景

• SSE（Server-Sent Events）：立即发送头信息保持连接，然后持续推送数据。
  
• 文件下载：在文件分块下载时预先发送响应头，后续分块传输数据。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4