Real-Time Applications in JavaScript with WebSockets
WebSockets enable seamless, real-time communication between a client and a server. Unlike traditional HTTP requests, WebSockets keep the connection open, making them perfect for dynamic and real-time applications like chat apps, live updates, and multiplayer games.
In this blog, you’ll learn how to set up WebSockets for real-time communication with detailed steps, code examples, and explanations.
Requirements
Before we begin, ensure you have the following:
- Node.js installed (version 12 or later recommended).
- A basic understanding of JavaScript and Node.js.
- A text editor like VS Code.
Steps for Installation
1. Initialize Your Project
Create a project directory and initialize it with npm.
mkdir websocket-chat-app
cd websocket-chat-app
npm init -y
2. Install Dependencies
Install the ws package for WebSocket support.
npm install ws
Implementation
1. Setting Up the WebSocket Server
File path: server/index.js
const WebSocket = require('ws');
// Create a WebSocket server
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('A client connected.');
// Handle incoming messages
socket.on('message', (message) => {
console.log(`Received: ${message}`);
// Broadcast the message to all clients
server.clients.forEach((client) => {
if (client !== socket && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// Handle disconnection
socket.on('close', () => {
console.log('A client disconnected.');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
2. Setting Up the Client
File path: client/js/app.js
const socket = new WebSocket('ws://localhost:8080');
// Listen for incoming messages
socket.onmessage = (event) => {
const message = event.data;
console.log(`Message from server: ${message}`);
};
// Send a message to the server
document.getElementById('sendBtn').addEventListener('click', () => {
const input = document.getElementById('messageInput').value;
socket.send(input);
});
3. HTML for the Client
File path: client/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Chat</title>
</head>
<body>
<h1>WebSocket Chat App</h1>
<input type="text" id="messageInput" placeholder="Type a message">
<button id="sendBtn">Send</button>
<script src="./js/app.js"></script>
</body>
</html>
Explanation
1. WebSocket Server (server/index.js)
The WebSocket server acts as the backbone of your real-time application. Here’s how it works:
- Initializing the Server:
- A WebSocket server is created using the
wslibrary. - The server listens for client connections on port
8080. - Once the server is running, it will continuously listen for client requests.
- A WebSocket server is created using the
- Handling Client Connections:
- When a client connects, an event handler logs the connection and assigns a
WebSocketobject (referred to assocket) to the client. - This socket object is used to facilitate communication between the server and the connected client.
- When a client connects, an event handler logs the connection and assigns a
server.on('connection', (socket) => {
console.log('A client connected.');
});
- Receiving and Broadcasting Messages:
- The server listens for incoming messages from the connected client via the
messageevent on thesocketobject. - When a message is received, it is broadcasted to all connected clients except the sender to prevent duplicate messages.
- The server listens for incoming messages from the connected client via the
socket.on('message', (message) => {
server.clients.forEach((client) => {
if (client !== socket && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
- Handling Disconnections:
- When a client disconnects, the
closeevent is triggered, and the server logs the disconnection.
- When a client disconnects, the
socket.on('close', () => {
console.log('A client disconnected.');
});
2. WebSocket Client (client/js/app.js)
The client is responsible for establishing a WebSocket connection with the server and sending/receiving messages.
- Establishing a WebSocket Connection:
- A connection to the WebSocket server is created using the
WebSocketAPI. - The URL
ws://localhost:8080points to the WebSocket server running locally.
- A connection to the WebSocket server is created using the
const socket = new WebSocket('ws://localhost:8080');
- Listening for Incoming Messages:
- The
onmessageevent on thesocketobject listens for messages sent by the server. - Each message is logged to the browser console for testing or further UI updates.
- The
socket.onmessage = (event) => {
console.log(`Message from server: ${event.data}`);
};
- Sending Messages to the Server:
- The client provides a simple input form to capture user messages.
- When the "Send" button is clicked, the message in the input field is sent to the server.
document.getElementById('sendBtn').addEventListener('click', () => {
const input = document.getElementById('messageInput').value;
socket.send(input);
});
3. HTML Structure (client/index.html)
The HTML structure serves as the UI for the WebSocket client.
- Input Field and Button:
- The input field (
<input>) allows users to type messages. - The button (
<button>) triggers the JavaScript logic to send the message to the server.
- The input field (
<input type="text" id="messageInput" placeholder="Type a message">
<button id="sendBtn">Send</button>
- JavaScript Integration:
- The
<script>tag includes the JavaScript file (app.js) responsible for WebSocket logic.
- The
<script src="./js/app.js"></script>
- Example in Action:
- When a user types "Hello, World!" in the input field and clicks "Send," the message is transmitted to the server.
- The server broadcasts the message to other connected clients.
- Each client, upon receiving the message, logs it to the console or displays it in the UI.
Conclusion
WebSockets offer a powerful way to build real-time applications by maintaining an open connection between the server and the client. By following this guide, you’ve learned how to:
- Set up a WebSocket server and client.
- Handle bi-directional communication.
- Broadcast messages dynamically.
Start building your real-time projects today and explore the endless possibilities WebSockets provide!
