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,所以其中的关系暂时不是很清楚，有明白的大佬欢迎留言下！十分感谢

另：项目中存在连接为异步获取的可参考这篇博客