WebSocket 基本用例

<template>
  <div>
    <el-badge :value="unreadNum" :max="99" :hidden="!unreadNum" class="item">
      <p>消息</p>
    </el-badge>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',// 消息
      unreadNum: 0, // 未读消息数
      token: this.$store.state.user.userInfo.token, //token
      websock: null, // //建立的ws连接
      wsUrl: 'ws://...',// ws等同于http，wss等同于https
      lockReconnect: false,//是否真正建立连接
      timeout: 10 * 1000,//10秒一次心跳
      timeoutObj: null,//心跳倒计时
      timeoutnum: null,//断开 重连倒计时
    }
  },
  created() { // 页面创建生命周期函数
    //初始化  websocket 实例
    if ('WebSocket' in window) {
      this.initWebSocket()
    }
  },
  mounted() {
    //  获取 未读消息数
    this.getUnreadNum()
  },
  destroyed() { // 离开页面生命周期函数
    this.onclose();
  },
  methods: {
    // 获取未读消息数
    getUnreadNum() {
      
    },
    // websocket初始化 
    initWebSocket() {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      // this.websock = new WebSocket(this.wsUrl, [this.token]);
      this.websock = new WebSocket(`${this.wsUrl}?token=${this.token}`);
      this.websock.onopen = this.onopen;
      this.websock.onerror = this.onerror;
      this.websock.onmessage = this.onmessage;
      this.websock.onclose = this.onclose;
    },
    //WebSocket连接成功
    onopen() {
      // console.log("WebSocket连接成功");
      // 开启心跳
      this.start();
    },
    // WebSocket连接发生错误
    onerror(e) {
      // console.log("WebSocket连接发生错误", e);
      //重连
      this.reconnect();
    },
    // WebSocket连接 返回
    onmessage(e) {
      // console.log('返回', e.data);
      if (e.data !== 'pong') {
        const da = JSON.parse(e.data);
        this.message = da;
        // 获取 未读消息数
        this.getUnreadNum()
      }
      // 收到服务器信息，心跳重置
      this.reset();
    },
    // WebSocket断开连接
    onclose(e) {
      // console.log("connection closed", e);
      //重连
      // this.reconnect();
      clearTimeout(this.timeoutObj);
      clearTimeout(this.timeoutnum);
    },
    //重新连接
    reconnect() {
      let that = this;
      if (that.lockReconnect) {
        return;
      }
      that.lockReconnect = true;
      // console.log('重新连接');
      //没连接上会一直重连，设置延迟 避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      that.timeoutnum = setTimeout(() => {
        //新连接
        that.initWebSocket();
        that.lockReconnect = false;
      }, 5000);
    },
    reset() {//重置心跳
      let that = this;
      //清除时间
      clearTimeout(that.timeoutObj);
      //重启心跳
      that.start();
    },
    //开启心跳
    start() {
      // console.log('开启心跳');
      var self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.timeoutObj = setTimeout(() => {
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.websock.readyState == 1) {//如果连接正常
          self.websock.send("ping");
        } else {//否则重连
          self.reconnect();
        }
      }, self.timeout)
    },

  }
}
</script>