WebSockets - 建立連線

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

連線建立後觸發的事件稱為onopen。建立 WebSocket 連線非常簡單。您只需呼叫WebSocket 建構函式並傳入伺服器的 URL。

以下程式碼用於建立 WebSocket 連線：

// Create a new WebSocket.
var socket = new WebSocket('ws://echo.websocket.org');

連線建立後，open 事件將在您的 WebSocket 例項上觸發。

onopen 指的是客戶端和伺服器之間的初始握手，導致了第一次交易，並且 Web 應用程式已準備好傳輸資料。

以下程式碼片段描述了開啟 WebSocket 協議連線：

socket.onopen = function(event) {
   console.log(“Connection established”);
   // Display user friendly messages for the successful establishment of connection
   var.label = document.getElementById(“status”);
   label.innerHTML = ”Connection established”;
}

最好向等待建立 WebSocket 連線的使用者提供適當的反饋。但是，需要注意的是，WebSocket 連線相對較快。

已建立的 WebSocket 連線演示文件位於以下 URL：https://www.websocket.org/echo.html

連線建立和對使用者的響應快照如下：

建立開啟狀態允許全雙工通訊和訊息傳輸，直到連線終止。

示例

構建客戶端 HTML5 檔案。

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;
	
      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }
	
      function testWebSocket() {
         websocket = new WebSocket(wsUri);
			
         websocket.onopen = function(evt) {
            onOpen(evt)
         };
      }
	
      function onOpen(evt) {
         writeToScreen("CONNECTED");
      }
	
      window.addEventListener("load", init, false);
   
   </script>

   <h2>WebSocket Test</h2>
   <div id = "output"></div>

</html>

輸出如下：

上述 HTML5 和 JavaScript 檔案展示了 WebSocket 的兩個事件的實現，即：

onLoad 用於建立 JavaScript 物件和初始化連線。
onOpen 建立與伺服器的連線併發送狀態。

列印頁面