HTML - WebSockets

WebSockets 是一種用於 Web 應用程式的下一代雙向通訊技術，它透過單個套接字執行。

WebSockets 允許雙向通訊，這意味著客戶端和伺服器可以獨立且同時相互發送資料。

在與 Web 伺服器建立 WebSocket 連線後，我們可以透過呼叫send() 方法將資料從瀏覽器傳送到伺服器，並透過onmessage 事件處理程式接收從伺服器到瀏覽器的數據。

語法

以下是建立新的 WebSocket 物件的 API

var Socket = new WebSocket(url, [protocol] );

這裡第一個引數 url 指定要連線的 URL。第二個屬性 protocol 是可選的，如果存在，則指定伺服器必須支援才能成功建立連線的子協議。

WebSocket 的屬性

以下是 WebSocket 物件的屬性。假設我們如上所述建立了一個套接字物件

屬性描述

屬性	描述
Socket.readyState	只讀屬性 readyState 表示連線的狀態。它可以具有以下值：值為 0 表示尚未建立連線。值為 1 表示連線已建立，可以進行通訊。值為 2 表示連線正在進行關閉握手。值為 3 表示連線已關閉或無法開啟。
Socket.bufferedAmount	只讀屬性 bufferedAmount 表示使用 `send()` 方法已排隊的 UTF-8 文字的位元組數。

Socket.readyState

只讀屬性 readyState 表示連線的狀態。它可以具有以下值：

值為 0 表示尚未建立連線。
值為 1 表示連線已建立，可以進行通訊。
值為 2 表示連線正在進行關閉握手。
值為 3 表示連線已關閉或無法開啟。

Socket.bufferedAmount

只讀屬性 bufferedAmount 表示使用 send() 方法已排隊的 UTF-8 文字的位元組數。

WebSocket 事件

以下是與 WebSocket 物件關聯的事件。假設我們如上所述建立了一個套接字物件

事件	值與事件處理程式	值與描述
open	Socket.onopen	當套接字連線建立時發生此事件。
message	Socket.onmessage	當客戶端從伺服器接收資料時發生此事件。
error	Socket.onerror	當通訊發生任何錯誤時發生此事件。
close	Socket.onclose	當連線關閉時發生此事件。

WebSocket 方法

以下是與 WebSocket 物件關聯的方法。假設我們如上所述建立了一個套接字物件

方法	描述
Socket.send()	send(data) 方法使用連線傳輸資料。
Socket.close()	close() 方法用於終止任何現有連線。

使用 Python 設定 WebSocket 伺服器

步驟 1. 安裝 Python: 如果您的裝置上沒有安裝 Python，請從Python.org下載並安裝。

步驟 2. 安裝 WebSocket 庫: 安裝 python 後，為您的專案建立一個資料夾，並在命令提示符或終端中開啟該資料夾。然後執行此提示。

步驟 3. 建立 websocket 伺服器: 開啟任何文字編輯器並編寫以下 Python 程式碼。然後將其另存為名為“server.py”的檔案。

步驟 4. 執行伺服器: 在終端中導航到您的專案資料夾，並執行此命令以啟動伺服器。

為伺服器設定 HTML 客戶端

到目前為止，我們為 websocket 設定了一個 Python 伺服器。伺服器將在您的終端上執行，因此傳送到伺服器的任何訊息都將在終端上可見。在這裡，我們將瞭解如何設定一個客戶端，該客戶端可以使用 HTML 和 JavaScript 從伺服器接收訊息並向伺服器傳送訊息。

在資料夾中建立一個 HTML 檔案“index.html”。

<!DOCTYPE html>
<html lang="en">
      
<head>
   <title>WebSocket Example</title>
</head>

<body>
   <h1>WebSocket Client</h1>
   <input type="text" 
          id="messageInput" 
          placeholder="Type a message..." />
   <button id="sendButton">
      Send
   </button>
   <div id="messages">
   </div>

   <script>
      const socket = new WebSocket('ws://:8080');

      socket.addEventListener('open', 
      () => {
      console.log('Connected to server');
      });

      socket.addEventListener('message', 
      (event) => {
      const messageDiv = document.createElement('div');
      messageDiv.textContent = event.data;
      document.getElementById('messages').appendChild(messageDiv);
      });

      document.getElementById('sendButton').addEventListener('click', 
      () => {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      socket.send(message);
      messageInput.value = '';
      });
   </script>
</body>
</html>

列印頁面