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");
  };
};
相关推荐
陈随易2 分钟前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员
傻球5 分钟前
前端实现文本描边
前端·canvas
snakeshe10106 分钟前
1. 实现 useEffect
前端
前端进阶者9 分钟前
天地图InfoWindow插入React自定义组件
前端·javascript
扶我起来还能学_11 分钟前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
Nu1117 分钟前
@babel/preset-env的corejs、@babel/plugin-transform-runtime的corejs之间区别
前端·babel
用户698135449106118 分钟前
three.js绘制中国地理数据
前端
爱学习的茄子19 分钟前
JavaScript闭包实战:防抖的优雅实现
前端·javascript·面试
前端付豪19 分钟前
9、前端日志埋点系统的架构设计
前端·javascript·架构
张志鹏PHP全栈19 分钟前
TypeScript 第四天,TypeScript的编译选项(一)
前端·typescript