vue项目中的websocket，心跳包

我没有使用socket.js这类封装好的websocket包，使用的是原生的

新建js文件，封装websocket

var global_callback = null;
var websock = null;
function initWebSocket() { //初始化weosocket
    //ws地址
    var wsuri = "ws地址";
    websock = new WebSocket(wsuri);
    websock.onmessage = function (e) {
        websocketonmessage(e);
    }
    websock.onclose = function (e) {
        websocketclose(e);
    }
    websock.onopen = function () {
        websocketOpen();
    }
    //连接发生错误的回调方法
    websock.onerror = function () {
        console.log("WebSocket连接发生错误");
    }
}
// 实际调用的方法
function sendSock(agentData, callback) {
    global_callback = callback;
    if (websock.readyState === websock.OPEN) {
        //若是ws开启状态
        websocketsend(agentData)
    } else if (websock.readyState === websock.CONNECTING) {
        // 若是 正在开启状态，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    } else {
        // 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    }
}
//数据接收
function websocketonmessage(e) {
    if(global_callback!=null&&global_callback!=""&&global_callback!=undefined){
        global_callback(JSON.parse(e.data));
    }
    
    // return JSON.parse(e.data);
}

//数据发送
function websocketsend(agentData) {
    websock.send(JSON.stringify(agentData));
}
//关闭
function websocketclose(e) {
    console.log("connection closed (" + e.code + ")");
}
function websocketOpen(e) {
    console.log("连接成功");
    // heartbeat();
    // login();
}
initWebSocket();
export{sendSock}

将文件引入main.js中去

import * as socketApi from './assets/js/plugin/socket.js'
Vue.prototype.socketApi = socketApi

在你需要使用websocket的页面进行调用this.socketApi.sendSock(param, callback);
建议是将websocket定义在全局，否则你使用父子组件调用时就会每调用一次产生一个websocket对象（血泪史。。。。。）

与后台建立心跳连接，并登陆

methods:{
	heartbeat() {
      console.log("心跳");
      this.socketApi.sendSock(
        {
          type: 0,
          data: "heartbeat"
        },
        this.getData
      );
    },
    login() {
      this.token = CookieUtil.get("token");
      this.socketApi.sendSock(
        {
          type: 1,
          data: this.token
          // data:"c8544265df58b50c6131bad8a4dc537b"
        },
        this.getData
      );
    },
},
created() {
  clearInterval(window.timer);
  this.heartbeat();
  window.timer = setInterval(this.heartbeat, 130000);
},
mounted() {
  let that = this;
  this.$nextTick(function() {
    that.login();
  });
},
distroyed: function() {
    clearInterval(window.timer);
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    clearInterval(window.timer);
    console.log("已经清楚定时器");
    next();
  },

1、心跳和登陆都是后端写好的，前端只需要传入参数即可，没130s心跳一次，在离开页面时就停掉定时器，以防在访问其他页面时，会一直调用；我能想到的就是这个办法，如果有更好的办法麻烦告诉我
2、为什么将登陆和心跳分开写？按正常的话，是先有心跳了，才会登陆，然后根据vue的啥玩意（学名忘了），反正就是先是执行created,再执行mounted
3、getData函数是获取后端传给我的数据

主要就是这些了，剩下的就是根据项目需求，传不同的参数获取不同的数据

遇到的问题

1、定时器调用（不知道算不算问题）
定时器函数 里面的参数是函数 不要加括号 加括号代表执行，应该当做变量传进去
2、name在初始化的时候没有值（这些都是后台传过来的值）

所以我就在data先定义了变量，然后再getData函数中赋值，这样就不会报错了
3、所选队伍与外面的显示内容一一对应

主要就是定义一下第三方变量，来获取数组下标和后台传来的teamId，上面的内容根据数组下标来确定对应的Id