通过最近一系列的踩坑之后,总结出了这篇相对较为完善的关于vue-socket.io的使用文章,包含大家困扰的(socket连接、断开重连,以及当连接的地址是动态的情况下,我们应该注意的事项)
一.下载vue-socket.io
npm install vue-socket.io --save
二.引入到vue-cli项目中
引入的方式有两种情形,具体根据你们的项目需求来做
a.第一种情景:webSocket连接的地址是固定的
在main.js中直接这样写
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://metinseylan.com:1992', //
}))
在这里我有句话要说,我百度出来的,连接方式很多直接在main.js中如下这样写:
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://socketserver.com: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事件也不会执行
后台定义的事件
如图上所示user、transferMessage这些名词,都是后台自定义的,每个项目中可能都会有所不同,我们接受消息的事件就是靠后台来告诉我们的
vue-socket.io中自带的几个事件
connect:查看socket是否渲染成功
disconnect:检测socket断开连接
reconnect:重新连接socket事件