【SSE】前端vue3使用SSE，EventSource携带哀求头

一、SSE介绍

1. 界说

SSE（Server-Sent Events）是一种基于 HTTP 协议，用于实现服务器主动向客户端推送数据的技能。它在客户端与服务器之间创建一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送，而客户端不能发送数据给服务端。
总之——SSE是一种答应服务器向客户端单向发送数据的技能。

2. 特点

• 单向通讯
  
• 实时推送
  
• 轻量级
  
• 支持跨域、使用简朴、支持主动重连
  

3. 得当场景

• 数据大屏
  
• 消息推送
  
• 股票交易
  
• 在线聊天
  
• ...
  

二、SSE使用

1. 创建最基本的SSE连接，需要用到  EventSource

<blockquote class="default_cursor_land">  EventSource接口是Web内容与服务器发送事件通讯的接口。
  一个EventSource实例向HTTP服务器开启一个持久化的连接，以text/event-stream格式发送事件，此连接会不停保持开启直到通过调用EventSource.close()关闭。
  示例：在一个vue的页面中

1. const initSSE = () => {
2.     eventSource = new EventSource('http://地址');
4.     eventSource.onmessage = (event) => {
5.         console.log("收到消息内容是:", event.data)
6.     };
8.     eventSource.onerror = (error) => {
9.         console.error("SSE 连接出错：", error);
10.         eventSource.close();
11.     };
12. }
14. onMounted(() => {
15.     initSSE();
16. });
18. onUnmounted(() => {
19.     if (eventSource) {
20.         eventSource.close();
21.     }
22. });

复制代码

2. EventSource的事件

open	在与事件源的连接打开时触发
message	在从事件源接收到数据时触发
error	在事件源连接未能打开时触发
具名事件	当从服务器端接收到指定了event字段的事件时触发，这将创建一个以该键值为值的特定事件

3. 创建SSE连接的时候携带token

假如想要在创建SSE连接的时候携带token，需要用到 event-source-polyfill
<blockquote class="default_cursor_land">  EventSourcePolyfill 是 EventSource 封装好了的一个方法，可以直接设置哀求头
  起首安装依靠

1. npm install event-source-polyfill --save

复制代码

项目中使用，完整的封装代码如下  sse.js 文件

1. import {getToken} from "@/utils/auth";
2. import {EventSourcePolyfill} from "event-source-polyfill";
4. let eventSource = null;
5. let reconnectAttempts = 0; // 重连次数
7. export default function subscribeWarnMsg(proxy, url) {
8.     if (eventSource) {
9.         console.log("sse已经存在：", eventSource);
10.         return eventSource;
11.     } else {
12.         eventSource = new EventSourcePolyfill(import.meta.env.VITE_APP_BASE_API + url, {
13.             heartbeatTimeout: 3 * 60 * 1000,
14.             headers: {
15.                 Authorization: 'Bearer ' + getToken(),
16.                 Accept: 'text/event-stream'
17.             },
18.             withCredentials: true,
19.         })
20.         eventSource.onopen = function (e) {
21.             console.log(e, "连接刚打开时触发");
22.             reconnectAttempts = 0; // 重置重连次数
23.         };
24.         eventSource.onmessage = (event) => {
25.             console.log("收到消息内容是:", event.data)
26.         };
27.         eventSource.onerror = (event) => {
28.             console.error("SSE 连接出错：", event);
29.             eventSource.close(); // 关闭连接
30.             eventSource = null;
31.             // 自动重连逻辑
32.             reconnectAttempts++;
33.             const reconnectDelay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts)); // 计算重连延迟，最大延迟为30秒
34.             console.log(`将在 ${reconnectDelay} 毫秒后尝试重连...`);
35.             // 等待一定时间后重连
36.             setTimeout(() => {
37.                 if (!eventSource) {
38.                     console.log("尝试重连 SSE...");
39.                     subscribeWarnMsg(proxy, url); // 递归调用重连
40.                 }
41.             }, reconnectDelay);
42.         }
43.         return eventSource;
44.     }
45. }

复制代码

页面中使用  test.vue 文件

1. import subscribeWarnMsg from '@/../sse'
2. const {proxy} = getCurrentInstance();
4. const sse = ref()
6. function initSSE() {
7.   sse.value = subscribeWarnMsg(proxy, `/system/sse/connect`);
8.   sse.value.onmessage = async (event) => {
9.     info.value = await JSON.parse(event.data)
10.   }
11. }
13. onMounted(() => {
14.   initSSE();
15. });
17. onUnmounted(() => {
18.   sse.value.close()
19. });

复制代码

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