websocket实战

import store from '@/store/'

import { ACCESS_TOKEN } from '@/store/mutation-types'

import Vue from 'vue'

export const WebsocketMixin = {

  data() {

    return {

      websock: null,

      newdata :[]

    };

  },

  mounted() {

  },

  destroyed: function () {

    // 离开页面生命周期函数

    this.websocketOnclose();

  },

  destroyed() {

    if (this.websock !== null) {

      //离开路由之后断开 websocket 连接

      this.websock.close();

    }

  },

  methods: {

    cease() {

      this.websock.close();

    },

    initWebSocket: function () {

      let token = Vue.ls.get(ACCESS_TOKEN)      

      console.log("------------WebSocket开始连接");

      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https

      var userId = store.getters.userInfo.id;

      // if (!this.socketUrl.startsWith('/')) {

      //   this.socketUrl = '/' + this.socketUrl

      // }

      if (!this.socketUrl.endsWith('/')) {

        this.socketUrl = this.socketUrl + '/'

      }

      // var url = 'ws://18.tcp.cpolar.top:14807/gd/'+ this.socketUrl + userId

      var url = window._CONFIG['domianURL'].replace("https://", "wss://").replace("http://", "ws://") + this.socketUrl + userId

      // var url = 'ws:10.0.0.20:8081/websocket'

      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连接成功");

    },

    websocketOnerror: function (e) {

      console.log("WebSocket连接发生错误");

      this.reconnect();

    },

    websocketOnclose: function (e) {

      console.log("WebSocket连接断开");

      localStorage.removeItem('testResistance')

    },

    websocketOnmessage: function (e) {

      let topParam = JSON.parse(e.data)

      console.log("-----接收消息-----",topParam );

      if(typeof(topParam) == 'string') {

        let statusInformation = JSON.parse(e.data)

        this.funStatus(statusInformation)

      } else {

       

 

     

       

 

     

    }

      // var data = eval("(" + e.data + ")"); //解析对象

      // if(data.cmd == "topic"){

      //     //系统通知

      //   this.loadData();

      // }else if(data.cmd == "user"){

      //     //用户消息

      //   this.loadData();

      // }

      //心跳检测重置

      //this.heartCheck.reset().start();

    },

    websocketSend(text) {

      console.log(text)

      // 数据发送

      try {

        this.websock.send(text);

      } catch (err) {

        console.log("send failed (" + err.code + ")");

      }

    },

    reconnect() {

      var that = this;

      if (that.lockReconnect) return;

      that.lockReconnect = true;

      //没连接上会一直重连，设置延迟避免请求过多

      setTimeout(function () {

        console.info("尝试重连...");

        that.initWebSocket();

        that.lockReconnect = false;

      }, 5000);

    },

  }

}

// 需要在用到的页面引用

 socketUrl: "/websocket",

   this.initWebSocket()