首頁技術(shù)文章正文

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

更新時間:2017-06-15 來源:黑馬程序員web前端培訓(xùn)學(xué)院 瀏覽量:

最近因為有需要開發(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)頁或維基百科?;旧?,主要的瀏覽器,只要版本夠新,都是有支援的;比較大的問題,應(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/ 

分享到:
在線咨詢 我要報名
和我們在線交談!