首頁 > web前端 > js教程 > 使用 JavaScript 的 WebSocket 用戶端

使用 JavaScript 的 WebSocket 用戶端

Linda Hamilton
發布: 2024-12-03 00:33:11
原創
574 人瀏覽過

WebSocket Client with JavaScript

在本系列的上一篇文章「使用 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 伺服器的邏輯。

<!doctype html>
<html>
    <head>
        <title>WebSocket with Bun and JavaScript</title>
        <script>
            let echo_service;
            append = function (text) {
                document
                    .getElementById("websocket_events")
                    .insertAdjacentHTML("beforeend", "<li>" + text + ";</li>");
            };
            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"
        />
    </head>

    <body>
        <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"><!doctype html>
<html>
    <head>
        <title>WebSocket with Bun and JavaScript</title>
    </head>
    <body>
        <main>



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

      The JavaScript logic

      Initializing the WebSocket connection

      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(收到訊息)
      <!doctype html>
      <html>
          <head>
              <title>WebSocket with Bun and JavaScript</title>
              <script>
                  let echo_service;
                  append = function (text) {
                      document
                          .getElementById("websocket_events")
                          .insertAdjacentHTML("beforeend", "<li>" + text + ";</li>");
                  };
                  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"
              />
          </head>
      
          <body>
              <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"><!doctype html>
      <html>
          <head>
              <title>WebSocket with Bun and JavaScript</title>
          </head>
          <body>
              <main>
      
      
      
      <ul>
      <li>The input field (<input>
      <li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.
      登入後複製
    • The messages/events log (

        The JavaScript logic

        Initializing the WebSocket connection

        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 功能。此功能允許將來自一個客戶端的消息轉發到所有連接的客戶端,這對於建立聊天系統、協作工具或即時通知等即時應用程式至關重要。

        敬請期待!

        以上是使用 JavaScript 的 WebSocket 用戶端的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 來源:dev.to
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板