Creating a Real-Time Chat Application with Node.js
A real-time chat application allows users to exchange messages instantly using technologies like WebSockets and Socket.IO. Here's a step-by-step guide:
1. Project Setup
Initialize the Project
- Bi-directional communication (client ↔ server).
- Reduced latency compared to HTTP requests.
- Low overhead with minimal protocol framing.
- Suitable for applications requiring real-time updates, like chat apps or live dashboards.
mkdir chat-app
cd chat-app
npm init -y
npm install express socket.io
2. Server-Side Implementation
Create server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html'); // Serve the front-end
});
// Handle real-time connections
io.on('connection', (socket) => {
console.log('A user connected');
// Receive and broadcast messages
socket.on('chat message', (msg) => {
io.emit('chat message', msg); // Send message to all clients
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => console.log('Server running on http://localhost:3000'));
3. Front-End Implementation
Create index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title><style>body { font-family: Arial, sans-serif; }
ul { list-style: none; padding: 0; }
li { padding: 5px; border-bottom: 1px solid #ccc; }
#message { width: 80%; }</style></head>
<body>
<h2>Real-Time Chat</h2>
<ul id="messages"></ul>
<input id="message" autocomplete="off" placeholder="Type a message" />
<button onclick="sendMessage()">Send</button> <script defer src="/socket.io/socket.io.js"></script> <script defer src="data:text/javascript;base64,DQogICAgICBjb25zdCBzb2NrZXQgPSBpbygpOw0KDQogICAgICBjb25zdCBtZXNzYWdlcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtZXNzYWdlcycpOw0KICAgICAgY29uc3QgaW5wdXQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWVzc2FnZScpOw0KDQogICAgICAvLyBTZW5kIG1lc3NhZ2UNCiAgICAgIGZ1bmN0aW9uIHNlbmRNZXNzYWdlKCkgew0KICAgICAgICBjb25zdCBtc2cgPSBpbnB1dC52YWx1ZTsNCiAgICAgICAgaWYgKG1zZy50cmltKCkpIHsNCiAgICAgICAgICBzb2NrZXQuZW1pdCgnY2hhdCBtZXNzYWdlJywgbXNnKTsgLy8gU2VuZCBtZXNzYWdlIHRvIHNlcnZlcg0KICAgICAgICAgIGlucHV0LnZhbHVlID0gJyc7DQogICAgICAgIH0NCiAgICAgIH0NCg0KICAgICAgLy8gUmVjZWl2ZSBtZXNzYWdlDQogICAgICBzb2NrZXQub24oJ2NoYXQgbWVzc2FnZScsIChtc2cpID0+IHsNCiAgICAgICAgY29uc3QgbGkgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaScpOw0KICAgICAgICBsaS50ZXh0Q29udGVudCA9IG1zZzsNCiAgICAgICAgbWVzc2FnZXMuYXBwZW5kQ2hpbGQobGkpOw0KICAgICAgfSk7DQogICAg"></script> </body>
</html>
4. Running the Application
Start the server:
node server.js
http://localhost:3000.