websocket 接收消息推送

884 阅读1分钟

1、点击按钮发送消息

A.vue

<button @click="sendMsg">sendMsg</button>

methods:{
  sendMsg(){
      this.$axios.get('http://192.168.1.888:8088/filemanage/base/sendMsg',
          {params:{userid: 'e9ca23d68d884d4ebb19d07889727dae'}})
  },
}

2、初始化 调用 initWebSocket

B.vue

data(){
    return {
        websock: null,
        lockReconnect:false,
    }
},
created(){
    this.initWebSocket();
},
methods:{
  /*sendMsg(){
      this.$axios.get('http://192.168.1.888:8088/filemanage/base/sendMsg',
          {params:{userid: 'e9ca23d68d884d4ebb19d07889727dae'}})
  },*/
  initWebSocket: function () {
      // WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
      var userId = 'e9ca23d68d884d4ebb19d07889727dae';
      var basrUrl = 'http://192.168.1.888:8088'
      var url = basrUrl.replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
      //console.log(url);
      this.websock = new WebSocket(url);
      this.websock.onopen = this.websocketOnopen;
      this.websock.onerror = this.websocketOnerror;
      this.websock.onmessage = this.websocketOnmessage;
      this.websock.onclose = this.websocketOnclose;
  },
  websocketOnopen: function () {
      console.log("WebSocket连接成功");
      //心跳检测重置
      //this.heartCheck.reset().start();
  },
  websocketOnerror: function (e) {
      console.log("WebSocket连接发生错误");
      this.reconnect();
  },
  websocketOnmessage: function (e) {
      console.log("-----接收消息-------",e.data);
      var data = eval("(" + e.data + ")"); //解析对象
      if(data.cmd == "wjq"){
          //测试--处理返回数据
          alert('data')
      }
      //心跳检测重置
      //this.heartCheck.reset().start();
  },
  websocketOnclose: function (e) {
      console.log("connection closed (" + e + ")");
      if(e){
          console.log("connection closed (" + e.code + ")");
      }
      this.reconnect();
  },
  reconnect() {
      var that = this;
      if(that.lockReconnect) return;
      that.lockReconnect = true;
      //没连接上会一直重连,设置延迟避免请求过多
      setTimeout(function () {
          console.info("尝试重连...");
          that.initWebSocket();
          that.lockReconnect = false;
      }, 5000);
  },
}