Vue 优雅地使用 WebSocket

背景

WebSocket 一般在页面加载连接成功后，就保持住这个 webSocket 对象，在其他页面使用地时候直接取这一个对象发送消息和接收消息就好，那在 Vue 中怎样优雅地全局使用 WebSocket 呢，下面总结一下。

Vue.prototype

对于 prototype 的用法，Vue 官方文档这样介绍

添加实例 property - Vue.js

利用这个 prototype ，将 websocket 定义为每个 Vue 实例的原型，这样每个 Vue 实例就能使用这个对象变量了。

1. 首先定义一个全局 js 文件 global.js ，用来定义全局变量 ws 和 方法 setWs()

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

2. 在 main.js 中引入 global.js

   // main.js
   import global from './xx/global.js'
   Vue.prototype.$global = global
   

3. 在 app.vue 中初始化 webSocket ，并在 created() 方法中调用

   //app.vue
   localSocket() {
     let that = this;
     if ("WebSocket" in window) {
       console.log("您的浏览器支持 WebSocket!");
       
       that.ws = new WebSocket(`wss://echo.websocket.org/`);
       that.$global.setWs(that.ws);
       that.ws.onopen = that.onopen();
   
       that.ws.onclose = function() {
         // 关闭 websocket
         console.log("连接已关闭...");
         setTimeout(() => {
           that.localSocket();
         }, 2000);
       };
     } else {
       // 浏览器不支持 WebSocket
       console.log("您的浏览器不支持 WebSocket!");
     }
   },
   

4. 在其他页面发送和接收 socket 消息

   //pageA.vue
   
   // 发送和接收消息
   handdleMsg(msg) {
     let that = this;
     console.log(that.$global.ws);
     if (that.$global.ws && that.$global.ws.readyState == 1) {
       console.log("发送信息", msg);
       that.$global.ws.send(msg);
     }
     that.$global.ws.onmessage = function(res) {
       console.log("收到服务器内容", res);
     };
   }
   

参考

VUE中优雅的全局使用websocket-前端园地