vue中再搞一下SSE的使用

什么是SSE:

SSE是一种基于HTTP协议的服务器向客户端单向推送数据的技术。它通过长连接保持通信，数据格式为文本流，支持自动重连，且兼容现代浏览器。

sse.js文件

export default class TunnelSSE {
  sse = null
  constructor() {
  }
  //创建链接
  create({ userId, tunnelId }) {
    if (this.sse) {
      this.close();
    }
    this.sse = new EventSource(`${process.env.VUE_APP_BASE_API}/sse/thirdApi/deviceFeedback/connect/${userId}/${tunnelId}`)
    return this.sse;
  }
  //关闭
  close() {
    this?.sse?.close();
  }
}

xxx.vue使用

import TunnelSSE from "disp/src/api/sse";
const tunnelSse = new TunnelSSE();

const createSSEFn = () => {
  console.log(instance.$store.getters.userInfo.USER_CODE, "sseHander");
  const sseHander = tunnelSse.create({
    userId: instance.$store.getters.userInfo.USER_CODE,
    tunnelId: currentTunnel.value,
  });
  sseHander.onopen = (e) => {
    console.log("连接成功", e);
  };
  sseHander.onmessage = (e) => {
    try {
      const data = JSON.parse(e.data);
      console.log("message", data);
    } catch (error) {}
    // console.log(data, "data");
  };
};