WebSocket從用戶端初始化並與伺服器的連線以進行兩端之間的通訊。要初始化連線,需要使用帶有遠端或本地伺服器的URL建立Javascript物件。
var socket = new WebSocket("ws://echo.websocket.org");
上面提到的URL是一個可用於測試和實驗的公共地址。websocket.org
伺服器始終處於啟動狀態,並且在收到用戶端訊息時並將其傳送回用戶端。
下面是確保應用程式正常執行的最重要步驟。
有四個主要的Web Socket API事件 -
每個事件都通過分別實現onopen
,onmessage
,onclose
和onerror
函式等函式來處理。它也可以在addEventListener
方法的幫助下實現。
事件和函式的簡要概述如下 -
當在用戶端和伺服器之間建立了連線,就會從Web Socket範例觸發open
事件。它稱為用戶端和伺服器之間的初始握手。當建立連線就引發的事件被稱為onopen
。
通常在伺服器傳送一些資料時發生訊息事件。伺服器傳送給用戶端的訊息可以包括純文字訊息,二進位制資料或影象。無論何時傳送資料,都會觸發onmessage
函式。
關閉事件標誌著伺服器和用戶端之間通訊的結束。在onclose
事件的幫助下,可以關閉連線。在onclose
事件的幫助下標記通訊結束後,伺服器和用戶端之間無法進一步傳輸訊息。關閉事件也可能由於連線不良而發生。
某些錯誤的錯誤標記,在通訊期間發生。它是在onerror
事件的幫助下標記的。在錯誤之後總是會終止連線。每個事件的詳細描述將在後面的章節中討論。
當事情發生時,通常會觸發事件。另一方面,當使用者想要發生某事時採取操作。通過使用者使用函式的顯式呼叫來執行操作。
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,"手動關閉連線...");