cari

Rumah >hujung hadapan web >tutorial js >Pelanggan WebSocket dengan JavaScript

Pelanggan WebSocket dengan JavaScript

Linda Hamilton
Linda Hamiltonasal
2024-12-03 00:33:11525semak imbas

WebSocket Client with JavaScript

Dalam artikel sebelumnya siri ini, "WebSocket dengan JavaScript dan Bun", kami meneroka cara untuk memulakan pelayan yang mampu mengendalikan kedua-dua permintaan HTTP dan sambungan WebSocket.

Kami menentukan peraturan untuk permintaan HTTP untuk menyampaikan fail index.html apabila permintaan dibuat kepada /. Fail index.html mengandungi logik sisi klien untuk mewujudkan sambungan dengan pelayan WebSocket dan menghantar mesej sebagai pelanggan.

Kod pelanggan

Dalam kaedah pengambilan pelayan yang dijelaskan dalam "WebSocket dengan JavaScript dan Bun" dilaksanakan kod ini:

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

Ini bermakna apabila permintaan penyemak imbas dibuat ke http://localhost:8080/, kandungan fail index.html dihantar ke penyemak imbas.
HTML akan menghasilkan bentuk ringkas dengan teks input dan butang serta menghantar logik untuk menyambung ke pelayan WebSocket sebagai pelanggan.

<!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"): mencipta sambungan WebSocket baharu ke pelayan pada 127.0.0.1 pada port 8080, khususnya titik akhir /chat.
      • Perkhidmatan echo_variable memegang contoh WebSocket, yang memudahkan komunikasi dengan pelayan.

      Mengendalikan acara WebSocket

      Pelanggan WebSocket mempunyai empat pengendali acara utama:

      1. onopen (sambungan diwujudkan) 
        if (url.pathname === "/") 
    return new Response(Bun.file("./index.html"));
      • Fungsi onopen dicetuskan apabila sambungan ke pelayan berjaya diwujudkan.
      • Ia menambahkan mesej pada log yang mengatakan, "? Disambungkan ke WebSocket!".
      1. onmessage (mesej diterima) 
      <!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");
    ...
};
      • Fungsi onmessage dicetuskan apabila mesej diterima daripada pelayan.
      • Mesej pelayan (event.data) dilampirkan pada log acara menggunakan fungsi tambah.
      1. onclose (sambungan ditutup) 
         echo_service.onopen = function () {
       append("? Connected to WebSocket!");
   };
      • Fungsi onclose dicetuskan apabila sambungan ke pelayan ditutup (cth., pelayan terputus sambungan).
      • Fungsi menambahkan "Sambungan ditutup" pada log acara.
      1. kesalahan (ralat berlaku) 
         echo_service.onmessage = function (event) {
       append(event.data);
   };
      • Fungsi onerror dicetuskan apabila ralat berlaku semasa komunikasi.
      • Fungsi log "Ralat berlaku" untuk menunjukkan isu.

      Menghantar mesej ke pelayan 

         echo_service.onclose = function () {
       append("Connection closed");
   };
      • Fungsi sendMessage dipanggil apabila butang "Serah" diklik.
      • document.getElementById("message").value: ia mendapatkan semula teks yang dimasukkan oleh pengguna dalam kotak input.
      • echo_service.send(message): ia menghantar mesej pengguna ke pelayan WebSocket.

      Peristiwa pembalakan 

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

      • Fungsi utiliti ini menambah acara dan mesej WebSocket pada

          senarai (id="websocket_events").

        • insertAdjacentHTML("beforeend", "

        • " text ";
          • "): memasukkan teks yang diberikan sebagai item senarai baharu (
        • ) di hujung senarai .

          • Menggayakan dengan PicoCSS 

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

          PicoCSS menyediakan penggayaan yang ringan dan elegan untuk halaman, memastikan borang dan log acara kelihatan digilap tanpa CSS tersuai tambahan.

          Ikhtisar, cara ia berfungsi

          1. Apabila halaman dimuatkan, penyemak imbas mewujudkan sambungan WebSocket dengan pelayan.
          2. Setelah sambungan berjaya, mesej dilog berkata, "? Disambungkan ke WebSocket!".
          3. Pengguna boleh menaip mesej dalam kotak input dan klik butang "Serah". Mesej dihantar ke pelayan WebSocket.

          Langkah Seterusnya

          Artikel ini meneroka cara melaksanakan klien WebSocket untuk berkomunikasi dengan pelayan WebSocket. Dalam artikel sebelumnya dalam siri ini, kami menumpukan pada penstrukturan pelayan WebSocket asas.

          Dalam artikel seterusnya, kami akan meneroka fungsi WebSocket dengan lebih lanjut dengan melaksanakan logik penyiaran. Ciri ini membolehkan mesej daripada satu pelanggan dimajukan kepada semua pelanggan yang disambungkan, menjadikannya penting untuk membina aplikasi masa nyata seperti sistem sembang, alatan kerjasama atau pemberitahuan langsung.

          Nantikan!

          Atas ialah kandungan terperinci Pelanggan WebSocket dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    • JavaScript css html for Error Logging using Event append function this input ul li http websocket issue
    Kenyataan：
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel sebelumnya：Mengoptimumkan Three.js: Teknik eyArtikel seterusnya：Mengoptimumkan Three.js: Teknik ey

    Artikel berkaitan

    Lihat lagi