第15章強(qiáng)大的websocket雙向通信

第15章強(qiáng)大的WebSocket雙向通信傳統(tǒng)的Web應(yīng)用程序中，服務(wù)器無(wú)法主動(dòng)地向?yàn)g覽器推送的數(shù)據(jù)，需要瀏覽器先發(fā)出請(qǐng)求才能返回?cái)?shù)據(jù)。如果要獲取實(shí)時(shí)的數(shù)據(jù)，通常會(huì)使用輪詢等方式不斷的請(qǐng)求服務(wù)器，但這種做法有著致命的缺陷。所幸的是，HTML5規(guī)范提供一種全新的雙工通信模塊——WebSocket，它可以為瀏覽器與服務(wù)器之間提供一個(gè)全雙工的通信信道，雙方可以通過(guò)這個(gè)信道直接向?qū)Ψ綄?shí)時(shí)的發(fā)送數(shù)據(jù)，而不需要再次請(qǐng)求連接。本章將詳細(xì)介紹與WebSocket相關(guān)的概念、基本原理和編程接口。15.1WebSocket概述

下面簡(jiǎn)單介紹WebSocket的概念及面臨的問(wèn)題等相關(guān)的內(nèi)容。WebSocket簡(jiǎn)介實(shí)時(shí)Web應(yīng)用面臨的問(wèn)題WebSocket的優(yōu)勢(shì)15.1.1WebSocket簡(jiǎn)介WebSocket是一種基于一個(gè)TCP連接全雙工的通信技術(shù)，主要是在瀏覽器和服務(wù)器之間提供一種雙向通信的解決方案。它通過(guò)簡(jiǎn)單的握手協(xié)議，建立一個(gè)長(zhǎng)連接，然后按照協(xié)議的規(guī)則進(jìn)行數(shù)據(jù)的傳輸。WebSocket包含兩個(gè)方面的內(nèi)容：一方面是WebSocket協(xié)議，主要是用于在瀏覽器與服務(wù)器之間建立通信；另一方面是瀏覽器中的WebSocket編程接口，用于網(wǎng)頁(yè)的Javascript腳本編程。WebSocket協(xié)議可以使用任何服務(wù)端的編程語(yǔ)言來(lái)實(shí)現(xiàn)。只有瀏覽器和服務(wù)器都遵循了同樣的該協(xié)議，才能建立起TCP連接，才可以有后續(xù)的通信。WebSocket編程接口，主要是用于瀏覽器客戶端的Javascript編程開(kāi)發(fā)的。前端開(kāi)發(fā)人員可以通過(guò)該接口提供的一些操作，訪問(wèn)提供了WebSocket的服務(wù)器，從而實(shí)現(xiàn)與服務(wù)器實(shí)時(shí)的通信。15.1.2實(shí)時(shí)Web應(yīng)用面臨的問(wèn)題

關(guān)于實(shí)時(shí)的Web應(yīng)用的嘗試：輪詢，是最早的一種實(shí)現(xiàn)實(shí)時(shí)Web應(yīng)用的方案。瀏覽器以一定的時(shí)間間隔向服務(wù)端發(fā)出請(qǐng)求，以頻繁請(qǐng)求的方式來(lái)保持客戶端和服務(wù)器端的同步。輪詢的最大問(wèn)題是，就是對(duì)于更新數(shù)據(jù)時(shí)間間隔不確定的服務(wù)器，會(huì)產(chǎn)生大量無(wú)用的請(qǐng)求，不但浪費(fèi)網(wǎng)絡(luò)帶寬，而且還會(huì)白白增加服務(wù)器的壓力，所以這是一種非常低效的實(shí)時(shí)方案。長(zhǎng)輪詢，是指打開(kāi)一條連接以后保持，等待服務(wù)器推送來(lái)數(shù)據(jù)再關(guān)閉的方式。長(zhǎng)輪詢是對(duì)輪詢技術(shù)的改進(jìn)和提高，大幅度的減少了無(wú)用的請(qǐng)求。然而當(dāng)服務(wù)器的數(shù)據(jù)更新比較頻繁時(shí)，與一般的輪詢相比，長(zhǎng)輪詢并沒(méi)有實(shí)質(zhì)的性能改善。iframe流，就是在頁(yè)面中插入一個(gè)隱藏的iframe，通過(guò)其屬性src向服務(wù)器發(fā)出一個(gè)完整的HTTP請(qǐng)求。而服務(wù)器收到請(qǐng)求后會(huì)打開(kāi)一個(gè)保持連接狀態(tài)的響應(yīng)，這個(gè)連接狀態(tài)會(huì)一直保持下去，永不過(guò)期，服務(wù)器可以通過(guò)這個(gè)連接源源不斷的給瀏覽器發(fā)送信息。然而，當(dāng)面對(duì)很多這樣的長(zhǎng)連接時(shí)，對(duì)服務(wù)器資源是一個(gè)極大的考驗(yàn)。15.1.3WebSocket的優(yōu)勢(shì)

面對(duì)實(shí)時(shí)的Web應(yīng)用，WebSocket提供了便捷實(shí)現(xiàn)方式，有以下優(yōu)勢(shì)：首先，是降低不必要網(wǎng)絡(luò)開(kāi)銷。其次，是降低服務(wù)器的壓力。再次，是信息反饋更加及時(shí)。另外，穿越代理和防火墻的能力。最后，開(kāi)發(fā)簡(jiǎn)單方便。15.2WebSocket協(xié)議WebSocket握手協(xié)議15.2.1WebSocket握手協(xié)議WebSocket協(xié)議實(shí)際上是一個(gè)基于TCP的協(xié)議。WebSocket協(xié)議訂立了HTTP握手的行為來(lái)將已經(jīng)存在的HTTP連接升級(jí)為WebSocket連接。以draft-ietf-hybi-thewebsocketprotocol-10版本來(lái)描述WebSocket協(xié)議。15.2.2瀏覽器的支持情況由于WebSocket協(xié)議還在不斷的完善中，不同瀏覽器的不能版本所支持的協(xié)議都有所差別。ProtocolIEFirefoxChromeSafariOperaNetFronthixie-7545.0.0hixie-76

hybi-004.0(DISABLED)0(DISABLED)hybi-06HTML5Labsdevhybi-076.0hybi-09HTML5Labshybi-10IE1071415.3WebSocket編程接口(1)

本節(jié)將介紹一下基于WebSocket的腳本編程。1.編程接口簡(jiǎn)介(略)2.構(gòu)造函數(shù)

varsocket=newWebSocket(url,protocols);3.接口屬性（1）URL(只讀)：獲取完成構(gòu)造函數(shù)解析的結(jié)果地址。（2）readyState(只讀)：獲取連接的狀態(tài)（3）bufferedAmount(只讀)：獲取發(fā)送前緩沖的尚未發(fā)送的應(yīng)用程序的字節(jié)數(shù)。（4）extensions(只讀)：獲取服務(wù)器選擇的擴(kuò)展。（5）protocol(只讀)：獲取服務(wù)器選擇的子協(xié)議。（6）binaryType：獲取/設(shè)置二進(jìn)制類型。15.3WebSocket編程接口(2)4.接口方法（1）send()：發(fā)送消息

socket.send(data);（2）close()：關(guān)閉連接

socket.close();5.接口事件message：當(dāng)瀏覽器收到來(lái)自服務(wù)器的消息時(shí)觸發(fā)的事件。open：當(dāng)WebSocket連接已經(jīng)建立，并且可以進(jìn)行通信時(shí)觸發(fā)的事件。close：當(dāng)關(guān)閉連接時(shí)觸發(fā)的事件。error：當(dāng)有任何的錯(cuò)誤產(chǎn)生時(shí)觸發(fā)的事件。6.從協(xié)議反饋的過(guò)程(即規(guī)范的邏輯，略)15.4使用WebSocket編程

本節(jié)介紹WebSocket的具體使用方法。1.檢測(cè)瀏覽器的支持情況

if(!window.WebSoket){ console.log("您的瀏覽器支持WebSocket!"); }else{ console.log("您的瀏覽器不支持WebSocket。"); }2.建立連接

socket=newWebSocket("ws://localhost:8090/chat”);

URL地址，是以“ws://”和“wss://”開(kāi)始的。15.4使用WebSocket編程3.添加狀態(tài)監(jiān)聽(tīng)事件和消息監(jiān)聽(tīng)事件

socket.onopen=function(){console.log("連接已經(jīng)建立");} socket.onclose=function(){console.log("連接已經(jīng)關(guān)閉");} socket.onerror=function(){console.log("發(fā)送錯(cuò)誤");} socket.onmessage=function(evt){ console.log("收到來(lái)自服務(wù)器的消息："+evt.data); }4.發(fā)送信息

socket.send("Hello,World!”);5.關(guān)閉連接

socket.close();15.5實(shí)驗(yàn)室：構(gòu)建實(shí)時(shí)的聊天應(yīng)用案例簡(jiǎn)介 聊天頁(yè)面主要包含三個(gè)功能：首先，通過(guò)單擊“連接”按鈕，與WebSocket服務(wù)器建立連接；其次是顯示聊天室產(chǎn)生的消息；最后就是發(fā)送聊天消息的功能。本節(jié)將通過(guò)一個(gè)聊天示例來(lái)鞏固前面學(xué)習(xí)的WebSocket知識(shí)。15.6小結(jié)本章主要講解了HTML5的WebSocket雙向通信。重點(diǎn)講解了WebSocket的概念，和WebSocket的編程接口，并詳細(xì)講解了如何使用接口構(gòu)建一個(gè)實(shí)時(shí)的聊天