浅谈HTML5 WebSocket的机制

时间:2021-12-15 19:39:22

回想上一章

在上一章《为什么我们须要HTML5 WebSocket》中,我简单的介绍了下WebSocket的前世今生。相信大家已对WebSocket有了初步的了解。那么今天我们继续深入学习WebSocket的机制。

WebSocket机制

我们知道WebSocket是HTML5一种新的协议。它实现了浏览器与server全双工通信(不知道的能够看下全双工通信RS-422标准),能更好的节省server资源和带宽并达到实时通讯,它建立在TCP之上。同HTTP一样通过TCP来数据传输,可是它和HTTP最大不同是:

WebSocket是一种双向通信协议,在建立连接后,WebSocketserver和Browser/Client Agent都能主动的向对方发送或接收数据,就像Socket一样;

WebSocket须要相似TCP的client和server端通过握手连接,连接成功后才干相互通信。

非WebSocket模式传统 HTTP client与server的交互例如以下:

传统 HTTP 请求响应clientserver交互图
浅谈HTML5 WebSocket的机制

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

使用 WebSocket 模式client与server的交互例如以下:
WebSocket 请求响应clientserver交互图

浅谈HTML5 WebSocket的机制

依据上面两张图对照能够看出。相对于传统的HTTP每次请求-应答都须要client与服务端建立连接的模式。WebSocket是相似Socket的TCP长连接的通讯模式,一旦WebSocket连接建立后,兴许数据都以帧序列的形式传输。

在client断开WebSocket连接或Server端断掉连接前。不须要client和服务端又一次发起连接请求。

在海量并发及client与server交互负载流量大的情况下。极大的节省了网络带宽资源的消耗,有明显的性能优势,且client发送和接受消息是在同一个持久连接上发起。实时性优势明显。

WebSocket和HTTP的报文

我们再来看看WebSocket通讯与传统HTTP的不同交互的报文:

在client(浏览器端js),创建WebSocket 实例化一个新的 WebSocket client对象,连接相似 ws://yourdomain:port/path 的服务端 WebSocket URL。WebSocket client对象会自己主动解析并识别为 WebSocket 请求,从而连接服务端端口,运行两方握手过程,client发送数据格式相似:

WebSocket client连接报文

浅谈HTML5 WebSocket的机制

能够看到,client发起的 WebSocket 连接报文相似传统 HTTP 报文,”Upgrade:websocket”參数值表明这是WebSocket类型请求。“Sec-WebSocket-Key”是WebSocketclient发送的一个base64编码的密文。要求服务端必须返回一个相应加密的“Sec-WebSocket-Accept”应答,否则client会抛出“Error during WebSocket handshake”错误,并关闭连接。

服务端收到报文后返回的数据格式相似:

WebSocket 服务端响应报文

浅谈HTML5 WebSocket的机制

“Sec-WebSocket-Accept”的值是服务端採用与client一致的密钥计算出来后返回client的,“HTTP/1.1 101 Switching Protocols”表示服务端接受WebSocket协议的client连接,经过这种请求-响应处理后。client服务端的WebSocket连接握手成功, 兴许就能够进行TCP通讯了。

欢迎大家关注我的博客。关注我的微博,如有疑问。请加qq群:454796847、135430763 共同进步!