Pelanggan WebSocket dengan 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.

    
        <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"): 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)

    
        <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");
    ...
};

• 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!