Pelanggan WebSocket dengan JavaScript-tutorial js-php.cn

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

Salin selepas log masuk

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.

Salin selepas log masuk

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

Salin selepas log masuk

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:

onopen (sambungan diwujudkan)

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

Salin selepas log masuk

Fungsi onopen dicetuskan apabila sambungan ke pelayan berjaya diwujudkan.
Ia menambahkan mesej pada log yang mengatakan, "? Disambungkan ke WebSocket!".

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.

Salin selepas log masuk

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");
    ...
};
```
Salin selepas log masuk
Salin selepas log masuk
- 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!");
   };
```
Salin selepas log masuk
- 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);
   };
```
Salin selepas log masuk
- 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");
   };
```
Salin selepas log masuk
- 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");
   };
```
Salin selepas log masuk
- Fungsi utiliti ini menambah acara dan mesej WebSocket pada
  - insertAdjacentHTML("beforeend", "
  - " text ";
  - ) di hujung senarai .