默認
打賞 發表評論 4
八問WebSocket協議:為你快速解答WebSocket熱門疑問
閱讀(6363) | 評論(4 收藏1 淘帖1 2

本文由“小姐姐養的狗”原創發布于“小姐姐味道”公眾號,原題《WebSocket協議 8 問》,即時通訊網收錄時有優化和改動。感謝原作者的分享。


一、引言


WebSocket是一種比較新的協議,它是伴隨著html5規范而生的,雖然還比較年輕,但大多主流瀏覽器都已經支持。它使用方便、應用廣泛,已經滲透到前后端開發的各種場景中。

對http一問一答中二式流程(就是從所周之的“長輪詢”技要啦)的不滿,催生了支持雙向通信的WebSocket誕生。WebSocket是個不太干凈協議。

本文將從8個常見的疑問入手,為還不了解WebSocket協議的開發者快速普及相關知識,從而節省您學習WebSocket的時間。

另外,如果您對Web端的即時通訊技術還完全不了解,那么《新手入門貼:詳解Web端即時通訊技術的原理》、《Web端即時通訊技術盤點:短輪詢、Comet、Websocket、SSE》這兩篇文章請您務必抽時間讀一讀。

二、參考文章



三、更多資料


Web端即時通訊新手入門貼:
新手入門貼:詳解Web端即時通訊技術的原理

Web端即時通訊技術盤點請參見:
Web端即時通訊技術盤點:短輪詢、Comet、Websocket、SSE

關于Ajax短輪詢:
找這方面的資料沒什么意義,除非忽悠客戶,否則請考慮其它3種方案即可。

有關Comet技術的詳細介紹請參見:
Comet技術詳解:基于HTTP長連接的Web端實時通信技術
WEB端即時通訊:HTTP長連接、長輪詢(long polling)詳解
WEB端即時通訊:不用WebSocket也一樣能搞定消息的即時性
開源Comet服務器iComet:支持百萬并發的Web端即時通訊方案

更多WebSocket的詳細介紹請參見:
新手快速入門:WebSocket簡明教程
Socket.IO介紹:支持WebSocket、用于WEB端的即時通訊的框架
socket.io和websocket 之間是什么關系?有什么區別?

有關SSE的詳細介紹文章請參見:
SSE技術詳解:一種全新的HTML5服務器推送事件技術

更多WEB端即時通訊文章請見:
http://www.emxvra.tw/forum.php?mod=collection&action=view&ctid=15

四、1問WebSocket:WebSocket協議只能瀏覽器發起么?


不是。目前此協議的受眾的也不僅僅是web開發者。

WebSocket只是一種協議,它和http協議一樣,使用類似okhttp的組件,可以在任何地方進行調用,甚至可以借助WebSocket實現RPC框架。

八問WebSocket協議:為你快速解答WebSocket熱門疑問_1.jpg

五、2問WebSocket:WebSocket和HTTP什么關系?


WebSocket和http一樣,都是處于OSI模型中的最高層:應用層。

八問WebSocket協議:為你快速解答WebSocket熱門疑問_2.jpg

WebSocket借助http協議進行握手,握手成功后,就會變身為TCP通道,從此與http不再相見。

使用netstat或者ss,能夠看到對應的連接,它與處于抽象層的socket,在外觀上沒有區別。

更多WebSocket和HTTP的關系,以及與Socket的區別,可進一步閱讀以下文章:


六、3問WebSocket:WebSocket和長輪詢有什么區別?


長輪詢,就是客戶端發送一個請求,服務端將一直在這個連接上等待(當然有一個超長的超時時間),直到有數據才返回,它依然是一個一問一答的模式。比如著名的comted。

WebSocket在握手成功后,就是全雙工的TCP通道,數據可以主動從服務端發送到客戶端,處于鏈接兩端的應用沒有任何區別。

WebSocket創建的連接和Http的長連接是不一樣的。由于Http長連接底層依然是Http協議,所以它還是一問一答,只是Hold住了一條命長點的連接而已。

長輪詢和Http長連接是阻塞的I/O,但WebSocket可以是非阻塞的(具體是多路復用)。

八問WebSocket協議:為你快速解答WebSocket熱門疑問_3.jpg

這方面更深入的資料,請進一步學習:


七、4問WebSocket:如何創建一個WebSocket連接?


WebSocket的連接創建是借助Http協議進行的。這樣設計主要是考慮兼容性,在瀏覽器中就可以很方便的發起請求,看起來比較具有迷惑性。

下圖是一個典型的由瀏覽器發起的ws請求,可以看到和http請求長的是非常相似的。

但是,它只是請求階段長得像而已:
八問WebSocket協議:為你快速解答WebSocket熱門疑問_4.jpg

請求的地址,一般是:ws://\*\*\*,或者是使用了SSL/TLS加密的安全協議wss:,用來標識是WebSocket請求。

  • 1)首先,通過Http頭里面的Upgrade域,請求進行協議轉換。如果服務端支持的話,就可以切換到WebSocket協議。簡單點講:連接已經在那了,通過握手切換成ws協議,就是切換了連接的一個狀態而已。
  • 2)Connection域可以認為是與Upgrade域配對的頭信息。像nginx等代理服務器,是要先處理Connection,然后再發起協議轉換的。
  • 3)Sec-WebSocket-Key 是隨機的字符串,服務器端會用這些數據來構造出一個 SHA-1 的信息摘要。如此操作,可以盡量避免普通 HTTP 請求被誤認為 WebSocket 協議。

其他的,像Sec-WebSocket*字樣的頭信息,表明了客戶端支持的子協議以及其他信息。像loT中很流行的mqtt,就可以作為WebSocket的子協議。

八問WebSocket協議:為你快速解答WebSocket熱門疑問_5.jpg

使用javascript,可以很容易連接一個WebSocket服務端:
<script>
  var ws = new WebSocket('ws://localhost:80');
  ws.onopen = function () {
    console.log('ws onopen');
    ws.send('from client: hello');
  };
  ws.onmessage = function (e) {
    console.log('ws onmessage');
    console.log('from server: ' + e.data);
  };
  ...
</script>

更詳細的資料,請閱讀:《WebSocket詳解(三):深入WebSocket通信協議細節》。

八、5問WebSocket:WebSocket如何處理數據?


WebSocket是通過事件通知的方式運行的。它包含四個事件和兩個動作(發送和關閉)。

WebSocket的事件:
事件
鉤子
備注
openonopen連接建立時觸發
messageonmessage客戶端接收服務端數據時觸發
erroronerror通信發生錯誤時觸發
closeonclose連接關閉時觸發
數據可直接通過Socket.send()方法進行傳輸。

通過chrome的Inspect->Network->WS,可以看到頁面上的WebSocket連接。

如圖Opcode為2,表明它是一個二進制幀:
八問WebSocket協議:為你快速解答WebSocket熱門疑問_6.jpg

WebSocket有類似tcp協議的幀格式,在此不做過多解釋。(可以詳細閱讀:《理論聯系實際:從零理解WebSocket的通信原理、協議格式、安全性

參考:https://tools.ietf.org/html/rfc6455#section-5.1

九、6問WebSocket:如何使用Nginx做WebSocket的負載均衡?


nginx官網已經給出了例子。主要是Upgrade和Connection頭的設置。

Nginx的中的配置如下:
map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

location /chat/ {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

需要注意的是,nginx做負載均衡,不需要配置ip_hash等參數,nginx天然支持。由于ip_hash僅使用ip地址的前三個數字做hash,還有可能造成服務端的不均衡。

特別注意:

在IM聊天系統場景下,Nginx提供給WebSocket的這種所謂的“負載均衡”,只能解決傳統分布系統中的SLB服務器要做的事。

通俗地說,Nginx只能幫助完成引導WebSocket客戶連接到哪一個WebSocket服務端實例,在IM集群情況下,如果兩個用戶處于不同的WebSocket實例下時,它們之間的跨實例通信,Nginx是沒有辦法實現的,這一塊的邏輯還是得IM開發者自已來實現。

總而言之,Nginx提供給WebSocket的所謂“負載均衡”,并不是IM開發者認為的那種全功能集群!


十、7問WebSocket:Java服務端怎么實現WebSocket?


可以使用javax.WebSocket下的包,簡單的實現ws服務端。目前基本可以通過注解的方式去編寫代碼,比如ServerEndpoint。

推薦使用基于netty的netty-socketio進行服務端的編寫。由于使用的是netty,所以能夠在多個層面進行切入,獲取一些統計數據,執行一些控制指令。socketio是一套解決方案,它有多個語言的客戶端,并處理了市面上大多數的兼容問題。

友情忠告:socket.io幾乎是市面上最好的開源WebSocket解決方案,但netty-socketio這個開源工程并非socket.io官方團隊維護,而對于socket.io這個版本帝來說,其他的非官方版本能不能即時跟進,也是一個需要考慮的風險因素。

十一、8問WebSocket:WebSocket能干些啥?


1)通知功能:

保持一個長連接,當服務端游新的消息,能夠實時的推送到使用方。像知乎的點贊通知、評論等,都可以使用WebSocket通信。

某些使用H5的客戶端,為了簡化開發,也會使用WebSocket進行消息的通知,由于它是實時推送的,會有更好的用戶體驗。

2)數據收集:

一些次優級別的數據,比如行為日志、trace、異常執棧收集等,都可以開辟專門的WebSocket通道進行傳輸。這能夠增加信息的集中度,并能及時的針對用戶的行為進行合適的配置推送。由于大多數瀏覽器內核都支持,它將使客戶端APM編程模型變得簡單。

3)加密 && 認證:

雖然使用Fiddler、Charles等能夠抓到很多WebSocket包。但如果同時開啟SSL,傳輸加密后的二進制數據,會大幅增加破解的成本,會安全的多。

4)反向控制鉤子:

這個...由于是雙工長連接,服務端完全可以推送一些鉤子命令,甚至直接是代碼,在客戶端進行執行。比如截個屏,錄個音,種個小馬。用戶只要通過了授權申請,剩下的就隨你發揮了。

支付寶偷偷調用你的相機給你拍照的梗,我是相信的。

十二:本文小結


想當年,cometd的出現,驚為天人,振奮了很久。但技術日新月異,cometd已經衰老,而Socket.io得到了快速發展。WebSocket經過一段時間的混沌期,規范已經越來越完善,使用也越來越方便,不需要再處理那么多的兼容。

但它的本質,還是新瓶裝舊酒,換湯不換藥。WebSocket的發展得益于HTML5規范的制定。規范的意義,就是約束廠商們天馬行空的實現,以及指明發展的方向。

這當然有典型的反例,那就是ie。現在,只有一群公認的**,還堅持在用。

附錄:更多WEB端即時通訊資料


新手入門貼:史上最全Web端即時通訊技術原理詳解
Web端即時通訊技術盤點:短輪詢、Comet、Websocket、SSE
SSE技術詳解:一種全新的HTML5服務器推送事件技術
Comet技術詳解:基于HTTP長連接的Web端實時通信技術
新手快速入門:WebSocket簡明教程
WebSocket詳解(一):初步認識WebSocket技術
WebSocket詳解(二):技術原理、代碼演示和應用案例
WebSocket詳解(三):深入WebSocket通信協議細節
WebSocket詳解(四):刨根問底HTTP與WebSocket的關系(上篇)
WebSocket詳解(五):刨根問底HTTP與WebSocket的關系(下篇)
WebSocket詳解(六):刨根問底WebSocket與Socket的關系
socket.io實現消息推送的一點實踐及思路
LinkedIn的Web端即時通訊實踐:實現單機幾十萬條長連接
Web端即時通訊技術的發展與WebSocket、Socket.io的技術實踐
Web端即時通訊安全:跨站點WebSocket劫持漏洞詳解(含示例代碼)
開源框架Pomelo實踐:搭建Web端高性能分布式IM聊天服務器
使用WebSocket和SSE技術實現Web端消息推送
詳解Web端通信方式的演進:從Ajax、JSONP 到 SSE、Websocket
MobileIMSDK-Web的網絡層框架為何使用的是Socket.io而不是Netty?
理論聯系實際:從零理解WebSocket的通信原理、協議格式、安全性
微信小程序中如何使用WebSocket實現長連接(含完整源碼)
八問WebSocket協議:為你快速解答WebSocket熱門疑問
>> 更多同類文章 ……

即時通訊網 - 即時通訊開發者社區! 來源: - 即時通訊開發者社區!

本帖已收錄至以下技術專輯

推薦方案
評論 4
第二句,使用方便而不是使用方面。
引用:登至必極 發表于 2019-04-27 17:52
第二句,使用方便而不是使用方面。

多謝糾錯,已修訂
簽名: 《拿起鍵盤就是干:跟我一起徒手開發一套分布式IM系統》:http://www.emxvra.tw/thread-2775-1-1.html
這個網站真的太精彩了,最近業務需要涉及im,看里面文章越看越有味道,點贊&#128077;
引用:Remember 發表于 2019-04-30 11:32
這個網站真的太精彩了,最近業務需要涉及im,看里面文章越看越有味道,點贊&#128077;

簽名: 《拿起鍵盤就是干:跟我一起徒手開發一套分布式IM系統》:http://www.emxvra.tw/thread-2775-1-1.html
打賞樓主 ×
使用微信打賞! 使用支付寶打賞!

返回頂部
777彩票走势图表