? ? ?通過最近一系列的踩坑之后，總結出了這篇相對較為完善的關于vue-socket.io的使用文章斑唬，包含大家困擾的（socket連接胆数、斷開重連肌蜻，以及當連接的地址是動態(tài)的情況下，我們應該注意的事項）??
一.下載vue-socket.io
????npm?install?vue-socket.io?--save
二.引入到vue-cli項目中
????????引入的方式有兩種情形必尼，具體根據你們的項目需求來做
?a.第一種情景：webSocket連接的地址是固定的
在main.js中直接這樣寫
import?VueSocketIO?from?'vue-socket.io'
Vue.use(new?VueSocketIO({
????debug:?true,
????connection:?'http://metinseylan.com:1992',? //
}))
在這里我有句話要說蒋搜，我百度出來的，連接方式很多直接在main.js中如下這樣寫：
import VueSocketio from 'vue-socket.io';?
Vue.use(VueSocketio, 'http://socketserver.com:1923');? ? ? ? ? ? ? //*****這種方法我試了判莉，我這邊不行***//
如果有大神知道原因豆挽，可在評論下方告訴我哦
?b.第二種情形：webSocket連接的地址的是動態(tài)的，是后臺通過接口傳給我們的
? **這里要提示的一點就是券盅，當連接的地址是動態(tài)的帮哈，代碼的執(zhí)行順序就很重要了，即new VueSocket在main.js中的位置**
三.在mounted中執(zhí)行connect
a.當socket地址是靜態(tài)的寫法
mounted(){
this.$socket.emit('connect', 1)
}
b.當socket地址是動態(tài)的
因為此時的socket連接地址是動態(tài)的锰镀，就會存在請求響應然后渲染的時間娘侍，這個時候就會出現socket還沒渲染成功就執(zhí)行了App.vue咖刃，這時候connect連接事件就不會觸發(fā)，所以采用定時器的方法來執(zhí)行connect
mounted() {
? ? var timerOne = window.setInterval(() => {
? ? ? if (this.$socket) {
? ? ? ? this.$socket.emit('connect', 1)
? ? ? ? window.clearInterval(timerOne)
? ? ? ? return;
? ? ? }
? ? }, 500)
? },
四私蕾，推送消息給后臺僵缺，連接socket
五、socket連接成功
因為我們在? new VueSocketIO中開啟了debug: true,就會在控制臺中出現那些藍色字體踩叭，來幫助我們調試socket磕潮，注意，如果藍色的字中容贝，沒有包含我們在socket中定義的事件（connect自脯、users、reconnect......）斤富，那就可能是我們在main,js中創(chuàng)建的new VueSocketIO渲染時間有問題,這個時候膏潮，connect事件也不會執(zhí)行
后臺定義的事件
如圖上所示user、transferMessage這些名詞满力，都是后臺自定義的焕参，每個項目中可能都會有所不同，我們接受消息的事件就是靠后臺來告訴我們的
vue-socket.io中自帶的幾個事件
connect:查看socket是否渲染成功?
disconnect:檢測socket斷開連接?
reconnect:重新連接socket事件
