vue中再搞一下SSE的使用

什么是SSE:

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

sse.js文件

javascript 复制代码
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使用

ini 复制代码
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");
  };
};
相关推荐
code_YuJun6 分钟前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我7 分钟前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
Elieal20 分钟前
AJAX 知识
前端·ajax·okhttp
sulikey40 分钟前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烟袅1 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅1 小时前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
烛阴1 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智1 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front2 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
天一生水water2 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节