WebSocket事件和動作


WebSocket從用戶端初始化並與伺服器的連線以進行兩端之間的通訊。要初始化連線,需要使用帶有遠端或本地伺服器的URL建立Javascript物件。

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

上面提到的URL是一個可用於測試和實驗的公共地址。websocket.org伺服器始終處於啟動狀態,並且在收到用戶端訊息時並將其傳送回用戶端。

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

Websocket事件

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

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

每個事件都通過分別實現onopenonmessageoncloseonerror函式等函式來處理。它也可以在addEventListener方法的幫助下實現。

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

開啟

當在用戶端和伺服器之間建立了連線,就會從Web Socket範例觸發open事件。它稱為用戶端和伺服器之間的初始握手。當建立連線就引發的事件被稱為onopen

訊息

通常在伺服器傳送一些資料時發生訊息事件。伺服器傳送給用戶端的訊息可以包括純文字訊息,二進位制資料或影象。無論何時傳送資料,都會觸發onmessage函式。

關閉

關閉事件標誌著伺服器和用戶端之間通訊的結束。在onclose事件的幫助下,可以關閉連線。在onclose事件的幫助下標記通訊結束後,伺服器和用戶端之間無法進一步傳輸訊息。關閉事件也可能由於連線不良而發生。

錯誤

某些錯誤的錯誤標記,在通訊期間發生。它是在onerror事件的幫助下標記的。在錯誤之後總是會終止連線。每個事件的詳細描述將在後面的章節中討論。

Web通訊端操作

當事情發生時,通常會觸發事件。另一方面,當使用者想要發生某事時採取操作。通過使用者使用函式的顯式呼叫來執行操作。

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,"手動關閉連線...");