websocket使用遇坑

在vue当中集成websocket,将会遇到不少坑,在此,便是一些常见的坑,希望能帮助到你。

首先,原生H5的开发,你需要引入两个JS库:sock.js和stomp.js,而使用vue官方框架之后,你需要从npm当中引入npm install sockjs-client和npm install @stomp/stompjs。

而在引入之后,你可能还会遇到一些问题。

1、请求时,出现

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8889' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这个是后台跨域处理时,使用了*,放行了所有域,但是浏览器处于安全,禁止了这个访问,解决方案一种,就是将后台 'Access-Control-Allow-Origin'指定ip。

2、在new SockJS('http://192.168.1.1:8080/test-info')时,内部要使用http,而非原生的ws://192.168.1.1:8080/test-info,否则会出现404错误

3、stompClient.send('/app/hello', {}, JSON.stringify(obj));推送消息给后台,或者与后台进行其他功能操作时,地址不需要在将具体ip写上,因为stomp当中已经记录了ip地址。

猜你喜欢

转载自blog.csdn.net/wxj_ios/article/details/79291254