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找到了答案
里面也遇到了这样的问题,具体摘录如下:
作者:七宝琥珀
链接: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'] }
}))