的標題,和一個id為「output」的
更新時間:2017-06-09 來源:黑馬程序員web前端培訓學院 瀏覽量:
首先,在這個網(wǎng)頁里面,HTML的部分相當簡單,就是一個<H2>的標題,和一個id為「output」的<div>,用來做輸出之用。而在網(wǎng)頁載入完成后,他會去執(zhí)行JavaScript的init()這個函數(shù),開始進行WebSocket的測試。
實際上WebSocket測試的程序,是寫在testWebSocket()這個函數(shù)里,它的使用方法相當單純,首先就是要建立一個WebSocket的物件,也就是:
websocket = new WebSocket(wsUri);
在這邊,傳入的字串wsUri的內(nèi)容是「ws:// echo.websocket.org /」,目的是告訴瀏覽器,這個WebSoscket是要連到哪里;在這邊,就是連到WebSocket.org提供的測試Server。而這個URI前面的「ws://」,則是代表要使用WebSocket這種通訊協(xié)議,如果要使用加密的連線的話,則是要改成「wss://」。
后面的網(wǎng)址的部分,則也可以再加上連接埠、或是其他的路徑,來當作進一步的數(shù)據(jù);例如:「ws://localhost:12345/websocket/ server.php」也是一種合法的URI (參考)。
而之后,這個建立出來的websocket物件,會有四種事件,分別為:
onopen
當連線建立時,會被觸??發(fā)的事件
onmessage
當收到Server 端發(fā)送的信息時,會被觸??發(fā)的事件
onclose
連線中斷時會被觸發(fā)的事件
onerror
出現(xiàn)錯誤時會被觸發(fā)的事件
這邊基本上就是要針對這四種事件,來做設置,讓程序可以在事件發(fā)生時,做對應的動作。像在上面的范例程序里,就是設置當這四種事件被觸發(fā)的時候,會去調用對應的函數(shù)(例如,當onopen的事件觸發(fā)的時候,就去調用onOpen()這個函數(shù))。
而這個范例網(wǎng)頁用瀏覽器打開后,基本上應該會看到下面的結果:
WebSocket Test
首先,當建立了一個WebSocket連線后,接下來通常都會是因為能正確地連線,所以會出發(fā)到onopen的事件,所以會去執(zhí)行onOpen()這個函數(shù);而這個函數(shù)所做的事,就是先輸出一個「CONNECTED」的字串,然后再調用doSend()這個函數(shù),送出「WebSocket rocks」這個字串。
而實際上,要通過WebSocket來送出信息,也相當簡單,只要調用WebSocket物件(websocket)的send()這個函數(shù)就可以了~
接下來,Server端的部分,應該是設計成在收到client端送來的信息后,就原封不動地,把信息再送回給client端,所以接下來,這個網(wǎng)頁就會因為收到Server端送來的信息,而觸發(fā)到onmessage的事件,進而調用onMessage()這個函數(shù)。
而在這個范例程序里,在收到Server端送來的信息(evt)后,就會把他的數(shù)據(jù)(evt.data)作輸出(上面藍色的字),并且調用WebSocket的close()函數(shù),把這個連線給關閉。
而由于連線被關閉了,所以接下來則是會觸發(fā)到onclose的事件、進而執(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ù),所以在技術上,其實WebSocket是可以用來傳輸相當復雜的東西的~
本文版權歸黑馬程序員web前端開發(fā)學院所有,歡迎轉載,轉載請注明作者出處,謝謝!
作者:黑馬程序員web前端培訓學院;
首發(fā):http://web.itheima.com/