export default {
  data(){
    return {
      path:'',       // WebSocket的地址
      socket:'',     // WebSocket實例 
      times:0,       // 短線重新連接次數
      isConn:true,   // 配合次數進行自動重連
      heart:0,       // 接收定時器，用來檢測WebScoket是否斷線
      Tim:0,         // 用於判斷是否接收消息的定時器
    }
  },
  mounted(){
    this.path = 'ws://82.157.123.54:9010/ajaxchattest'; // 測試地址，百度上可以搜索到
    //this.path = 'ws://' + window.location.hostname + '/devices/history'; // 獲取瀏覽器當前地址，因為後台ip可能不固定，如果固定可以寫死，就像上面那樣，但是如果ip動態，則可以使用這個，上線使用
    this.Init(this.path); // 掛載時，初始化數據，建立連接等
  },
  methods: {
    Init(path){
      this.socket = new WebSocket(path); // 進行連接，連接的結果和狀態在下面的onopen、onmessage、onclose
      let that = this; // 因為下面使用了普通函數，存在this指向問題，所以我就把vue的當前實例給that了，that的使用和this一樣，就看成this就行

      this.socket.onopen = function() {  
        console.log("WebScoket已經成功連接！"); 
        this.heart = setInterval(()=>{ that.socket.send('hello')},1000*30); // 每隔30秒就向伺服器發送消息
        that.times = 0; // 在連接成功的時候改變成初始狀態，如果重連就會增加
        that.isConn = true; // 同上，與上面的次數共同控制是否重連，我不可能一直嘗試重連，連接幾百次吧
      };

      this.socket.onmessage = function() { // 接收消息，觸發此回調
        console.log("接收到的消息為:hello");
        if(that.Tim){ // 初始值為0，也就是false，第一次不會執行清理定時器
          clearTimeout(that.Tim);
        }
        that.Tim = setTimeout(()=>{ that.socket.onclose=()=>{ that.socket.close() }; },1000*33) // 只要接收到消息就會創建一個定時器，定時器的內容是在33秒後關閉webscoket，但是如果在該時間內接收到消息，那麼就會再次執行，會進入上面的if，
      }; 

      this.socket.onclose = function() {
        console.log("WebScoket已經斷開連接");
        if(this.heart !== 0){ 
          clearInterval(this.heart)
        }
        if(that.times < 5 && that.isConn){ // 每隔5秒就會重新連接，未連接成功就會次數增加，連接成功就會清零
          that.isConn = false; // 在定時器結束前，不允許再次執行該函數，這裡應該可以優化
          setTimeout(function(){ 
            that.times ++;
            console.log(`嘗試第${that.times}次重連！`)
            that.isConn = true;
            that.Init(that.path) // 執行嘗試重新連接
          },5000)
        }else{
          this.isConn = false; // 貌似可以優化
          this.socket.close(); // 徹底關閉
        }
      };

      this.socket.onerror = function() { // 這個刪了也不會報錯
        console.log('WebSocket連接發生異常!');
  
      };      
    },
}
}