WebSocket與 Socket的區別

關於 WebSocket協議

• WebSocket是應用層協議, 基於 TCP協議的, 只需完成一次 Http請求, 就能與服務端建立持久性的連接, 進行數據雙向傳輸, 直到關閉請求, 此協議出來之前 Web應用只能通過 ajax輪詢或 long poll方式頻繁 Http請求, 來獲取實時數據, 導致嚴重浪費資源, 且 Http請求的 Head信息量也多, 併發壓力大的情況也無法保證短時間間隔, 遠不如通過 WebSocket協議實現的雙向數據傳輸方式

連接過程

1. WebSocket在首次 Http請求時請求頭裏主要包含

Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: permessage-deflate
Sec-WebSocket-Key: 7gcWknWVyxiBBua8ZCsfrQ==
Connection: Upgrade
Upgrade: websocket

• Connection: Upgrade和 Upgrade: websocket告知 Apache, Nginx等服務器要切換協議, 請求換成 WebSocket協議
• Sec-WebSocket-Version鎖定 WebSocket協議版本, 爲了避免不兼容
• Sec-WebSocket-Extensions用於協議擴展(增強)
• Sec-WebSocket-Key瀏覽器隨機生成的 Base64 encode值, 用於標識此次連接

2. 服務器響應頭信息

Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 96SudKfGB54Oo8FX2X3O3TeJRRk=

• Upgrade: websocket和 Connection: Upgrade告知瀏覽器協議切換成功
• Sec-WebSocket-Accept是將瀏覽器傳過去的 Sec-WebSocket-Key再次加密後返回給瀏覽器的, 用於證明連接成功

3. 通過 WebSocket協議實現的聊天室網站, 參考地址 https://getstream.io/chat/demos/team/

請求網址:wss://chat-us-east-1.stream-io-api.com/connect?json=%7B%22user_id%22%3A%22raspy-wave-1%22%2C%22user_details%22%3A%7B%22id%22%3A%22raspy-wave-1%22%2C%22name%22%3A%22Raspy%20wave%22%2C%22image%22%3A%22https%3A%2F%2Fgetstream.io%2Frandom_png%2F%3Fname%3DRaspy%2Bwave%22%7D%2C%22user_token%22%3A%22eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoicmFzcHktd2F2ZS0xIn0.FW-TvKdSgvKCu3cQLrYkHYn8vrz73gH8Dur0wYAFx1E%22%2C%22server_determines_connection_id%22%3Atrue%7D&api_key=gx5a64bj4ptz&authorization=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoicmFzcHktd2F2ZS0xIn0.FW-TvKdSgvKCu3cQLrYkHYn8vrz73gH8Dur0wYAFx1E&stream-auth-type=jwt&x-stream-client=stream-chat-javascript-client-browser-1.6.2
請求方法: GET
遠程地址: 52.71.169.154:443
狀態碼: 101 Switching Protocols
版本: HTTP/1.1

響應頭:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 96SudKfGB54Oo8FX2X3O3TeJRRk=

請求頭:
Host: chat-us-east-1.stream-io-api.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:76.0) Gecko/20100101 Firefox/76.0
Accept: */*
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate, br
Sec-WebSocket-Version: 13
Origin: https://getstream.io
Sec-WebSocket-Extensions: permessage-deflate
Sec-WebSocket-Key: 7gcWknWVyxiBBua8ZCsfrQ==
Connection: keep-alive, Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket

關於 Socket接口(網絡編程)

• 通常講的 Socket是網絡編程裏應用層與 TCP/UDP(傳輸層)之間的(抽象層)接口, 另外一個是 Unix操作系統中的文件系統
• 網絡編程的 Socket連接需要一對套接字(雙向通信的端點), 服務器端和客戶端, 之間的連接分爲三個步驟:

1. 服務器監聽: 服務器端不定位具體的客戶端, 處於等待連接的狀態, 實時監控網絡狀態
2. 客戶端請求: 由客戶端先請求連接, 將自己的套接字描述發給服務器端
3. 連接確認: 當服務器端監聽到或接收到客戶端的連接請求時, 服務器端先建立一個新的線程, 把服務器端的套接字描述發給客戶端, 最後客戶端確認此描述, 意味着建立了一個連接, 而服務器端套接字繼續處於監聽狀態, 繼續接收其他客戶端連接請求

• Socket連接可以指定兩種傳輸層協議, 即 TCP或 UDP, 當指定 TCP建立連接時, 該 Socket連接叫做 TCP連接, 而採用 UDP, 就叫 UDP連接, 非連接

簡單比較

• WebSocket與 Socket沒有任何關係. 就好像 Java與 JavaScript的關係
• WebSocket是應用層協議, 但 Socket網絡編程接口, 而不是協議
• 協議選擇上 WebSocket優先, 然後是通過 Socket接口實現 TCP, 或者實時性要求極高, 且可以容忍偶爾丟包的情況可以選擇 UDP

如果您覺得有幫助，歡迎點贊哦 ~ 謝謝!!