【Html5 WebSocket】WebSocket事件，html5websocket事件

【Html5 WebSocket】WebSocket事件，html5websocket事件

《HTML5 WebSocket權威指南》學習筆記&2

上一篇：【Html5 WebSocket】WebSocket建構函式

WebSocket事件

WebSocket編程遵循非同步編程模式，只要WebSocket的串連已開啟，應用程式就開始監聽事件。用戶端不需要主動輪詢伺服器擷取更多資訊。下面是WebSocket對象的四個不同的監聽器：

• open
• message
• error
• close

上述四個事件同所有的Web API一樣，可以通過on<事件名稱>處理對象屬性監聽這些事件，也可以使用addEventListener()方法。

open訊息

Open事件的觸發在用戶端與服務端之間的握手成功之後調用，可以在此事件裡調用用戶端發送資料給服務端等業務處理。下面是樣本：

var ws = new WebSocket("ws://echo.websocket.org/echo",[]);/*open事件觸發表明協議握手成功，WebSocket以及準備好接收和發送資料*/ws.onopen = function(e){    console.log("start..");    ws.send("Message send");//給服務端發送一條簡訊}

上述頁面載入後
開發人員工具控制台會輸出 start..

message訊息

message訊息在用戶端接收到訊息時觸發，應用程式會給監聽器傳入訊息內容以待處理。因為是在用戶端API學習階段，我們是使用echo.websocket.org作為服務端，所以這裡要觸發message訊息，我們就需要先給服務端發送一條訊息，服務端會把這條訊息原樣返回來，下面是樣本：

var ws = new WebSocket("ws://echo.websocket.org/echo",[]);/*open事件觸發表明協議握手成功，WebSocket以及準備好接收和發送資料*/ws.onopen = function(e){    console.log("start..");    ws.send("Message send");}/*message訊息在用戶端接收到訊息時觸發*/ws.onmessage = function(e){    console.log("message..");    if(typeof e.data == "string"){        console.log("String message recevied",e,e.data);    }else{        console.log("Other message recevied",e,e.data);    }    ws.close();}

在控制台可以看輸出結果

error訊息

error訊息在響應意外故障的時候觸發，並且在這個訊息觸發後，close訊息也隨即會被觸發，所以這個訊息裡最適用於串連重啟等操作。為了觸發這個訊息（只是為了學習看看效果），我們首先得出錯，出錯的方式就是給服務端發一個它看不懂的協議，example，這樣，串連就不會建立成功，error事件觸發，下面是樣本：

var ws = new WebSocket("ws://echo.websocket.org/echo",["example"]);/*close訊息在關閉串連時觸發*/ws.onclose = function(e){    console.log("close",e);}

close訊息

close訊息在關閉串連時觸發，這裡我們在串連建立好之後，就使用close方法關閉串連，從而可以觸發close事件

var ws = new WebSocket("ws://echo.websocket.org/echo",[]);/*open事件觸發表明協議握手成功，WebSocket以及準備好接收和發送資料*/ws.onopen = function(e){    console.log("start..");    ws.close();}/*close訊息在關閉串連時觸發*/ws.onclose = function(e){    console.log("close..");}

在控制台可以看到輸出
start..
close..