vue中封装websocket,全局调用

项目场景:

项目中多个地方,多个页面的数据需要同一个websocket实时推送.


解决方案:

第一步,全局创建一个global.js,定义全局变量

javascript 复制代码
export default {
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    }
}

第二步,在main.js中引入global.js,并将global的文件挂载在vue实例上

javascript 复制代码
import  global from "./utils/global.js";
Vue.prototype.$global = global

第三步,在入口也或者你的项目首页中初始化websocket,并在create()中调用

以app.vue为例

javascript 复制代码
created() {
//获取webscoket地址
  axios.get("/js/mapconfig.json").then((res) => {
    const { wsUrl } = res.data;
      const wsURL=wsUrl+this.UUID;//ws地址 UUID是随机数,我们需要链接上之后保持一致,将其存在vuex中
      this.localSocket(wsURL)
  });
},
methods:{
 // 初始化 webSocket 
    localSocket(url) {
      // return
      let that = this;
      if ("WebSocket" in window) {
        that.ws = new WebSocket(url);
        that.$global.setWs(that.ws);
        that.ws.onclose = function() {
          // 关闭 websocket
          setTimeout(() => {
            that.localSocket(url);
          }, 2000);
        };
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
    },
  }
复制代码
mapconfig.json的文件,在public/js下新建mapconfig.json,这样是vue出包后在dist包中能实时改地址
javascript 复制代码
{
    "wsUrl":"ws:\\123.58.106.147:20232/ws/connect/",
}

第四步,在需要发送消息的页面调用发送消息接口

javascript 复制代码
mounted(){
    let data = {
      "snCode":this.taskSessData.droneId,
      "moduleCode":"HOME_LINK",
      "open":true,//open:打开驾驶舱时传true 关闭时传false
      'id':this.UUId,
    };
    this.handdleMsg(data)
  },
  methods:{
    // 发送和接收消息
    handdleMsg(data) {
      let that = this;
      if (that.$global.ws && that.$global.ws.readyState == 1) {
        that.$global.ws.send(JSON.stringify(data));
      }
      that.$global.ws.onmessage = function(res) {
        const resData=JSON.parse(res.data);
        // moduleCode=="HOME_DATA"是驾驶舱飞行数据 HOME_VIDEO是驾驶舱视频流数据 HOME_WEB_MAP地图信息入口
        if (resData.moduleCode=="HOME_DATA") {
          that.FlightData=resData;
          // 更新飞机的在线离线状态
          that.$store.commit('setConnectStatusV',that.FlightData.connectStatus)
        }
        if (resData.moduleCode=="HOME_VIDEO") {
          that.videoData=resData.videoList;
        }
        if (resData.moduleCode=="HOME_WEB_MAP") {
          that.mapData=resData;
        }
      };
    },
  }

离开此页面发送关闭消息

javascript 复制代码
 destroyed() {
    let data = {
      "snCode":this.taskSessData.droneId,
      "moduleCode":"HOME_LINK",
      "open":false,//open:打开驾驶舱时传true 关闭时传false
      'id':this.UUId,
    };
    this.handdleMsg(data)
  },
相关推荐
全马必破三15 分钟前
前端性能优化方案
开发语言·前端·javascript
心海资源30 分钟前
【心海资源】黄金首饰价格查询单页源码
前端·学习·开源软件
2501_9159090638 分钟前
一次复杂接口故障的抓包全过程:四款工具协同作战实录(含 Charles)
websocket·网络协议·tcp/ip·网络安全·https·udp
打小就很皮...1 小时前
《从虚拟 DOM 到 Diff 算法:深度解析前端高效更新的核心原理》-简版
前端·javascript·html
神仙别闹1 小时前
基于Java(SSM)+MySQL实现(Web)具有智能推荐功能的图书销售系统
java·前端·mysql
是席木木啊1 小时前
Tomcat:部署前后端分离项目踩坑
前端·javascript·vue.js
超级土豆粉2 小时前
ES6 新增 API 方法
前端·ecmascript·es6
前端虫2 小时前
(高级)高级前端开发者指南:框架运用与综合实战
前端·javascript·vue.js·react
Stevetagelian5 小时前
vue2实现元素拖拽
前端·javascript·css·vue.js
西哥写代码5 小时前
基于cornerstone3D的dicom影像浏览器 第二十一章 显示DICOM TAGS
前端·javascript·vue