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");
  };
};
相关推荐
初心w50t218 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
{⌐■_■}18 分钟前
【软件工程】tob和toc含义理解
前端·数据库·mysql·golang·软件工程·tidb
码农捻旧1 小时前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor1 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤1 小时前
Vue 高级视频播放器实现指南
前端
FogLetter2 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
轻语呢喃2 小时前
js事件机制:监听、捕获、冒泡与委托
javascript
小公主2 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端