WebSocket Client with JavaScript-JS Tutorial-php.cn

WebSocket Client with JavaScript

In the previous article of this series, "WebSocket with JavaScript and Bun", we explored how to initialize a server capable of handling both HTTP requests and WebSocket connections.

We defined a rule for HTTP requests to serve the index.html file when a request is made to /. The index.html file contains the client-side logic for establishing a connection with the WebSocket server and sending messages as a client.

The client code

In the fetch method of the server explained in "WebSocket with JavaScript and Bun" is implemented this code:

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

Copy after login

This means that when a browser request is made to http://localhost:8080/, the content of the index.html file is sent to the browser.
The HTML will render a simple form with input text and a button and ship the logic for connecting to the WebSocket server as a client.

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

Copy after login

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

Copy after login

WebSocket("ws://127.0.0.1:8080/chat"): creates a new WebSocket connection to the server at 127.0.0.1 on port 8080, specifically the /chat endpoint.
The variable echo_service holds the WebSocket instance, which facilitates communication with the server.

Handling WebSocket events

The WebSocket client has four main event handlers:

onopen (the connection is established)

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

Copy after login

The onopen function is triggered when the connection to the server is successfully established.
It appends a message to the log saying, "? Connected to WebSocket!".

onmessage (a message is received)

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

Copy after login

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");
    ...
};
```
Copy after login
Copy after login
- The onmessage function is triggered whenever a message is received from the server.
- The server’s message (event.data) is appended to the event log using the append function.
1. onclose (the connection is closed)
```
   echo_service.onopen = function () {
       append("? Connected to WebSocket!");
   };
```
Copy after login
- The onclose function is triggered when the connection to the server is closed (e.g., the server disconnects).
- The function appends "Connection closed" to the event log.
1. onerror (an error is occurred)
```
   echo_service.onmessage = function (event) {
       append(event.data);
   };
```
Copy after login
- The onerror function is triggered when an error occurs during communication.
- The function logs "Error happens" to indicate the issue.
Sending messages to the server
```
   echo_service.onclose = function () {
       append("Connection closed");
   };
```
Copy after login
- The sendMessage function is called when the "Submit" button is clicked.
- document.getElementById("message").value: it retrieves the text entered by the user in the input box.
- echo_service.send(message): it sends the user’s message to the WebSocket server.
Logging events
```
   echo_service.onerror = function () {
       append("Error happens");
   };
```
Copy after login
- This utility function adds WebSocket events and messages to the
  - insertAdjacentHTML("beforeend", "
  - " text ";
  - ) at the end of the list.