websocket控制全局接收发送消息

websocket控制全局接收发送消息

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

起因：因为公司要新做一个教育实训平台，有三种角色：管理员端（一个学校只有一个账号）、教师端（这个专业下需要使用此平台的所有老师）、学生端（这个专业下需要使用此平台的所有学生）。必须在指定的ip段（可配置实验室网段）内上课，而且需要控制人数和在线时间，因为决定用websocket来控制。

创建挂载websocket公共的/global.js文件

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

创建websocker的js文件

import vue from "vue";
function getSocket() {
    let websocket;
    if (typeof (WebSocket) === 'undefined') {
      console.log('您的浏览器不支持WebSocket');
    } else {
      console.log('您的浏览器支持WebSocket');
      websocket = new WebSocket(连接websocket的请求);
      vue.global.setWs(websocket);//此步是把websocket挂载到全局
      //已连接
      websocket.onopen = function() {
        console.log("that.websocket: connection is opened");
      };
      //已关闭
      websocket.onclose = function() {
        console.log("that.websocket: connection is closed");
        //一旦连接关闭（超过人数或者超过登录时长）这里可以写退出登录的方法
      };
      //websocket的心跳
      websocket.onheartbeat = function() {
        console.log("that.websocket: connection heartbeat...");
      };
      //后端传输的消息
      websocket.onmessage = function(e) {
        console.log(e)
      };
    }
}
export {
  getSocket
};

把global.js引入到main.js

import global from '../src/js/global.js'
Vue.prototype.global = global
Vue.global = Vue.prototype.global

把准备工作做好后就可以在登录页面去引用getSocket()来创建websocket。 在需要接收消息的页面写以下的方法

// 发送和接收消息
  handdleMsg() {
    let that  = this;
    //接收消息
    (vue as any).global.ws.onmessage = function(res) {
      //接收各种不同的消息来执行不同的方法
    };
    //发送消息
    (vue as any).global.ws.send('心跳检测');
  }

之后就又发现了一个新的问题，因为用户会刷新页面，因为websocket是登录之后连接的，刷新之后就断开了连接，因此可以通过监测页面刷新后重新连接websocket。 在App.vue里重新连接

 import { getSocket } from './js/socket.js';
 ...
created(){
    getSocket()
  }

以上就是所有的过程了。