export default {
? data(){
? ? return {
? ? ? path:'', ? ? ? // WebSocket的地址
? ? ? socket:'', ? ? // WebSocket實例?
? ? ? times:0, ? ? ? // 短線重新連接次數(shù)
? ? ? isConn:true, ? // 配合次數(shù)進行自動重連
? ? ? 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動態(tài)，則可以使用這個，上線使用
? ? this.Init(this.path); // 掛載時，初始化數(shù)據(jù)，建立連接等
? },
? methods: {
? ? Init(path){
? ? ? this.socket = new WebSocket(path); // 進行連接，連接的結果和狀態(tài)在下面的onopen、onmessage、onclose
? ? ? let that = this; // 因為下面使用了普通函數(shù)，存在this指向問題，所以我就把vue的當前實例給that了，that的使用和this一樣，就看成this就行

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

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

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

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