Vue-全局websocket 实现消息推送

 在上一篇文章 WebSocket 消息推送https://blog.csdn.net/qq_63312957/article/details/125375122?spm=1001.2014.3001.5502 中已经简单描述了如何使用 springboot  vue websocket 实现数据推送，建议先阅读之前的文章之后，再来阅读本篇文章。

新建global.js文件

export default {
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    }
}

一：main.js 文件中增加

import globalWebSocket from './js/global.js'
Vue.prototype.$globalWebSocket = globalWebSocket

 二：app.vue中添加

 created() {
    this.initWebSocket();
  },
  methods:{
    //app.vue
    initWebSocket() {
      let that = this;
      if ("WebSocket" in window) {
        console.log("您的浏览器支持 WebSocket!");
        that.ws = new WebSocket(`ws://192.168.1.26:8082/api/websocket`);
        that.$globalWebSocket.setWs(that.ws);
        // that.ws.onopen = that.onopen();
        that.ws.onopen = function() {console.log('webSocket connect successful')};
        that.ws.onclose = function() {
          // 关闭 websocket
          console.log("webSocket connect closed");
          setTimeout(() => {
            that.initWebSocket();
          }, 2000);
        };
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
    },

三：需使用的页面，保留getMessage方法，只需添加handleMsg方法,将getMessage方法作为接收数据方法，并在mounted函数中加载hanleMsg即可

如果你恰好需要读到这篇文章，希望对你有帮助。如有写的不对或不够好的地方，欢迎指正。