肿瘤康复网 > 最详细的vue-socket.io用法

最详细的vue-socket.io用法

时间：2021-06-02 08:01:06

相关推荐

通过最近一系列的踩坑之后，总结出了这篇相对较为完善的关于vue-socket.io的使用文章，包含大家困扰的（socket连接、断开重连，以及当连接的地址是动态的情况下，我们应该注意的事项

一.下载vue-socket.io

npminstallvue-socket.io--save

二.引入到vue-cli项目中

引入的方式有两种情形，具体根据你们的项目需求来做

a.第一种情景：webSocket连接的地址是固定的

在main.js中直接这样写
importVueSocketIOfrom'vue-socket.io'
Vue.use(newVueSocketIO({
debug:true,
connection:':1992', //
}))

在这里我有句话要说，我百度出来的，连接方式很多直接在main.js中如下这样写：

import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, ':1923'); //*****这种方法我试了，我这边不行***//

如果有大神知道原因，可在评论下方告诉我哦

b.第二种情形：webSocket连接的地址的是动态的，是后台通过接口传给我们的

如图所示

**这里要提示的一点就是，当连接的地址是动态的，代码的执行顺序就很重要了，即new VueSocket在main.js中的位置**

三.在mounted中执行connect

a.当socket地址是静态的写法

mounted(){
this.$socket.emit('connect', 1)
}

b.当socket地址是动态的

因为此时的socket连接地址是动态的，就会存在请求响应然后渲染的时间，这个时候就会出现socket还没渲染成功就执行了App.vue，这时候connect连接事件就不会触发，所以采用定时器的方法来执行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中创建的new VueSocketIO渲染时间有问题,这个时候，connect事件也不会执行