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

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

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

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

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

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

首先，當(dāng)建立了一個(gè)WebSocket連線后，接下來(lái)通常都會(huì)是因?yàn)槟苷_地連線，所以會(huì)出發(fā)到onopen的事件，所以會(huì)去執(zhí)行onOpen()這個(gè)函數(shù)；而這個(gè)函數(shù)所做的事，就是先輸出一個(gè)「CONNECTED」的字串，然后再調(diào)用doSend()這個(gè)函數(shù)，送出「WebSocket rocks」這個(gè)字串。

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

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

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

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

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

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