# Building a Real-Time Chat Application with WebSockets in JavaScript
Real-time applications have become a crucial part of modern web development. Whether it’s a live scoreboard, a collaborative tool, or a chat application, users expect instantaneous updates without needing to refresh the page. One of the most effective ways to build such real-time functionality is by using WebSockets.
In this guide, we will walk through the process of building a real-time chat application with WebSockets in JavaScript, covering both the frontend and backend.
---
### **What is WebSocket?**
WebSocket is a protocol that enables two-way communication between a client (typically a web browser) and a server over a single, long-lived connection. Unlike traditional HTTP requests (where the client sends a request and the server responds), WebSocket allows the client and server to send messages to each other at any time.
This makes WebSocket an ideal solution for real-time applications like chat apps, where messages need to be instantly sent and received.
---
### **Setting Up the Project**
We'll be using **Node.js** for the backend and **plain JavaScript** for the frontend. For the WebSocket implementation, we'll use the `ws` library for Node.js.
#### **Step 1: Install Node.js and Express**
First, ensure that you have [Node.js](https://nodejs.org/) installed. Then, create a new project directory and initialize it:
```bash
mkdir websocket-chat-app
cd websocket-chat-app
npm init -y
```
Next, install **Express** and **ws** for WebSocket support:
```bash
npm install express ws
```
#### **Step 2: Setting Up the Backend with WebSocket**
We’ll start by creating a basic WebSocket server using Node.js and Express.
1. Create a file called `server.js`:
```javascript
const express = require("express");
const http = require("http");
const WebSocket = require("ws");
// Create a new express app and HTTP server
const app = express();
const server = http.createServer(app);
// Create a WebSocket server
const wss = new WebSocket.Server({ server });
// Serve static files (frontend HTML, CSS, JS)
app.use(express.static("public"));
// Store connected clients
const clients = new Set();
// When a client connects
wss.on("connection", (ws) => {
console.log("New client connected");
clients.add(ws);
// Listen for incoming messages
ws.on("message", (message) => {
console.log("Received:", message);
// Broadcast the message to all connected clients
clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// Remove client when it disconnects
ws.on("close", () => {
console.log("Client disconnected");
clients.delete(ws);
});
});
// Start the server on port 3000
server.listen(3000, () => {
console.log("Server is listening on port 3000");
});
```
This code does the following:
* Sets up an HTTP server using Express to serve static files (HTML, CSS, JS).
* Creates a WebSocket server that listens for new connections.
* Broadcasts messages received from one client to all other clients.
#### **Step 3: Creating the Frontend**
Now that we have the backend WebSocket server, let’s create a simple frontend that will allow users to send and receive messages in real time.
1. Create a `public` directory with an `index.html` file:
```xml
WebSocket Chat with File Upload
```
This frontend contains:
* An input field for typing messages.
* A "Send" button to submit the message.
* A `div` that displays incoming messages.
* JavaScript to handle WebSocket connections and real-time message updates.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728458537637/c9f28b06-666d-475a-ba70-209ddb1949b8.png align="center")
---
### **Running the Application**
1. Start the server:
```bash
node server.js
```
2. Open your browser and navigate to [`http://localhost:3000`](http://localhost:3000). You should see the chat interface.
3. Open multiple tabs or windows to simulate different users and start chatting!
---
### **Enhancing the Chat App**
While this is a basic real-time chat app, there are plenty of ways you can enhance it:
#### 1\. **Display Usernames**
* You can prompt users to enter a username when they join the chat and display their name next to each message.
#### 2\. **Add Message Timestamps**
* Add timestamps to each message to indicate when it was sent.
#### 3\. **Private Messaging**
* Implement direct messaging between specific users instead of broadcasting to everyone.
#### 4\. **Store Chat History**
* Use a database (like MongoDB or MySQL) to store chat history and display past messages when a user connects.
#### 5\. **Emojis and Rich Text**
* Enhance the chat experience by allowing users to send emojis or format text (bold, italics, etc.).
---
Conclusion
Building a real-time chat application with WebSockets in JavaScript is a great way to understand how real-time web applications work. WebSocket’s full-duplex communication model makes it perfect for chat apps, live updates, collaborative tools, and more.