How to Build a Simple Real-Time Chat Feature with WebSockets in JavaScript
Shubham Joshi 
real time chat app with javascript and websockets
Adding real-time features to your application is one of the most valuable skills in modern web development. In this article, we’ll walk through building a basic chat feature using WebSockets in JavaScript—perfect for learning the fundamentals without being overwhelmed by complexity.
Who Is This Article For?
This tutorial is designed for:
- Beginner and intermediate developers who want to learn about real-time web applications.
- Anyone with basic knowledge of JavaScript and Node.js looking to extend their skills.
- Developers seeking a practical project that demonstrates core WebSocket concepts.
If you know how to run a Node.js server and can write simple HTML and JavaScript, you’ll be comfortable following along.
What Are WebSockets?
WebSockets are a communication protocol that provides full-duplex, bi-directional communication between the server and the client over a persistent connection. This means messages can flow instantly in both directions, ideal for chat applications.
“Unlike HTTP, which opens a new connection for each request/response, WebSockets keep the connection alive, allowing low-latency, real-time data exchange.”
Prerequisites
To follow this tutorial, you should have:
- Basic knowledge of JavaScript and Node.js
- Node.js and npm installed on your system
Step 1: Set Up the Project
- Initialize a new Node.js project: bash
mkdir simple-chat cd simple-chat npm init -y - Install dependencies:
We’ll use the popularwspackage for WebSocket support. bashnpm install ws express
Step 2: Create the Server
Here’s a minimal Express server exposing a WebSocket endpoint:
javascript// server.js
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 });
// Broadcast messages to all clients
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
app.use(express.static('public'));
server.listen(3000, () => console.log('Server started on http://localhost:3000'));
Step 3: Create the Client
Create a public directory with an index.html and client.js file.
public/index.html:
xml<!DOCTYPE html>
<html>
<head>
<title>Simple WebSocket Chat</title>
</head>
<body>
<h2>Real-time Chat</h2>
<div id="chat"></div>
<input id="msg" type="text" placeholder="Type your message..." autocomplete="off"/>
<button onclick="sendMessage()">Send</button>
<script src="client.js"></script>
</body>
</html>
public/client.js:
javascriptconst ws = new WebSocket('ws://localhost:3000');
ws.onmessage = function(event) {
const chat = document.getElementById('chat');
chat.innerHTML += '<div>' + event.data + '</div>';
};
function sendMessage() {
const input = document.getElementById('msg');
ws.send(input.value);
input.value = '';
}
Tip:
“Always sanitize user inputs before broadcasting messages to prevent code injection attacks.”
Step 4: Running and Deploying Your Chat Application
Local Development
- Start the server: bash
node server.js - Open several browser windows at http://localhost:3000 and enjoy real-time chatting.
Deployment
To deploy your chat application, consider these common and beginner-friendly options:
- Vercel: Easy for static frontends, but not suited for persistent WebSocket servers.
- Glitch or Replit: Simple cloud IDEs for prototyping Node.js apps with live deployments.
- Render or Railway: Both support Node.js server deployments with WebSocket support and quick setup via GitHub repos.
- DigitalOcean App Platform or Heroku: Full platform-as-a-service support for deploying Node.js applications, including persistent WebSockets.
Tip:
When deploying, make sure to update the WebSocket connection URL in your client code to use your deployed server’s domain.
Which Tool to Use?
- Develop with any IDE you are comfortable with: Visual Studio Code, WebStorm, or even Glitch/Replit for quick online dev/testing.
- Use Node.js for running the server, and npm for managing dependencies.
- For deployment, start with platforms that support free Hobby tiers like Render, Railway, or Heroku for quick experimentation.
“Online coding platforms like Glitch and Replit lower the barrier for beginners to experiment with server code and share live WebSocket-based apps easily.”
Tricks & Best Practices
- Limit Message Lengths: Prevent spamming by limiting characters per message.
- Use Nicknames: Add usernames to make conversations clearer.
- Heartbeat Pings: Implement pings to detect and remove disconnected clients.
Additional Resources
- MDN [WebSockets Introduction]
- Official [ws package documentation]
- MDN Guide: [Real-time communication in web apps]
Conclusion
By leveraging WebSockets and JavaScript, you can quickly build a real-time chat feature as a foundation for richer, interactive apps. Keep experimenting, improve security, and add features as you grow in confidence!
For more coding coding and software ideas and solutions, Bookmark All Aspects Hub
