使用 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 功能。此功能允许将来自一个客户端的消息转发到所有连接的客户端，这对于构建聊天系统、协作工具或实时通知等实时应用程序至关重要。

敬请期待！