文件中单独使用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
,所以其中的关系暂时不是很清楚,有明白的大佬欢迎留言下!十分感谢
另:项目中存在连接为异步获取的可参考这篇博客