WebSocket技術原理

一、引言

        網際網路發展的早期，網站上隻是一些靜态展示頁面。使用者請求(Request)網站頁面，網站回複(Response)頁面内容給使用者浏覽器。因為需求簡單，是以也沒有很複雜的協定過程。這種形式的Request/Response互動流程如下圖所示：

        随着網際網路技術的發展，帶寬逐漸提高，使用者數也越來越龐大。對網際網路的呈現内容提出了要求，随之出現了動态頁面技術，對同一個頁面，頁面的某些部分對不同的通路使用者，呈現的内容不同。相關的實作技術有CGI、ASP、PHP、JSP等。由于通路量的增加，WEB伺服器同時處理的使用者數也達到了萬(10K)以上級别，這就是C10K問題：” The C10K problem“[1]。為了緩解伺服器壓力，每次Request/Response後連接配接(TCP連接配接)繼續保持，以及對同一個TCP連接配接，多次複用Request/Response的方法(也稱為Pipeline)也提了出來。這就是HTTP/1.1協定中長連接配接的主要内容。

       伴随移動網際網路的發展，大量移動終端和其上的APP應用接入網絡，HTML5技術也提了出來，以便支援WEB上的音視訊播放、實時遊戲、實時聊天等。催生了這樣一個需求，當伺服器有更新時，需要立即将資料發送給用戶端，這就是基于伺服器端的推送技術。

       WEBSOCKET之前的解決方法大概這麼幾種： 1)輪詢：用戶端設定一個時間間隔，時間到以後，向伺服器發送request詢問有無新資料，伺服器立即傳回response，如果有更新則攜帶更新的資料。2)長連接配接(long poll): 和輪詢相似，但是為阻塞模式的輪詢，用戶端請求新的資料request, 伺服器會阻塞請求，直到有新資料後才傳回response給用戶端；然後用戶端再重複此過程。這兩種方式的特點，不斷的建立HTTP連接配接，然後發送請求request，之後伺服器等待處理。服務端展現的是一種被動性，同時這種處理方式，非常耗費網絡帶寬和伺服器資源。

        伺服器向用戶端推送更新時，因為被動性，對低延遲的應用體驗不好；因為request/response的互動方式，對網絡帶寬和伺服器帶來了額外的負擔（例如多次請求的HTTP頭部， TCP連接配接複用會導緻的Head-of-Line Blocking線頭阻塞[2]等）。如果在單一的TCP連接配接中，使用雙向通信（全雙工通信）就能很好的解決此問題。這就是WebSocket技術的緣由。

二、WebSocket是什麼

        WebSocket一種在單個 TCP 連接配接上進行全雙工通訊的協定。WebSocket通信協定于2011年被IETF定為标準RFC 6455，并被RFC7936所補充規範，WebSocketAPI被W3C定為标準。 WebSocket 是獨立的、建立在 TCP 上的協定，和 HTTP 的唯一關聯是使用 HTTP 協定的101狀态碼進行協定切換，使用的 TCP 端口是80，可以用于繞過大多數防火牆的限制。 

        WebSocket 使得用戶端和伺服器之間的資料交換變得更加簡單，允許服務端直接向用戶端推送資料而不需要用戶端進行請求，在 WebSocket API 中，浏覽器和伺服器隻需要完成一次握手，兩者之間就直接可以建立持久性的連接配接，并允許資料進行雙向傳送。 

       目前常見的浏覽器如 Chrome、IE、Firefox、Safari、Opera 等都支援 WebSocket，同時需要服務端程式支援 WebSocket。在Websocket協定中，用戶端和服務端隻需要做一個握手的動作，就能形成一條通道，兩者之間可以進行資料互相傳送。是以WebSocket協定分為兩部分：

1. 握手
2. 資料傳輸

握手

用戶端發送一個請求

服務端回應

”Upgrade:WebSocket”表示這是一個特殊的 HTTP 請求，請求的目的就是要将用戶端和伺服器端的通訊協定從 HTTP 協定更新到 WebSocket 協定。在請求中的“Sec-WebSocket-Key”是随機的，伺服器端會用這些資料來構造出一個SHA-1的資訊摘要。把“Sec-WebSocket-Key”加上一個魔幻字元串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之後進行BASE-64編碼，将結果做為“Sec-WebSocket-Accept”頭的值，傳回給用戶端。以表明伺服器端擷取了用戶端的請求，同意建立 WebSocket 連接配接。一旦連接配接建立，用戶端和伺服器端就可以通過這個通道雙向傳輸資料了。

資料傳輸

WebSocket的資料在發送時，被組織為依次序的一串資料幀(data frame)，然後進行傳送。傳送的幀類型分為兩類：資料幀(data frame)和控制幀(Control frame)。資料幀可以攜帶文本資料或者二進制資料；控制幀包含關閉幀(Close frame)和Ping/Pong幀。幀的格式如下所示：

三、WebSocket API

WebSocket API，也稱為WebSocket接口，定義了Web應用和伺服器進行雙向通信的公共接口，如下圖：

接口的内容可以分為三類：狀态變量、網絡功能和消息處理等。

1. 構造函數WebSocket(url, protocols)：構造WebSocket對象，以及建立和伺服器連接配接; protocols可選字段，代表選擇的子協定
2. 狀态變量readyState: 代表目前連接配接的狀态，短整型資料，取值為CONNECTING(值為0)， OPEN(值為1), CLOSING(值為2), CLOSED(值為3)
3. 方法變量close(code, reason)： 關閉此WebSocket連接配接。
4. 狀态變量bufferedAmount: send函數調用後，被緩存并且未發送到網絡上的資料長度
5. 方法變量send(data): 将資料data通過此WebSocket發送到對端
6. 回調函數onopen/onmessage/onerror/onclose: 當相應的事件發生時會觸發此回調函數

參考：

https://blog.csdn.net/zwto1/article/details/52493119

https://yinqingwang.wordpress.com/2016/09/17/websocket%E5%8E%9F%E7%90%86%E5%8F%8A%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/