簡介: 本文主要介紹了 HTML5 WebSocket 的原理以及它給實時 Web 開發帶來的革命性的創新,並通過一個 WebSocket 服務器和客戶端的案例來充分展示 WebSocket 的強大和易用。
作為下一代的 Web 標准,HTML5 擁有許多引人注目的新特性,如 Canvas、本地存儲、多媒體編程接口、WebSocket 等等。這其中有“Web 的 TCP ”之稱的 WebSocket 格外吸引開發人員的注意。WebSocket 的出現使得浏覽器提供對 Socket 的支持成為可能,從而在浏覽器和服務器之間提供了一個基於 TCP 連接的雙向通道。Web 開發人員可以非常方便地使用 WebSocket 構建實時 web 應用,開發人員的手中從此又多了一柄神兵利器。本文首先介紹 HTML5 WebSocket 的基本概念以及這個規范試圖解決的問題,然後介紹 WebSocket 的基本原理和編程接口。接下來會通過一個簡單案例來示范怎樣實現一個 WebSocket 應用,並且展示 WebSocket 如何在功能強大和編程簡單易用上達到的完美統一。最後介紹了目前主流浏覽器對 WebSocket 支持的狀況、局限性以及未來的展望。
實時 Web 應用的窘境
Web 應用的信息交互過程通常是客戶端通過浏覽器發出一個請求,服務器端接收和審核完請求後進行處理並返回結果給客戶端,然後客戶端浏覽器將信息呈現出來,這種機制對於信息變化不是特別頻繁的應用尚能相安無事,但是對於那些實時要求比較高的應用來說,比如說在線游戲、在線證券、設備監控、新聞在線播報、RSS 訂閱推送等等,當客戶端浏覽器准備呈現這些信息的時候,這些信息在服務器端可能已經過時了。所以保持客戶端和服務器端的信息同步是實時 Web 應用的關鍵要素,對 Web 開發人員來說也是一個難題。在 WebSocket 規范出來之前,開發人員想實現這些實時的 Web 應用,不得不采用一些折衷的方案,其中最常用的就是輪詢 (Polling) 和 Comet 技術,而 Comet 技術實際上是輪詢技術的改進,又可細分為兩種實現方式,一種是長輪詢機制,一種稱為流技術。下面我們簡單介紹一下這幾種技術:
輪詢:
這是最早的一種實現實時 Web 應用的方案。客戶端以一定的時間間隔向服務端發出請求,以頻繁請求的方式來保持客戶端和服務器端的同步。這種同步方案的最大問題是,當客戶端以固定頻率向服務器發起請求的時候,服務器端的數據可能並沒有更新,這樣會帶來很多無謂的網絡傳輸,所以這是一種非常低效的實時方案。
長輪詢:
長輪詢是對定時輪詢的改進和提高,目地是為了降低無效的網絡傳輸。當服務器端沒有數據更新的時候,連接會保持一段時間周期直到數據或狀態改變或者時間過期,通過這種機制來減少無效的客戶端和服務器間的交互。當然,如果服務端的數據變更非常頻繁的話,這種機制和定時輪詢比較起來沒有本質上的性能的提高。
流:
流技術方案通常就是在客戶端的頁面使用一個隱藏的窗口向服務端發出一個長連接的請求。服務器端接到這個請求後作出回應並不斷更新連接狀態以保證客戶端和服務器端的連接不過期。通過這種機制可以將服務器端的信息源源不斷地推向客戶端。這種機制在用戶體驗上有一點問題,需要針對不同的浏覽器設計不同的方案來改進用戶體驗,同時這種機制在並發比較大的情況下,對服務器端的資源是一個極大的考驗。
綜合這幾種方案,您會發現這些目前我們所使用的所謂的實時技術並不是真正的實時技術,它們只是在用 Ajax 方式來模擬實時的效果,在每次客戶端和服務器端交互的時候都是一次 HTTP 的請求和應答的過程,而每一次的 HTTP 請求和應答都帶有完整的 HTTP 頭信息,這就增加了每次傳輸的數據量,而且這些方案中客戶端和服務器端的編程實現都比較復雜,在實際的應用中,為了模擬比較真實的實時效果,開發人員往往需要構造兩個 HTTP 連接來模擬客戶端和服務器之間的雙向通訊,一個連接用來處理客戶端到服務器端的數據傳輸,一個連接用來處理服務器端到客戶端的數據傳輸,這不可避免地增加了編程實現的復雜度,也增加了服務器端的負載,制約了應用系統的擴展性。