Learn WebSockets By Building Simple Chat App

#websockets #javascript #node

The WebSocket API is a way to communicate between a client (user's browser) and a server. During the session, the data can flow bi-directional way in real-time, meaning the client can send the messages to the server, and the server can response back without the need to poll. Communication through the opened channel is long-lasting and low latency.

WebSockets perfect use cases:

Chat apps
Tracking apps
Live audience interaction
IoT device updates

Building The App

To get a better understanding of what WebSockets can do, let's build a simple chat app where users can send and receive messages in real-time.

For the app, we will need:

Setup Node.js server with WebSocket library for Node.js ws
Create client-side (HTML and client.js) with WebSocket instance to listen for the message from the server

Setting Up Server

Initialize the project from your terminal:

npm i -Y && npm i ws && touch server.js

The command will set up the project, install the ws library, and create a server.js file.

Open server.js file from your editor and initialize the server:

const WebSocket = require('ws');

// starts server instance on http://localhost:8080
const wss = new WebSocket.Server({ port: 8080 });

// waits for connection to be established from the client
// the callback argument ws is a unique for each client
wss.on('connection', (ws) => {

  // runs a callback on message event
  ws.on('message', (data) => {

    // sends the data to all connected clients
    wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(data);
        }
    });
  });
});

Setting Up Client

Create a simple HTML file with input to enter messages and send a button to post them. It does not matter where these files will be created; it might be aswell in another directory as long as they are together.

<!DOCTYPE html>
<html>

<body>
    <div id="chat"></div>
    <input id="name" type="text" placeholder="name" />
    <input id="message" type="text" placeholder="message" />
    <button id="send">Send</button>

    <script src="client.js"></script>
</body>

</html>

And for the client.js file, we will create a WebSocket API instance by specifying to listen to connection on localhost:8080.

const connection = new WebSocket("ws://localhost:8080");

The connection, which is a WebSocket instance, has an extensive list of event properties. For this example, we won't use all of them, but the most important ones to notify the client and send messages to the server:

WebSocket.onopen - called when the connection is opened
WebSocket.onclose - called when the connection is closed
WebSocket.onerror - called when an error occurs
WebSocket.onmessage - called when a message is received from the server

And the complete client.js file will look like this:

const connection = new WebSocket("ws://localhost:8080");
const button = document.querySelector("#send");

connection.onopen = (event) => {
    console.log("WebSocket is open now.");
};

connection.onclose = (event) => {
    console.log("WebSocket is closed now.");
};

connection.onerror = (event) => {
    console.error("WebSocket error observed:", event);
};

connection.onmessage = (event) => {
  // append received message from the server to the DOM element 
  const chat = document.querySelector("#chat");
  chat.innerHTML += event.data;
};

button.addEventListener("click", () => {
  const name = document.querySelector("#name");
  const message = document.querySelector("#message");
  const data = `<p>${name.value}: ${message.value}</p>`;

  // Send composed message to the server
  connection.send(data);

  // clear input fields
  name.value = "";
  message.value = "";
});

Run The App

In the terminal run command node server.js from within the project directory, open index.html file twice in separate browser tabs and try sending messages. Both client instances should receive messages through the server in real-time.
That completes the tutorial, and I hope you got a better understanding of how to use WebSockets for your next awesome project.

Top comments (3)

Simba Mupfukudzwa • Mar 3 '20

Great post and thank you for sharing.
2 issues i faced but was able to rectify incase someone else is having issues.

The very first line needs to be changed in order to initialize npm

change : npm i -Y && npm i ws && touch server.js

to : npm init -Y && npm i ws && touch server.js

On the server.js file make the sure everywhere you have the word 'webWorker' is converted to 'WebWorker' with UpperCases to make it work and avoid a reference error.

Other than those two little things, app works great and is easy to follow.