概念HTML5作為下一代WEB標準,擁有許多引人註目的新特性,如Canvas、本地存儲、多媒體編程介面、WebSocket 等等。今天我們就來看看具有“Web TCP”之稱的WebSocket.WebSocket的出現是基於Web應用的實時性需要而產生的。這種實時的Web應用大家應該不陌生,在生活中 ...
概念
HTML5作為下一代WEB標準,擁有許多引人註目的新特性,如Canvas、本地存儲、多媒體編程介面、WebSocket 等等。今天我們就來看看具有“Web TCP”之稱的WebSocket.
WebSocket的出現是基於Web應用的實時性需要而產生的。這種實時的Web應用大家應該不陌生,在生活中都應該用到過,比如新浪微博的評論、私信的通知,騰訊的WebQQ等。讓我們來回顧下實時 Web 應用的窘境吧。
在WebSocket出現之前,一般通過兩種方式來實現Web實時用:輪詢機制和流技術;其中輪詢有不同的輪詢,還有一種叫Comet的長輪詢。
輪詢:這是最早的一種實現實時 Web 應用的方案。客戶端以一定的時間間隔向服務端發出請求,以頻繁請求的方式來保持客戶端和伺服器端的同步。這種同步方案的缺點是,當客戶端以固定頻率向服務 器發起請求的時候,伺服器端的數據可能並沒有更新,這樣會帶來很多無謂的網路傳輸,所以這是一種非常低效的實時方案。
長輪詢:是對定時輪詢的改進和提高,目地是為了降低無效的網路傳輸。當伺服器端沒有數據更新的時候,連接會保持一段時間周期直到數據或狀態改變或者 時間過期,通過這種機制來減少無效的客戶端和伺服器間的交互。當然,如果服務端的數據變更非常頻繁的話,這種機制和定時輪詢比較起來沒有本質上的性能的提 高。
流:常就是在客戶端的頁面使用一個隱藏的視窗向服務端發出一個長連接的請求。伺服器端接到這個請求後作出回應並不斷更新連接狀態以保證客戶端和服務 器端的連接不過期。通過這種機制可以將伺服器端的信息源源不斷地推向客戶端。這種機制在用戶體驗上有一點問題,需要針對不同的瀏覽器設計不同的方案來改進 用戶體驗,同時這種機制在併發比較大的情況下,對伺服器端的資源是一個極大的考驗。
上述方式其實並不是真正的實時技術,只是使用了一種技巧來實現的模擬實時。在每次客戶端和伺服器端交互的時候都是一次 HTTP 的請求和應答的過程,而每一次的 HTTP 請求和應答都帶有完整的 HTTP 頭信息,這就增加了每次傳輸的數據量。但這些方式最痛苦的是開發人員,因為不論客戶端還是伺服器端的實現都很複雜,為了模擬比較真實的實時效果,開發人員 往往需要構造兩個HTTP連接來模擬客戶端和伺服器之間的雙向通訊,一個連接用來處理客戶端到伺服器端的數據傳輸,一個連接用來處理伺服器端到客戶端的數 據傳輸,這不可避免地增加了編程實現的複雜度,也增加了伺服器端的負載,制約了應用系統的擴展性。
基於上述弊端,實現Web實時應用的技術出現了,WebSocket通過瀏覽器提供的API真正實現了具備像C/S架構下的桌面系統的實時通訊能 力。其原理是使用JavaScript調用瀏覽器的API發出一個WebSocket請求至伺服器,經過一次握手,和伺服器建立了TCP通訊,因為它本質 上是一個TCP連接,所以數據傳輸的穩定性強和數據傳輸量比較小。
WebSocket 協議
WebSocket 協議本質上是一個基於 TCP 的協議。為了建立一個 WebSocket 連接,客戶端瀏覽器首先要向伺服器發起一個 HTTP 請求,這個請求和通常的 HTTP 請求不同,包含了一些附加頭信息,其中附加頭信息”Upgrade: WebSocket”表明這是一個申請協議升級的 HTTP 請求,伺服器端解析這些附加的頭信息然後產生應答信息返回給客戶端,客戶端和伺服器端的 WebSocket 連接就建立起來了,雙方就可以通過這個連接通道自由的傳遞信息,並且這個連接會持續存在直到客戶端或者伺服器端的某一方主動的關閉連接。