一.下载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事件
以上就是所有啦，有问题可评论区见，如以上文章有错误地方，也可评论区指出......
本文转自 https://blog.csdn.net/weixin_43898997/article/details/122962888，如有侵权，请联系删除。
