檔案中單獨使用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,所以其中的關係暫時不是很清楚，有明白的大佬歡迎留言下！十分感謝

另：專案中存在連線為非同步獲取的可參考這篇部落格