vuesocket.io在單文件中使用（進入到單文件再發請求）

文件中單獨使用vuesocket.io

最近的vue項目中需要使用到長鏈接,了解了一番后決定用vue-socket.io來操作，但是網上的教程大多是直接在main.js中直接發起長鏈接,而我的項目是需要在指定的頁面開啟，並不是直接查看。下面是我的解決方案(參考的是github上該項目issue中的解決方案)

基礎步驟是一樣的

先在main.js中對項目進行引入

注意options中的autoConnec需要設置為false,因為我們不想要一進入頁面就完成連接

至於其他的options可參見https://socket.io/docs/v3/client-api/index.html

import VueSocketio from 'vue-socket.io'
Vue.use(
  new VueSocketio({
    debug: true,
    connection: 'http://*****/test', //這里的test是namespace具體看后端配置
    options:{
      autoConnect: false  
    },
  })
)

然后在單文件開啟連接,此時需要使用this.$socket.open()

此處不能使用this.$socket('connect')或者this.$socket.on('connect') ，這是在開啟連接之后才生效的方法，之前一直在用這個方法嘗試，不會報錯但是不能成功

接下來是監聽每個事件，事件的名稱與后端有關，這個需要詢問后端給的函數名是哪個

mounted(){
    this.$socket.open()
},
 sockets: {
    connect: function () {
       console.log('socket 連接成功')
    },
    disconnect: function () {
       alert('斷開連接')
    },
    reconnect: function () {
      console.log('重新連接')
      this.$socket.emit('conect')
    },
    async my_response (res) {
      console.log('接收數據', res)
    }
 },
 beforeDestroy(){
    this.$socket.close()
  }

思考

在寫以上方法之前是直接在單文件中完成引入並試圖在created中直接創建實例,這個方法在main.js中是可行的，一進入項目就能直接發起請求，但是在單文件中請求失敗

 //直接在目標文件page.vue中進行操作
 import Vue from 'vue';
 import VueSocketio from 'vue-socket.io'
 export default {
     Vue.use(
      new VueSocketio({
         debug: true,
         connection: 'http://132.121.169.8:8020/test'
       })
     )
  }

當使用該方法時打開chrome的控制台會發現：其實請求是有發出的，但是我們監測不到數據的返回，

詢問過大佬之后初步判定是組件的渲染問題，

相關源碼如下： https://github.com/MetinSeylan/Vue-Socket.io/blob/master/src/mixin.js

我們沒有確保頁面是加載在VueSocketIO實例創建之后。

可是事實上可以在頁面中打印出 this.$socket,所以其中的關系暫時不是很清楚，有明白的大佬歡迎留言下！十分感謝

另：項目中存在連接為異步獲取的可參考這篇博客