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

更新時(shí)間:2017-04-14 來源:黑馬程序員Web前端培訓(xùn)學(xué)院瀏覽量:

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

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

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