的標(biāo)題,和一個(gè)id為「output」的
,用來(lái)做輸出之用。而在網(wǎng)頁(yè)載入完成后,他會(huì)去執(zhí)行JavaScript的init()這個(gè)函數(shù),開(kāi)始進(jìn)行WebSocket的測(cè)試。" /> 国产精品兄妹在线观看麻豆,18禁超污无遮挡无码免费网站国产,少妇人妻偷人精品一区二区

全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

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

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

首先,在這個(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è)試的程序,是寫(xiě)在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é)議,如果要使用加密的連線(xiàn)的話(huà),則是要改成「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)連線(xiàn)建立時(shí),會(huì)被觸??發(fā)的事件
onmessage
當(dāng)收到Server 端發(fā)送的信息時(shí),會(huì)被觸??發(fā)的事件
onclose
連線(xiàn)中斷時(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連線(xiàn)后,接下來(lái)通常都會(huì)是因?yàn)槟苷_地連線(xià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è)連線(xiàn)給關(guān)閉。

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

另外,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/ 

分享到:
和我們?cè)诰€(xiàn)交談!