WebSockets - 事件與動作

為了客戶端和伺服器之間能夠進行通訊，需要客戶端初始化與伺服器的連線。初始化連線需要使用遠端或本地伺服器的URL建立一個JavaScript物件。

var socket = new WebSocket(“ ws://echo.websocket.org ”);

上面提到的URL是一個公共地址，可用於測試和實驗。websocket.org伺服器始終處於執行狀態，當它收到訊息時會將其傳送回客戶端。

這是確保應用程式正常執行的最重要步驟。

Web Sockets – 事件

Web Socket API 有四個主要的事件：

• 開啟
• 訊息
• 關閉
• 錯誤

每個事件都透過實現相應的函式來處理，例如onopen、onmessage、onclose和onerror函式。也可以使用addEventListener方法來實現。

事件和函式的簡要概述如下：

開啟

一旦客戶端和伺服器之間建立了連線，Web Socket 例項就會觸發open事件。這被稱為客戶端和伺服器之間的初始握手。連線建立後觸發的事件稱為onopen。

訊息

當伺服器傳送一些資料時，通常會發生訊息事件。伺服器傳送到客戶端的訊息可以包括純文字訊息、二進位制資料或影像。每當傳送資料時，都會觸發onmessage函式。

關閉

關閉事件標誌著伺服器和客戶端之間通訊的結束。可以使用onclose事件關閉連線。在使用onclose事件標記通訊結束之後，伺服器和客戶端之間將無法再傳輸任何訊息。關閉事件也可能由於連線不良而發生。

錯誤

錯誤標誌著通訊過程中發生的一些錯誤。它使用onerror事件進行標記。Onerror之後總是會終止連線。每個事件的詳細描述將在後面的章節中討論。

Web Sockets – 動作

事件通常在發生某些事情時觸發。另一方面，當用戶希望發生某些事情時，就會採取行動。動作是由使用者使用函式顯式呼叫來執行的。

Web Socket 協議支援兩種主要的動作：

• send( )
• close( )

send ( )

此操作通常用於與伺服器進行通訊，包括髮送訊息，其中包括文字檔案、二進位制資料或影像。

使用send()操作傳送的聊天訊息如下：

// get text view and button for submitting the message
var textsend = document.getElementById(“text-view”);
var submitMsg = document.getElementById(“tsend-button”);

//Handling the click event
submitMsg.onclick = function ( ) {
   // Send the data
   socket.send( textsend.value);
}

注意 – 只有在連線開啟的情況下才能傳送訊息。

close ( )

此方法代表告別握手。它完全終止連線，並且在重新建立連線之前無法傳輸任何資料。

var textsend = document.getElementById(“text-view”);
var buttonStop = document.getElementById(“stop-button”);

//Handling the click event
buttonStop.onclick = function ( ) {
   // Close the connection if open
   if (socket.readyState === WebSocket.OPEN){
      socket.close( );
   }
}

也可以使用以下程式碼片段故意關閉連線：

socket.close(1000,”Deliberate Connection”);