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'] }

}))