最近在vue-cli项目中需要用到webSocket,百度一遍之后，感觉vue-socket.io插件还不错，但是使用之后，也出现了种种问题，百度关于vue-socket.io方面的文档很少， 而且文章的方法都是粘贴复制的，导致找不到自己想要的结果，期间也踩了各种坑，最后总算实现了，虽然我的写法也许不够完善，但总归能给和我遇到相同问题，找不到解决方法的人一点提示，这也是我写这篇文字的原因，我相信遇到问题的不止我一个，希望能对有需要的人有所帮助。
一.下载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'); //这种方法我试了，我这边不行
但是我这样写就不行，页面会报错，所以我在项目中都是使用new VueSocketio方式，如下：
Vue.use(new VueSocketio({
debug: true,
connection: 'http://socketserver.com:1923' //我用的这种方式，可行
}))
如果有大神知道原因，可在评论下方告诉我哦
b.webSocket连接的地址的是动态的，是后台通过接口传给我们的
第一步：在utils中新建一个文件，命令为socket.js
我们通过请求后台的接口，获取webSocket请求的地址url,然后再进行连接
第二部：在main.js中引入你新建的文件
第三部：向后台发送webSocket通道验证消息，验证成功就可以获取到webSocket中的消息了
vue-socket.io中有两个默认的事件，非后台定义的名称：connect ,disconnect。
在这里我只是使用的disconnect:检测webSocket断开连接事件，当检测到webSocket连接的事件后，我又重新请求后台接口，获取通道code,重新连接一次.从而实现了断开重连
之所以没使用connect事件，在connect事件里面进行连接，而是直接在mounted里面进行连接，是因为当用户刷新页面时， webSocket没断开连接，但是我这边webSocket已经接收不到数据了，因为没断开连接，所以你刷新的时候，connect事件不会触发，所以我在connect里面写的连接事件也不会再次执行，所以我这边把通道连接事件在mounted事件里面，这样每次用户刷新，都会重新进行连接，保证了webSocket每次都正常连接，并且我们前端这边能接受到数据
我不知道我这种方法是否是正确的，但至少能保证webSocket在页面刷新之后能正常运行，如果大家有更好的方法，也可在评论下方告诉我