浅谈HTML5 WebSocket的机制

回想上一章

在上一章《为什么我们须要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交互图

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

使用 WebSocket 模式client与server的交互例如以下：

WebSocket 请求响应clientserver交互图

依据上面两张图对照能够看出。相对于传统的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连接报文

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

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

WebSocket 服务端响应报文

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

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