WebSocket 用法

下面首先以實際需求來引出本文主角WebSocket，然後再分步介紹它的特點。

比如在頁面指定區域會顯示一天的氣溫變化，如果當前氣溫發生變化，伺服器能夠實時推送。

使用HTTP(s)協議也可以實現此效果，但是未免有些笨拙，或者說效能欠佳，下面分步進行分析。

一.HTTP(s)協議請求特點：

此協議想必大家都非常熟悉，幾乎每天都會頻繁使用，應該對其有較深的使用體會。

當需要了解頁面最新更新內容，需要主動重新整理頁面獲取，而不是伺服器主動向頁面推送。

原因分析如下：

（1）.首先客戶端發起請求，伺服器端會給出一個響應，也就是說客戶端是主動方。

（2）.伺服器端在HTTP(s)協議下很難有優秀的手段向客戶端實時推送資訊。

（3）.並且HTTP(s)協議頭部資料量很大，但需要的資料通常較小，非常浪費頻寬。

二.HTTP(s)協議下的解決方案：

HTTP(s)協議下，實時獲取伺服器資料比較困難，且效能不佳。

下面分別介紹幾個模擬實現伺服器實時推送效果：

（1）.輪詢：

所謂的輪詢，就是每隔指定時間，從客戶端向伺服器傳送一次get請求。

如果伺服器有新資料，自然會被髮送到客戶端，如果沒有隻能空手而回。

也就是說，無論伺服器是否有新資料產生，都會按照指定頻率向伺服器傳送請求。

大致可以模擬一下如下場景：

客戶端：請問老闆有貨嗎

伺服器端：沒有貨

客戶端：請問老闆有貨嗎

伺服器端：沒有貨

客戶端：請問老闆有貨嗎

伺服器端：有貨，給你

客戶端：請問老闆有貨嗎

伺服器端：沒有貨

....

如此不斷的重複下去，無窮盡也，看著都感覺累。

很明顯上述方式效能不夠好，因為無論伺服器是否有資料產生，都會向伺服器傳送請求。

這完全是浪費效能，當然有一種比較完美的情況，那就是客戶端明確知道伺服器產生新資料的時間。

（2）.長輪詢：

從名稱看，此方法與輪詢帶有很大的相似性，事實也是如此。

通常客戶端會傳送一個get請求，如果伺服器端的確有新的資料，那麼將資料傳送回客戶端。

如果伺服器沒有新的資料，此時伺服器不會立馬給客戶端一個響應，而是保持此請求狀態，在一定時間段內，如果伺服器產生新的資料，那麼就將此新資料傳送回客戶端，如果超過指定時間，那麼此get請求狀態會超時，然後客戶端再傳送一次新的請求，如此往復。

大致可以模擬一下如下場景：

客戶端：請問老闆有貨嗎，沒貨的話我先等一會，但是不能超過10分鐘。

伺服器端：沒有貨，你等等吧

客戶端：等待狀態中...

伺服器端：久等了，終於來貨了，請拿好（在10分鐘之內）。

長輪詢與輪詢相比可以省卻一些不必要的請求，所以效能更佳優良，但是HTTP自身的缺點是無法避免的。

三.WebSocket實現期待效果：

本文不會對WebSocket具體用法做介紹，文章底部會給出對應的文章。

下面介紹一下WebSocket的特點進行一下介紹：

（1）.可以實現全雙工通訊，客戶端可以主動發起請求，伺服器也可以主動傳送資料。

（2）.採用的ws協議，如果進行加密則是wss協議，可以類比http與https。

（3）.頭部資料非常精簡，採用輕量級資料格式，所以與HTTP協議頭部相比，資料傳輸效率很高。

（4）.ws協議傳送資料的格式可以是字串，也可以是二進位制資料。

（5）.與http協議不同，ws協議不受同源策略的限制。

（6）.ws建立在TCP協議之上。

簡單程式碼演示如下：

[JavaScript] 純文字檢視 複製程式碼
wss://echo.websocket.org

關於WebSocket更多內容可以參閱如下幾篇文章：

（1）.WebSocket握手一章節。

（2）.WebSocket API一章節。

（3）.WebSocket程式碼演示一章節。