WebSocket
WebSocket是一種支持雙向通訊網(wǎng)絡通信協(xié)議。- 意思就是服務器可以
主動向客戶端推送信息，客戶端也可以主動向服務器發(fā)送信息 - 屬于服務器推送技術的一種.
特點：
（1）建立在 TCP 協(xié)議之上，服務器端的實現(xiàn)比較容易。
（2）與 HTTP 協(xié)議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協(xié)議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
（3）數(shù)據(jù)格式比較輕量，性能開銷小，通信高效。
（4）可以發(fā)送文本，也可以發(fā)送二進制數(shù)據(jù)（blob對象或Arraybuffer對象）
（5）收到的數(shù)據(jù)類型 可以使用binaryType 指定， 顯式指定收到的二進制數(shù)據(jù)類型
（6）沒有同源限制，客戶端可以與任意服務器通信。
（7）協(xié)議標識符是ws（握手http）（如果加密，則為wss（tcp +TLS)），服務器網(wǎng)址就是 URL。
WebSocket對象
WebSocket對象提供了用于創(chuàng)建和管理WebSocket 連接，以及可以通過該連接發(fā)送和接收數(shù)據(jù)的 API。
使用 WebSocket() 構造函數(shù)來構造一個 WebSocket 。
為什么需要websocket
Hypertext Transfer Protocol (HTTP) 協(xié)議
一種無狀態(tài)的、應用層的、以請求/應答方式運行的協(xié)議，它使用可擴展的語義和自描述消息格式，與基于網(wǎng)絡的超文本信息系統(tǒng)靈活的互動.
- 因為http 通信只能由客戶端發(fā)起,服務器返回查詢結果,HTTP 協(xié)議做不到服務器主動向客戶端推送信息, 服務器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。
- 我們只能使用輪詢：每隔一段時候，就發(fā)出一個詢問，了解服務器有沒有新的信息。最典型的場景就是聊天室。
- 輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）;
Chrome 請求列表：分析 WebSocket
過濾器(過濾資源xhr js ws css ws等)：
- 按照類型： ws
- 屬性過濾： is：running
表格列 Frames
Data: 消息負載。 如果消息為純文本，直接顯示。 二進制操作嗎顯示操作碼名稱和代碼（Continuation Frame、 Binanry Frame、 Connection Close Frame、 Ping Frame或者Pong Frame）
Length: 消息負載的長度 以字節(jié)為單位
Time: 收到或者發(fā)送的時間。
消息顏色
- 發(fā)送到服務器的文本消息為淺綠色
- 接收到的文本消息為白色
- WebSocket 操作碼 為淺黃色
- 錯誤為淺紅色
WbeSocket 的成本 對比http
1、實時性與可伸縮性。
犧牲了簡單性。
2、網(wǎng)絡效率與無狀態(tài)： 請求1基于請求2
犧牲了簡單性與可見性
websocket 的心跳保持 對比http
- （http 長連接只能基于簡單的超時（常見為65s））
- websocket 鏈接基于
ping/pong 心跳機制維持
設計哲學： 在web約束下暴露tcp 給上層
元數(shù)據(jù)
- http 協(xié)議頭部會存放元數(shù)據(jù).
- websocket 上傳輸?shù)膽脤哟娣旁獢?shù)據(jù)
基于幀： 不是基于字節(jié)流（http, tcp）
- 每一幀要么存放
字符數(shù)據(jù)，要么承載二進制數(shù)據(jù)
基于瀏覽器的同源策略模型個（非瀏覽器無效）
可以使用Access-Control-Allow-Origin 等頭部
基于URI、子協(xié)議支持同主機``同端口上的多個服務
幀格式示意圖
ABNF 描述的幀格式
ws-frame = frame-fin ; 1 bit in length
frame-rsv1 ; 1 bit in length
frame-rsv2 ; 1 bit in length
frame-rsv3 ; 1 bit in length
frame-opcode ; 4 bits in length
frame-masked ; 1 bit in length
frame-payload-length ; 3 種長度
[ frame-masking-key ] ; 32 bits in length
frame-payload-data ; n*8 bits in ; length, where ; n >= 0
復制代碼紅色: 2 字節(jié)必然存在的幀首部
數(shù)據(jù)幀格式： Rsv 保留值
RSV1/RSV2/RSV3：默認為 0，僅當使用 extension 擴展時，由擴展決定其值
數(shù)據(jù)幀格式：幀類型
- 持續(xù)幀
0: 繼續(xù)前一幀 - 非控制幀
1： 文本幀（utf-8）
2：二進制幀
3-7: 為非控制幀保留 - 控制幀
8: 關閉幀
9: 心跳幀ping
A: 心跳幀pong
B-F:控制幀保留
URI 格式
1、ws-uri: ws://[host][:port][path][?query]
端口port默認 80
2、wss-uri: wss://[host][:port][path][?query]
端口port 默認443
客戶端提供信息
host、port 主機端口
schema: 是否基于SSL
訪問的資源：uri
握手隨機數(shù)：Sec-WebSocket-Key
選擇的子協(xié)議：Sec-WebSocket-Protocol
擴展協(xié)議：Sec-WebSocket-Extensions
CORS：Origin
如何證明握手被服務器接受？預防意外
請求中的 Sec-WebSocket-Key 隨機數(shù)
Sec-WebSocket-Key: A1EEou7Nnq6+BBZoAZqWlg==
響應中的 Sec-WebSocket-Accept 證明值
GUID（RFC4122）：258EAFA5-E914-47DA-95CA-C5AB0DC85B11
? 值構造規(guī)則：BASE64(SHA1(Sec-WebSocket-KeyGUID))
? 拼接值：A1EEou7Nnq6+BBZoAZqWlg==258EAFA5-E914-47DA-95CA-C5AB0DC85B11
? SHA1 值：713f15ece2218612fcadb1598281a35380d1790f
? BASE 64 值：cT8V7OIhhhL8rbFZgoGjU4DReQ8=
? 最終頭部：Sec-WebSocket-Accept: cT8V7OIhhhL8rbFZgoGjU4DReQ8=
