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

首先，在這個網(wǎng)頁里面，HTML的部分相當(dāng)簡單，就是一個<H2>的標(biāo)題，和一個id為「output」的<div>，用來做輸出之用。而在網(wǎng)頁載入完成后，他會去執(zhí)行JavaScript的init()這個函數(shù)，開始進(jìn)行WebSocket的測試。

實際上WebSocket測試的程序，是寫在testWebSocket()這個函數(shù)里，它的使用方法相當(dāng)單純，首先就是要建立一個WebSocket的物件，也就是：
websocket = new WebSocket(wsUri);

在這邊，傳入的字串wsUri的內(nèi)容是「ws:// echo.websocket.org /」，目的是告訴瀏覽器，這個WebSoscket是要連到哪里；在這邊，就是連到WebSocket.org提供的測試Server。而這個URI前面的「ws://」，則是代表要使用WebSocket這種通訊協(xié)議，如果要使用加密的連線的話，則是要改成「wss://」。
后面的網(wǎng)址的部分，則也可以再加上連接埠、或是其他的路徑，來當(dāng)作進(jìn)一步的數(shù)據(jù)；例如：「ws://localhost:12345/websocket/ server.php」也是一種合法的URI （參考）。

而之后，這個建立出來的websocket物件，會有四種事件，分別為：
onopen
當(dāng)連線建立時，會被觸??發(fā)的事件
onmessage
當(dāng)收到Server 端發(fā)送的信息時，會被觸??發(fā)的事件
onclose
連線中斷時會被觸發(fā)的事件
onerror
出現(xiàn)錯誤時會被觸發(fā)的事件

這邊基本上就是要針對這四種事件，來做設(shè)置，讓程序可以在事件發(fā)生時，做對應(yīng)的動作。像在上面的范例程序里，就是設(shè)置當(dāng)這四種事件被觸發(fā)的時候，會去調(diào)用對應(yīng)的函數(shù)（例如，當(dāng)onopen的事件觸發(fā)的時候，就去調(diào)用onOpen()這個函數(shù)）。
而這個范例網(wǎng)頁用瀏覽器打開后，基本上應(yīng)該會看到下面的結(jié)果：
WebSocket Test

首先，當(dāng)建立了一個WebSocket連線后，接下來通常都會是因為能正確地連線，所以會出發(fā)到onopen的事件，所以會去執(zhí)行onOpen()這個函數(shù)；而這個函數(shù)所做的事，就是先輸出一個「CONNECTED」的字串，然后再調(diào)用doSend()這個函數(shù)，送出「WebSocket rocks」這個字串。

而實際上，要通過WebSocket來送出信息，也相當(dāng)簡單，只要調(diào)用WebSocket物件（websocket）的send()這個函數(shù)就可以了～

接下來，Server端的部分，應(yīng)該是設(shè)計成在收到client端送來的信息后，就原封不動地，把信息再送回給client端，所以接下來，這個網(wǎng)頁就會因為收到Server端送來的信息，而觸發(fā)到onmessage的事件，進(jìn)而調(diào)用onMessage()這個函數(shù)。

而在這個范例程序里，在收到Server端送來的信息（evt）后，就會把他的數(shù)據(jù)（evt.data）作輸出（上面藍(lán)色的字），并且調(diào)用WebSocket的close()函數(shù)，把這個連線給關(guān)閉。

而由于連線被關(guān)閉了，所以接下來則是會觸發(fā)到onclose的事件、進(jìn)而執(zhí)行onClose()這個函數(shù)；在這個函數(shù)里，基本上就是很簡單地輸出「DISCONNECTED」這個字串。
所以到上面為止，就是這個范例的基本概念了～基本上，他是在連線后、傳遞、接收一個信息后，馬上就把連線斷掉了；而如果再做修改，讓他可以持續(xù)地送信息的話，就可以做到「echo test」這個范例網(wǎng)頁里，可以持續(xù)傳遞、接收數(shù)據(jù)的功能了～而實際上，WebSocket的client端程序，大概也就是以這樣的概念來寫了。

另外，onmessage所收到的數(shù)據(jù)，實際上是一個MessageEvent的物件，它除了可以接收字串型別的數(shù)據(jù)外，其實也是可以接收Blob（參考）和ArrayBuffer（參考）這兩種形式的數(shù)據(jù)，所以在技術(shù)上，其實WebSocket是可以用來傳輸相當(dāng)復(fù)雜的東西的～

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