Vue使用WebSocket第三方插件vue-socket.io连接ws踩坑记录
Vue里面要使用WebSocket，Google度娘出来一堆，全部都是推荐vue-socket.io
好吧，即使大家都推荐了，那咱也用吧。
然后所有的文章里面一开始的配置信息就是
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://127.0.0.1:30000',
options: { path: "/" }
}))
看到奇怪的地方没有，为什么是http，不应该是ws或者wss吗？
实际跑起来后，发送的也是http请求，而不是ws请求，
网上文章都没找到相关的问题的。
好咱想自己给他换下呗
connection: 'ws://127.0.0.1:30000',
或者是网上文章讲的
connection:SocketIO('ws://127.0.0.1:30000')
然后再跑，可是还是发现，他走的是http协议，并不是ws协议。
要疯了。。。
后面终于在这篇文章里https://www.jianshu.com/p/0d20a032d0ec找到了答案
里面也遇到了这样的问题，具体摘录如下：
然后测试，创建连接var socket = io(url);，这样创建的链接，Socket.IO默认是按轮询方式发起的http请求（很奇怪，当前浏览器明明是支持websocket的），这样首先就出现了前面的http跨域请求报错。XMLHttpRequest cannot load http://192.168.0.239:9000/socket.io/?EIO=3&transport=polling&t=LbjddEK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.
查阅资料，创建连接的时候，可以指定参数io(WS_URL, {transports: ['websocket', 'polling', 'flashsocket']})，设置其发起websocket链接，这样在console里看到的确实是发起的ws请求，
作者：七宝琥珀
链接：https://www.jianshu.com/p/0d20a032d0ec
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
所以正确的配置代码如下：
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'ws://127.0.0.1:30000',
options: { path: "/", transports: ['websocket', 'polling', 'flashsocket'] }
}))
以上是 Vue使用WebSocket第三方插件vue-socket.io连接ws踩坑记录 的全部内容， 来源链接： utcz.com/z/378553.html
