In today’s fast-moving world, people want everything to happen instantly. Whether we are messaging friends, talking to customer support, or joining a live webinar, we expect real-time responses. That’s why real-time applications are becoming so important. One of the best examples of a real-time app is a chat application.
If you are learning to become a web developer or already taking full stack developer course, building a real-time chat app is a great way to learn. It teaches you how to connect the front end and back end of a web application, how to handle user input, and how to send and receive data in real time.
In this blog, we will explain how to build a simple real-time chat app using WebSockets and Node.js. Don’t worry if you are new to this topic we’ll use simple English and explain everything step by step.
What Are WebSockets?
WebSockets are a technology that allows two-way communication between the web browser and the server. This means that both can deliver messages to each other at the same time, without waiting for a request.
In normal websites, the browser must ask the server again and again to check if there is any new data. This is called polling. It uses more resources and is slow. But with WebSockets, the connection stays open, and the server can send data whenever it wants.
This makes WebSockets perfect for chat applications, online games, live notifications, and other real-time tools.
Why Use Node.js?
Node.js is a fast and efficient tool for building server-side applications using JavaScript. It works very well with WebSockets because it is built to handle many tasks at once. This is very useful when many users are chatting at the same time.
Here are some benefits of using Node.js:
- Fast and lightweight
- Uses JavaScript (same as the front end)
- Easy to work with real-time data
- Has many helpful libraries, like ws for WebSockets
Tools We Need
To build a real-time chat app, we need the following:
- Node.js: The server-side tool
- Express.js: A framework to manage routes and static files
- ws: A WebSocket library for Node.js
- HTML + JavaScript: For the front end
Step-by-Step Guide
Let’s now build a simple chat app using these tools.
Step 1: Create a New Project
Open your terminal and make a new folder:
mkdir chat-app
cd chat-app
npm init -y
This will create a new Node.js project.
Step 2: Install the Packages
Now install Express and the ws library:
npm install express ws
These will help us set up a server and WebSocket support.
Step 3: Set Up the Server
Create a file named server.js and add this code:
const express = require(‘express’);
const http = require(‘http’);
const WebSocket = require(‘ws’);
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
app.use(express.static(‘public’));
wss.on(‘connection’, (ws) => {
console.log(‘New client connected’);
ws.on(‘message’, (message) => {
console.log(‘Received:’, message);
// Send message to all clients
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on(‘close’, () => {
console.log(‘Client disconnected’);
});
});
server.listen(3000, () => {
console.log(‘Server is running on port 3000’);
});
Step 4: Create the Front End
Inside your project, create a folder named public. Inside it, create an index.html file with the following content:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Real-Time Chat</title>
</head>
<body>
<h2>Chat App</h2>
<input type=”text” id=”messageInput” placeholder=”Type your message”>
<button onclick=”sendMessage()”>Send</button>
<ul id=”messages”></ul>
<script>
const socket = new WebSocket(‘ws://localhost:3000’);
socket.onmessage = function(event) {
const messageList = document.getElementById(‘messages’);
const messageItem = document.createElement(‘li’);
messageItem.textContent = event.data;
messageList.appendChild(messageItem);
};
function sendMessage() {
const input = document.getElementById(‘messageInput’);
socket.send(input.value);
input.value = ”;
}
</script>
</body>
</html>
How the App Works
- When the user writes a message and clicks “Send”, the message is sent to the server using WebSockets.
- The server gets the message and sends it to all connected clients.
- Each client shows the message in a list on the web page.
- The connection stays open, so messages are shared instantly.
Features You Can Add
Once your basic app is working, you can try adding more features:
- Usernames: Let users choose a name when joining
- Private chat: Let users send messages to specific people
- Typing status: Show when someone is typing
- Emojis: Let users send smileys and other icons
- Chat rooms: Allow different groups to have their own chats
These features will make your app more fun and useful.
Common Problems and Fixes
- Port already in use: If port 3000 is busy, change it to another number like 3001.
- Messages not showing: Check the console for errors and make sure the server is running.
- WebSocket errors: Make sure the URL matches your server’s address.
Why This Project Is Useful
This project teaches you many skills:
- How to create a Node.js server
- How to use WebSockets
- How to handle real-time data
- How to build a simple front end
It is a great example for anyone learning full-stack development.
Conclusion
Building a real-time chat app is a fun and useful project for any beginner or intermediate developer. It shows how real-time data works, how to build the back end and front end together, and how to create something users can interact with.
If you’re taking a full stack course, a project like this can really help you understand how different parts of a web application work together. It’s not just about writing code—it’s about thinking like a developer and solving real problems.
Keep building, keep learning, and soon you’ll be able to create even more advanced apps. Real-time chat is just the beginning!
Business Name: ExcelR – Full Stack Developer And Business Analyst Course in Bangalore
Address: 10, 3rd floor, Safeway Plaza, 27th Main Rd, Old Madiwala, Jay Bheema Nagar, 1st Stage, BTM 1st Stage, Bengaluru, Karnataka 560068
Phone: 7353006061
Business Email: enquiry@excelr.com
