websocket使用

websocket使用

说明：登录成功后将值存在session中，监听session信息判断是否登录成功，调用websocket方法

1、main.js里配置，便于监听session里的信息

/*实时获取sessionStorage的值*/
Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'timeRangeIndex') {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
      sessionStorage.setItem(k, val);
      // 初始化创建的事件
      newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
      // 派发对象
      window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal);
  }
};

2、登录成功后存值，用于监听

this.resetSetItem('timeRangeIndex', res.code);

3、APP页面监听是否登录

进入页面获取session值

  mounted() {
    window.addEventListener('setItem', () => {
      this.timeRangeIndex = sessionStorage.getItem('HussarUserId');
    })
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  watch: {
    timeRangeIndex:{
      handler(){
        if (this.timeRangeIndex) {
          console.log('登陆成功');
          this.initWebSocket()
        }
      },
      deep: true,
      immediate: true
    }
  },

登录成功后连接websocket，根据后台接口修改，调用websocket方法

    initWebSocket() {
      console.log('刷新111')
      const a = sessionStorage.getItem("HussarUserId")
      if (typeof (WebSocket) === "undefined") { alert("您的浏览器不支持socket"); }
      const wsuri = "ws:/192.168.127.18:8081/hussarApi/public/ws/message/remind/" + a;
      // /hussarApi/dev/public/ws/message/remind/{userId}
      this.socket = new WebSocket(wsuri);
      this.socket.onopen = this.websocketonopen;//打开连接
      this.socket.onmessage = this.websocketonmessage; //数据接收
      this.socket.onerror = this.websocketonerror; // 连接失败
      this.socket.onclose = this.websocketclose; // 关闭连接
    },

    //1、打开连接
    websocketonopen(e) {
      console.log("WebSocket连接成功");
    },
    //数据接收
    websocketonmessage(event) {
      console.log(event, '数据接收')
    },
    //连接建立失败重连
    websocketonerror() {
      console.log("websocket发生了错误，将进行重连");
      this.websocketonopen()
    },
    // 关闭连接
    websocketclose(event) {
      console.log(event, '关闭连接');
      console.log("websocket已关闭");
    },

销毁页面时，关闭连接

  destroyed () {
    //页面销毁时关闭长连接
    this.websocketclose();
 },