浅谈HTML5 WebSocket的机制
2016-04-19 21:07
471 查看
WebSocket机制
我们知道WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(不知道的可以看下全双工通信RS-422标准),能更好的节省服务器资源和带宽并达到实时通讯,它建立在TCP之上,同HTTP一样通过TCP来传输数据,但是它和HTTP最大不同是:
WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和Browser/Client Agent都能主动的向对方发送或接收数据,就像Socket一样;
WebSocket需要类似TCP的客户端和服务器端通过握手连接,连接成功后才能相互通信。
非WebSocket模式传统 HTTP 客户端与服务器的交互如下:
传统 HTTP 请求响应客户端服务器交互图
使用 WebSocket 模式客户端与服务器的交互如下:
WebSocket 请求响应客户端服务器交互图
根据上面两张图对比可以看出,相对于传统的HTTP每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket是类似Socket的TCP长连接的通讯模式,一旦WebSocket连接建立后,后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前,不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下,极大的节省了网络带宽资源的消耗,有明显的性能优势,且客户端发送和接受消息是在同一个持久连接上发起,实时性优势明显。
WebSocket和HTTP的报文
我们再来看看WebSocket通讯与传统HTTP的不同交互的报文:
在客户端(浏览器端js),创建WebSocket 实例化一个新的 WebSocket 客户端对象,连接类似 ws://yourdomain:port/path 的服务端 WebSocket URL,WebSocket 客户端对象会自动解析并识别为 WebSocket 请求,从而连接服务端端口,执行双方握手过程,客户端发送数据格式类似:
WebSocket 客户端连接报文
可以看到,客户端发起的 WebSocket 连接报文类似传统 HTTP 报文,”Upgrade:websocket”参数值表明这是WebSocket类型请求,“Sec-WebSocket-Key”是WebSocket客户端发送的一个base64编码的密文,要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept”应答,否则客户端会抛出“Error during WebSocket handshake”错误,并关闭连接。
服务端收到报文后返回的数据格式类似:
WebSocket 服务端响应报文
“Sec-WebSocket-Accept”的值是服务端采用与客户端一致的密钥计算出来后返回客户端的,“HTTP/1.1 101 Switching Protocols”表示服务端接受WebSocket协议的客户端连接,经过这样的请求-响应处理后,客户端服务端的WebSocket连接握手成功, 后续就可以进行TCP通讯了。
我们知道WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(不知道的可以看下全双工通信RS-422标准),能更好的节省服务器资源和带宽并达到实时通讯,它建立在TCP之上,同HTTP一样通过TCP来传输数据,但是它和HTTP最大不同是:
WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和Browser/Client Agent都能主动的向对方发送或接收数据,就像Socket一样;
WebSocket需要类似TCP的客户端和服务器端通过握手连接,连接成功后才能相互通信。
非WebSocket模式传统 HTTP 客户端与服务器的交互如下:
传统 HTTP 请求响应客户端服务器交互图
使用 WebSocket 模式客户端与服务器的交互如下:
WebSocket 请求响应客户端服务器交互图
根据上面两张图对比可以看出,相对于传统的HTTP每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket是类似Socket的TCP长连接的通讯模式,一旦WebSocket连接建立后,后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前,不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下,极大的节省了网络带宽资源的消耗,有明显的性能优势,且客户端发送和接受消息是在同一个持久连接上发起,实时性优势明显。
WebSocket和HTTP的报文
我们再来看看WebSocket通讯与传统HTTP的不同交互的报文:
在客户端(浏览器端js),创建WebSocket 实例化一个新的 WebSocket 客户端对象,连接类似 ws://yourdomain:port/path 的服务端 WebSocket URL,WebSocket 客户端对象会自动解析并识别为 WebSocket 请求,从而连接服务端端口,执行双方握手过程,客户端发送数据格式类似:
WebSocket 客户端连接报文
可以看到,客户端发起的 WebSocket 连接报文类似传统 HTTP 报文,”Upgrade:websocket”参数值表明这是WebSocket类型请求,“Sec-WebSocket-Key”是WebSocket客户端发送的一个base64编码的密文,要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept”应答,否则客户端会抛出“Error during WebSocket handshake”错误,并关闭连接。
服务端收到报文后返回的数据格式类似:
WebSocket 服务端响应报文
“Sec-WebSocket-Accept”的值是服务端采用与客户端一致的密钥计算出来后返回客户端的,“HTTP/1.1 101 Switching Protocols”表示服务端接受WebSocket协议的客户端连接,经过这样的请求-响应处理后,客户端服务端的WebSocket连接握手成功, 后续就可以进行TCP通讯了。
相关文章推荐
- HTML5canvas元素
- 学习h5第一天的心得
- H5上传图片和获得图片关键代码
- HTML5 LocalStorage 本地存储
- HTML5,让 Ajax 动态改变 URL 且支持后退
- h5浏览器获取当前所在位置
- HTML5 --Web Workers
- HTML5 在canvas中绘制复杂形状
- 四,细说 HTML5 之 新增的非主题结构元素
- html5中input弹窗时,不弹出输入法弹出。
- html5获取用户当前的地理位置,即经纬度。
- H5 progress标记
- 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程
- wex简介
- Markdown——入门指南
- 分享5个主流的HTML5开发工具
- 推荐10款非常优秀的HTML5开发工具
- 几个H5炫酷特效
- HTML5学堂,感谢您一年的陪伴(上)
- HTML5学堂,感谢您一年的陪伴(上)