結合融雲 WebSDK 瞭解 WebSocket 基本原理

近期使用融雲開發聊天頁面, 經過抓包, 發現融雲 SDK 使用 WebSocket 實現與服務端通信, 所以簡單瞭解 WebSocket 的實現原理web

融雲 SDK 文檔: https://docs.rongcloud.cn/v4/ajax

WebSocket 與 HTTP

一、HTTP 協議沒有爲了 WebSocket 的出現改變瀏覽器

二、WebSocket 屬於 HTTP 以後的新協議安全

三、二者有交集, 也各有不一樣服務器

四、WebSocket 借用 HTTP 協議完成一部分握手websocket

WebSocket 握手

經過抓包融雲 WebSocket 請求, 重點關注如下幾個字段socket

以上爲發起 WebSocekt 請求抓包, 首先關注比 HTTP 多出的數值:性能

// 告知服務器, 發起的是 WebSocket 協議, 服務需進行 WebSocket 處理
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: aI0TsvW7jltfmNOF+1eSqg== // Base64, 瀏覽器隨機生成. 與後面服務端響應的 Sec-WebSocket-Accept 配套, 提供基本的防禦. 好比惡意的鏈接, 或者無心的鏈接
Sec-WebSocket-Version: 13 // 表示 websocket 的版本. 若是服務端不支持該版本, 須要返回一個 Sec-WebSocket-Versionheader, 裏面包含服務端支持的版本號

再查看 Response Headers:spa

Sec-WebSocket-Accept: OfEosYlCAcvV/jdwbW33VU0B50k= // 安全驗證. 根據客戶端請求首部 Sec-WebSocket-Key 計算 ( base64(sha1($Sec-WebSocket-Accept,'258EAFA5-E914-47DA-95CA-C5AB0DC85B11')) )
// 告知客戶端, 已成功升級爲 WebSocket
Upgrade: websocket
Connection: Upgrade

替代方案

瀏覽器沒有完美替代 WebSocket 的方案. 只能用 ajax 輪詢長輪訓(long poll) 模擬, 二者都有性能問題且耗費資源code

ajax 輪詢、長輪訓說明: [https://zhuanlan.zhihu.com/p/... 經過抓包, 發現融雲 SDK 使用 WebSocket 實現與服務端通信, 所以簡單瞭解 WebSocket 的實現原理

融雲 SDK 文檔: https://docs.rongcloud.cn/v4/

WebSocket 與 HTTP

一、HTTP 協議沒有爲了 WebSocket 的出現改變

二、WebSocket 屬於 HTTP 以後的新協議

三、二者有交集, 也各有不一樣

四、WebSocket 借用 HTTP 協議完成一部分握手

WebSocket 握手

經過抓包融雲 WebSocket 請求, 重點關注如下幾個字段

以上爲發起 WebSocekt 請求抓包, 首先關注比 HTTP 多出的數值:

// 告知服務器, 發起的是 WebSocket 協議, 服務需進行 WebSocket 處理
Upgrade: websocket
Connection: Upgrade

Sec-WebSocket-Key: aI0TsvW7jltfmNOF+1eSqg== // Base64, 瀏覽器隨機生成. 與後面服務端響應的 Sec-WebSocket-Accept 配套, 提供基本的防禦. 好比惡意的鏈接, 或者無心的鏈接
Sec-WebSocket-Version: 13 // 表示 websocket 的版本. 若是服務端不支持該版本, 須要返回一個 Sec-WebSocket-Versionheader, 裏面包含服務端支持的版本號

再查看 Response Headers:

Sec-WebSocket-Accept: OfEosYlCAcvV/jdwbW33VU0B50k= // 安全驗證. 根據客戶端請求首部 Sec-WebSocket-Key 計算 ( base64(sha1($Sec-WebSocket-Accept,'258EAFA5-E914-47DA-95CA-C5AB0DC85B11')) )

// 告知客戶端, 已成功升級爲 WebSocket
Upgrade: websocket
Connection: Upgrade

替代方案

瀏覽器沒有完美替代 WebSocket 的方案. 只能用 ajax 輪詢長輪訓(long poll) 模擬, 二者都有性能問題且耗費資源

ajax 輪詢、長輪訓說明: https://zhuanlan.zhihu.com/p/25690011

相關文章
相關標籤/搜索