vue-native-websocket

前言

最近在做一个客户端通信功能，由于websocket可以进行双向通信（服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息），因此选择了vue-native-websocket

一、安装插件vue-native-websocket

yarn add vue-native-websocket
# or
npm install vue-native-websocket --save

二、app.js 引入websocke插件

import websocket from 'vue-native-websocket';
Vue.use(websocket, 'ws://localhost:9090', {// 需要连接的服务器地址，端打包后可以填地址（localhost:...）,调试阶段需填写对应开发本地地址(同个局域网，能ping通的地址)或部署的在线服务地址
  reconnection: true, // (Boolean)是否自动重连，默认false
  reconnectionAttempts: 5, // 重连次数
  reconnectionDelay: 3000, // 再次重连等待时常(1000)
});

三、app.vue 初始化websocket

 methods: {
      ...mapMutations('common', ['setSocketMessage']),
      // 初始化weosocket
      initWebSocket() {
       this.$socket.onopen = this.websocketonopen;//连接成功方法
       this.$socket.onerror = this.websocketonerror;//报错方法
       this.$socket.onmessage = this.websocketonmessage;// 接收端返回或推送信息的方法
       this.$socket.onclose = this.websocketclose;//关闭
      },
      // 链接ws服务器，e.target.readyState = 0/1/2/3   0 CONNECTING ,1 OPEN, 2 CLOSING, 3 CLOSED
      websocketonopen(e) {
        console.log('WebSocket连接成功,app.vue', e);
      },
      // 接收端发送过来的信息，整个项目接收信息的唯一入口
      websocketonmessage(e) {
         if (!e.data) {return;}
         let res = JSON.parse(e.data);
         if(res.error && res.error.code){//返回失败信息
         this.$message({
            type: 'error',
            message:getTipCode(Number(res.error.code)),//匹配失败code的提示文案
         });
      }
        //端返回成功信息
        if (res.status == 200 && res.action) {
          switch (res.action) {
          case 'getClientInfo':
            console.log("返回的客户端信息"，res.data)
            break;
          default:
            this.setSocketMessage(e.data);//把信息存到vuex里面，再分发到对应页面
            break;
          }
        }
        //端主动发起的
        if (res.method) {
          switch (res.method) {
          case 'loginOut':
              console.log("接收到消息，执行退出登录操作")
            break;
          case 'msgCenter':
            console.log("接收到消息，打开消息中心")
            this.$router.push('/noticeCenter');
            break;
          default:
            break;
          }
         }
     }
}

四、vuex分发消息

state：{
   websocketMessage: "",// 端返回的信息
   socketTimestamp: new Date().getTime(),//时间戳去监听数据的改变
}，
mutations：{
   //websocket
    setSocketMessage(state, data) {//一旦获取到端端返回的信息，就改变时间戳
      state.socketTimestamp = new Date().getTime();
      state.websocketMessage = data;
    },
}

五、子页面获取websoket返回的信息(监听到了时间戳的改变)

watch: {
   // 监听到端有返回信息
  socketTimestamp(old, newVal) {
      this.handleMessage(this.websocketMessage);
  }
}，
methods: {
    getCacheList(){
       this.$socket.send(JSON.stringify({ //向端发送协议
          method: 'searchCacheList',
          keyWords: this.keyWords,
       }));
    },
    handleMessage(res) {//处理接收到的信息
      res = JSON.parse(res);
      if (res.status == 200) {
        switch (res.action) {
            case 'searchCacheList'://获取协议信息
              this.cacheList =  res.data ? res.data : [];
              break;
            default:
              break;
        }
      }
    }
}