使用 JavaScript 的 WebSocket 用戶端

在本系列的上一篇文章「使用 JavaScript 和 Bun 的 WebSocket」中，我們探討如何初始化能夠處理 HTTP 請求和 WebSocket 連線的伺服器。

我們為 HTTP 請求定義了一條規則，以便在向 / 發出請求時提供 index.html 檔案。 index.html 檔案包含用於與 WebSocket 伺服器建立連線並作為客戶端傳送訊息的用戶端邏輯。

客戶端程式碼

在「WebSocket with JavaScript and Bun」中解釋的伺服器的 fetch 方法中實作了以下程式碼：

  if (url.pathname === "/") 
    return new Response(Bun.file("./index.html"));

這表示當瀏覽器要求 http://localhost:8080/ 時，index.html 檔案的內容將會傳送到瀏覽器。
HTML 將呈現一個帶有輸入文字和按鈕的簡單表單，並提供作為用戶端連接到 WebSocket 伺服器的邏輯。

    
        <title>WebSocket with Bun and JavaScript</title>
        <script>
            let echo_service;
            append = function (text) {
                document
                    .getElementById("websocket_events")
                    .insertAdjacentHTML("beforeend", "<li>" + text + ";");
            };
            window.onload = function () {
                echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
                echo_service.onmessage = function (event) {
                    append(event.data);
                };
                echo_service.onopen = function () {
                    append("? Connected to WebSocket!");
                };
                echo_service.onclose = function () {
                    append("Connection closed");
                };
                echo_service.onerror = function () {
                    append("Error happens");
                };
            };

            function sendMessage(event) {
                console.log(event);
                let message = document.getElementById("message").value;
                echo_service.send(message);
            }
        </script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    

    
        <main>



<h2>
  
  
  Explaining the client code
</h2>

<p>This code creates a simple <strong>WebSocket client</strong> in a browser to interact with a WebSocket server. Here's a detailed explanation of its components:</p>


<hr>

<h3>
  
  
  The HTML structure
</h3>



<pre class="brush:php;toolbar:false">

    
        <title>WebSocket with Bun and JavaScript</title>
    
    
        <main>



<ul>
<li>The input field (<input>
</li>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.</li>
<li>The messages/events log (<ul>
</ul>


<hr>

<h3>
  
  
  The JavaScript logic
</h3>

<h4>
  
  
  Initializing the WebSocket connection
</h4>



<pre class="brush:php;toolbar:false">window.onload = function () {
    echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
    ...
};

• WebSocket("ws://127.0.0.1:8080/chat")：在連接埠 8080 上建立到伺服器 127.0.0.1 的新 WebSocket 連接，特別是 /chat 端點。
• 變數echo_service保存WebSocket實例，方便與伺服器通訊。

---

處理 WebSocket 事件

WebSocket 用戶端有四個主要事件處理程序：

1. onopen（連線建立）

  if (url.pathname === "/") 
    return new Response(Bun.file("./index.html"));

• 成功建立與伺服器的連線時會觸發onopen函數。
• 它會在日誌中附加一條訊息：「？已連接到 WebSocket！」。

1. onmessage（收到訊息）

    
        <title>WebSocket with Bun and JavaScript</title>
        <script>
            let echo_service;
            append = function (text) {
                document
                    .getElementById("websocket_events")
                    .insertAdjacentHTML("beforeend", "<li>" + text + ";</script>

"); }; window.onload = function () { echo_service = new WebSocket("ws://127.0.0.1:8080/chat"); echo_service.onmessage = function (event) { append(event.data); }; echo_service.onopen = function () { append("? Connected to WebSocket!"); }; echo_service.onclose = function () { append("Connection closed"); }; echo_service.onerror = function () { append("Error happens"); }; }; function sendMessage(event) { console.log(event); let message = document.getElementById("message").value; echo_service.send(message); }

Explaining the client code

This code creates a simple WebSocket client in a browser to interact with a WebSocket server. Here's a detailed explanation of its components:

---

The HTML structure

    
        <title>WebSocket with Bun and JavaScript</title>
    
    
        <main>



<ul>
<li>The input field (<input>
</li>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.</li>
<li>The messages/events log (<ul>
</ul>


<hr>

<h3>
  
  
  The JavaScript logic
</h3>

<h4>
  
  
  Initializing the WebSocket connection
</h4>



<pre class="brush:php;toolbar:false">window.onload = function () {
    echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
    ...
};

• 每當從伺服器收到訊息時就會觸發 onmessage 函數。
• 使用append函數將伺服器的訊息（event.data）附加到事件日誌中。

1. onclose（連線關閉）

   echo_service.onopen = function () {
       append("? Connected to WebSocket!");
   };

• onclose 函數會在與伺服器的連線關閉（例如伺服器中斷連線）時觸發。
• 此函數將「連線關閉」附加到事件日誌中。

1. onerror（發生錯誤）

   echo_service.onmessage = function (event) {
       append(event.data);
   };

• 通訊發生錯誤時會觸發onerror函數。
• 函數會記錄「發生錯誤」以指示問題。

---

向伺服器發送訊息

   echo_service.onclose = function () {
       append("Connection closed");
   };

• 點擊「提交」按鈕時呼叫 sendMessage 函數。
• document.getElementById("message").value：擷取使用者在輸入框中輸入的文字。
• echo_service.send(message)：它將使用者的訊息傳送到WebSocket伺服器。

---

記錄事件

   echo_service.onerror = function () {
       append("Error happens");
   };

• 此實用函數將 WebSocket 事件和訊息加入

  中。列表 (id="websocket_events")。

• insertAdjacentHTML("beforeend", "

• " text ";
")：將給定文字作為新列表項目(
• ) 插入到列表末尾.

---

使用 PicoCSS 進行樣式設定

function sendMessage(event) {
    let message = document.getElementById("message").value;
    echo_service.send(message);
}

PicoCSS 為頁面提供了輕量級且優雅的樣式，確保表單和活動日誌看起來優美，無需額外的自訂 CSS。

---

回顧，它是如何運作的

1. 頁面載入時，瀏覽器與伺服器建立 WebSocket 連線。
2. 連線成功後，會記錄一則訊息：「？已連線至 WebSocket！」。
3. 使用者可以在輸入框中輸入訊息，然後按一下「提交」按鈕。訊息被傳送到 WebSocket 伺服器。

---

下一步

本文探討如何實作 WebSocket 用戶端與 WebSocket 伺服器通訊。在本系列的上一篇文章中，我們重點介紹了建立基本的 WebSocket 伺服器。

在下一篇文章中，我們將透過實作廣播邏輯來進一步探索 WebSocket 功能。此功能允許將來自一個客戶端的消息轉發到所有連接的客戶端，這對於建立聊天系統、協作工具或即時通知等即時應用程式至關重要。

敬請期待！