石狮网站建设公司,西宁网站制作,wordpress文章目录页,东莞市阳光网首页1.什么是websocket
1#xff09;首先websocket和http一样#xff0c;是一种网络通信协议#xff0c;来自HTML5的特性#xff1b;
2#xff09;他可以使客户端和服务端进行双工通信#xff0c;简单来说#xff0c;就是双向通信#xff1a;比如我们熟悉的http协议…1.什么是websocket
1首先websocket和http一样是一种网络通信协议来自HTML5的特性
2他可以使客户端和服务端进行双工通信简单来说就是双向通信比如我们熟悉的http协议由客户端发起请求通过三次握手与服务端建立联系并发送数据获得相应这是单向的而websocket实现了服务端向客户端主动发送数据。
3只要不主动切断联系服务端的数据就可以一直向客户端输送场景如智慧交通交通系统例如有车闯红灯了服务端就会发送数据在客户端发出报警信息还有一些智慧工厂最简单的还是我们的聊天系统对方发送的消息可以不通过你的发起就能发送给你这样的例子还很多。
PS详细的学习内容自行百度推荐一个
WebSocket - Web API 接口参考 | MDN
2.使用
碰到的机会不是很多我遇到的所有场景都是和报警或者网站告警有关系下面就使用原生的实现
// 首先判断浏览器是否支持
if (Websocket in window) {const ws new Websocket(url);// 连接建立好之后的回调ws.onopen (event) {console.log(WebSocket is open now.);// 传送一些后台需要的数据string类型或者二进制文件图片等数据ws.send() };// 后台返回的数据ws.on(message, (event) {const res JSON.parse(event.data);console.log(res);})// 关闭连接ws.close();
} else {// 浏览器不支持
}
上面代码的注释就是执行步骤有几个点特别说一下
1open和message事件专门用两种写法写的都是可行的open是建立连接的回调一般都在这发送信息给后台message是后台传数据回来的方法这写是和后台约定好的一般都是这样
2最后记得关闭close()websocket中方法直接执行的有两个一个是send一个就是close
3传参过去基本都是字符串message返回参数event.data;
3.实际开发中遇到的一些问题
首先问题是我自己对websocket特性的不熟悉导致的因为项目使用nginx代理而之前调用websocket的时候都是直接写的链接所以在想能不能代理结果却是看到了这句话
webSocket 没有同源限制客户端可以与任意服务器通信
这句意味着根本不需要考虑跨域的问题直接填写url全部就好
然后还有一个在本地调用的时候ws://开头可以使用而上了生产环境就不行了这个请教了后台同事这个就是和你的本身浏览器地址有关需要动态更改基础的就是这样先写这些。
PSwebsocket还有很多方法和几个常用库都比较实用可以试一试。
