WebSocket Client with JavaScript – DEV Community

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

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.

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

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

1. onopen (the connection is established)

   echo_service.onopen = function () {
       append("🚀 Connected to WebSocket!");
   };

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

1. onmessage (a message is received)

   echo_service.onmessage = function (event) {
       append(event.data);
   };

• 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.onclose = function () {
       append("Connection closed");
   };

• 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.onerror = function () {
       append("Error happens");
   };

• 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

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

• 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

append = function (text) {
    document
        .getElementById("websocket_events")
        .insertAdjacentHTML("beforeend", "
" + text + ";");
};

• This utility function adds WebSocket events and messages to the list (id="websocket_events").

• insertAdjacentHTML("beforeend", "

• " + text + ";

"): inserts the given text as a new list item (

• ) at the end of the list.

    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>