WebSocket 通訊過程與實現

（點選上方公眾號，可快速關注）

來源：wzhvictor
segmentfault.com/a/1190000014643900

什麼是 WebSocket ？

WebSocket 是一種標準協議，用於在客戶端和服務端之間進行雙向資料傳輸。但它跟 HTTP 沒什麼關係，它是基於 TCP 的一種獨立實現。

以前客戶端想知道服務端的處理進度，要不停地使用 Ajax 進行輪詢，讓瀏覽器隔個幾秒就向伺服器發一次請求，這對伺服器壓力較大。另外一種輪詢就是採用 long poll 的方式，這就跟打電話差不多，沒收到訊息就一直不掛電話，也就是說，客戶端發起連線後，如果沒訊息，就一直不返回 Response 給客戶端，連線階段一直是阻塞的。

而 WebSocket 解決了 HTTP 的這幾個難題。當伺服器完成協議升級後（ HTTP -> WebSocket ），服務端可以主動推送資訊給客戶端，解決了輪詢造成的同步延遲問題。由於 WebSocket 只需要一次 HTTP 握手，服務端就能一直與客戶端保持通訊，直到關閉連線，這樣就解決了伺服器需要反覆解析 HTTP 協議，減少了資源的開銷。

隨著新標準的推進，WebSocket 已經比較成熟了，並且各個主流瀏覽器對 WebSocket 的支援情況比較好（不相容低版本 IE，IE 10 以下），有空可以看看。

使用 WebSocket 的時候，前端使用是比較規範的，js 支援 ws 協議，感覺類似於一個輕度封裝的 Socket 協議，只是以前需要自己維護 Socket 的連線，現在能夠以比較標準的方法來進行。

下面我們就結合上圖具體來聊一下 WebSocket 的通訊過程。

建立連線

客戶端請求報文 Header

客戶端請求報文：

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

與傳統 HTTP 報文不同的地方：

Upgrade: websocket
Connection: Upgrade

這兩行表示發起的是 WebSocket 協議。

Sec-WebSocket

-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

Sec-WebSocket-Key 是由瀏覽器隨機生成的，提供基本的防護，防止惡意或者無意的連線。

Sec-WebSocket-Version 表示 WebSocket 的版本，最初 WebSocket 協議太多，不同廠商都有自己的協議版本，不過現在已經定下來了。如果服務端不支援該版本，需要返回一個 Sec-WebSocket-Versionheader，裡面包含服務端支援的版本號。

建立 WebSocket 物件：

var ws = new websocket("ws://127.0.0.1:8001");

ws 表示使用 WebSocket 協議，後面接地址及埠

完整的客戶端程式碼：

<scripttype="text/javascript">
var ws;
var box = document.getElementById('box');
function startWS() {
ws = newWebSocket('ws://127.0.0.1:8001');
ws.onopen = function (msg) {
console.log('WebSocket opened!');
};
ws.onmessage = function (message) {
console.log('receive message: ' + message.data);
box.insertAdjacentHTML('beforeend', '<p>' + message.data + '</p>');
};
ws.onerror = function (error) {
console.log('Error: ' + error.name + error.number);
};
ws.onclose = function () {
console.log('WebSocket closed!');
};
}
function sendMessage() {
console.log('Sending a message...');
var text = document.getElementById('text');
ws.send(text.value);
}
window.onbeforeunload = function () {
ws.onclose = function () {}; // 首先關閉 WebSocket
ws.close()
};
</script>

服務端響應報文 Header

首先我們來看看服務端的響應報文：

HTTP/1.1101SwitchingProtocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

我們一行行來解釋：

首先，101 狀態碼錶示伺服器已經理解了客戶端的請求，並將通過 Upgrade 訊息頭通知客戶端採用不同的協議來完成這個請求；
然後， Sec-WebSocket-Accept 這個則是經過伺服器確認，並且加密過後的 Sec-WebSocket-Key；
最後， Sec-WebSocket-Protocol 則是表示最終使用的協議。

Sec-WebSocket-Accept 的計算方法：

將 Sec-WebSocket-Key 跟 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 拼接；
通過 SHA1 計算出摘要，並轉成 base64 字串。

注意： Sec-WebSocket-Key/ Sec-WebSocket-Accept 的換算，只能帶來基本的保障，但連線是否安全、資料是否安全、客戶端 / 服務端是否合法的 ws 客戶端、ws 服務端，其實並沒有實際性的保證。

建立主執行緒，用於實現接受 WebSocket 建立請求：

def create_socket():
# 啟動 Socket 並監聽連線
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
try:
sock.bind(('127.0.0.1', 8001))
# 作業系統會在伺服器 Socket 被關閉或伺服器程序終止後馬上釋放該伺服器的埠，否則作業系統會保留幾分鐘該埠。
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.listen(5)
exceptExceptionas e:
logging.error(e)
return
else:
logging.info('Server running...')
# 等待訪問
whileTrue:
conn, addr = sock.accept() # 此時會進入 waiting 狀態
data = str(conn.recv(1024))
logging.debug(data)
header_dict = {}
header, _ = data.split(r'\r\n\r\n', 1)
for line in header.split(r'\r\n')[1:]:
key, val = line.split(': ', 1)
header_dict[key] = val
if'Sec-WebSocket-Key'notin header_dict:
logging.error('This socket is not websocket, client close.')
conn.close()
return
magic_key = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
sec_key = header_dict['Sec-WebSocket-Key'] + magic_key
key = base64.b64encode(hashlib.sha1(bytes(sec_key, encoding='utf-8')).digest())
key_str = str(key)[2:30]
logging.debug(key_str)
response = 'HTTP/1.1 101 Switching Protocols\r\n' \
'Connection: Upgrade\r\n' \
'Upgrade: websocket\r\n' \
'Sec-WebSocket-Accept: {0}\r\n' \
'WebSocket-Protocol: chat\r\n\r\n'.format(key_str)
conn.send(bytes(response, encoding='utf-8'))
logging.debug('Send the handshake data')
WebSocketThread(conn).start()

進行通訊

服務端解析 WebSocket 報文

Server 端接收到 Client 發來的報文需要進行解析

Client 包格式

1.FIN: 佔 1bit

0：不是訊息的最後一個分片
1：是訊息的最後一個分片

2.RSV1, RSV2, RSV3：各佔 1bit

一般情況下全為 0。當客戶端、服務端協商採用 WebSocket 擴充套件時，這三個標誌位可以非 0，且值的含義由擴充套件進行定義。如果出現非零的值，且並沒有採用 WebSocket 擴充套件，連接出錯。

3.Opcode: 4bit

%x0：表示一個延續幀。當 Opcode 為 0 時，表示本次資料傳輸採用了資料分片，當前收到的資料幀為其中一個數據分片；
%x1：表示這是一個文字幀（text frame）；
%x2：表示這是一個二進位制幀（binary frame）；
%x3-7：保留的操作程式碼，用於後續定義的非控制幀；
%x8：表示連線斷開；
%x9：表示這是一個心跳請求（ping）；
%xA：表示這是一個心跳響應（pong）；
%xB-F：保留的操作程式碼，用於後續定義的控制幀。

4.Mask: 1bit

表示是否要對資料載荷進行掩碼異或操作。

WebSocket 通訊過程與實現

什麼是 WebSocket ？

建立連線

客戶端請求報文 Header

服務端響應報文 Header

進行通訊

服務端解析 WebSocket 報文

WebSocket 通訊過程與實現

小程式與java實現websocket通訊

Android BLE與終端通信（三）——client與服務端通信過程以及實現數據通信

一次完整的http的請求過程與https的實現

LVM原理與實現過程

Arduino與ROS通訊過程中"Lost sync with device, restarting..."錯誤

Netty4.x下使用HTTP與WebSocket通訊協議

Python使用Ctypes與C/C++ DLL檔案通訊過程介紹及例項分析

Dubbo原始碼分析：RPC協議實現-RPC過程與核心介面設計

MPPT演算法（恆定電壓、擾動觀察、電導增量）介紹與實現過程

瀏覽器與go語言的websocket通訊

C++ 百萬併發網路通訊引擎架構與實現視訊課程（雲盤下載）

最完整C++ 百萬併發網路通訊引擎架構與實現視訊課程

vue使用SockJS實現webSocket通訊

.NET Core微服務之路：利用DotNetty實現一個簡單的通訊過程

Activity與Fragment通訊多介面實現優化

VUE+SpringBoot+Apache2.4實現websocket通訊

Netty實現WebSocket通訊案例

[連載]《C#通訊（串列埠和網路）框架的設計與實現》- 0.前言

[連載]《C#通訊（串列埠和網路）框架的設計與實現》-2.框架的總體設計

WebSocket 通訊過程與實現

什麼是 WebSocket ？

建立連線

客戶端請求報文 Header

服務端響應報文 Header

進行通訊

服務端解析 WebSocket 報文

相關推薦