WEB前端培訓(xùn)之HTML5 WebSocket Client使用詳解1

最近因?yàn)橛行枰_發(fā)互動式網(wǎng)頁，而且又需要頻繁地和server端坐溝通，所以除了ajax之外，也開始研究一些新的東西；而其中一個，就是可以更節(jié)省頻寬的WebSocket、這個HTML 5的通訊方法了～
關(guān)于WebSocket的介紹，建議慶直接參考維基百科，或是WebSocket.org的介紹；完整的API則可以參考W3C的網(wǎng)頁。在Heresy來看，WebSocket和傳統(tǒng)的HTML數(shù)據(jù)取得的方法相比，最大的好處，就是由于WebSocket是建立一個持續(xù)性的連線，不需要重復(fù)地不斷建立連線，所以可以有效地降低延遲、并且減少數(shù)據(jù)的傳輸輛。
像右圖就是WebSocket.org所提供的示意圖，可以看到隨著要求存取的次數(shù)的增加，傳統(tǒng)的「Polling」的數(shù)據(jù)存取方法所需的頻寬會上升地非常地快；相較之下，WebSocket的頻寬則可以省非常地多。

另外，由于WebSocket在建立后，可以真正地由Server端主動送數(shù)據(jù)給client（瀏覽器），所以也可以避免掉一來一往之間的延遲。下方就是WebSocket.org的示意圖：
而目前支援WebSocket的瀏覽器列表，可以參考：Can I Use這個網(wǎng)頁或維基百科?；旧希饕臑g覽器，只要版本夠新，都是有支援的；比較大的問題，應(yīng)該會是IE要到10.0才有支援，而Android內(nèi)建的瀏覽器則完全沒有支援。

WebSocket的Client端，一般就是使用JavaScript來做撰寫，然后在瀏覽器內(nèi)執(zhí)行；他的基本使用也相當(dāng)簡單，在WebSocket.org的網(wǎng)站里，就有提供一個「Echo Test」的網(wǎng)頁，算是可以做最基本的說明了～他的范例源代碼如下（Heresy自己有略做修改）：

本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：黑馬程序員web前端培訓(xùn)學(xué)院；
首發(fā)：http://web.itheima.com/