Building a Real-Time Chat Application with Socket.io

Introduction

Real-time chat applications have become increasingly popular for instant communication and user collaboration. In this guide, we will explore building a real-time chat application using Socket.io, a JavaScript library that enables real-time, bidirectional and event-based communication between clients and servers.

1. Setting Up Your Project

Install Socket.io: Start by creating a new Node.js project and installing Socket.io and Express:

npm init -y
npm install express
npm install socket.io

Create Your Server: Set up a basic Node.js server using Express and Socket.io:

// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

server.listen(3000, () => {
    console.log('Server running on port 3000');
});

2. Creating the Chat Interface

Set Up Your Frontend: Create an HTML file (index.html) for your chat interface:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Chat Application</title>
</head>
<body>
    <div id="messages"></div>
    <input id="messageInput" type="text" placeholder="Enter your message">
    <button id="sendButton">Send</button>
</body>
</html>

Client-Side Socket.io Setup: Include Socket.io on the client side and connect to the server:

<!-- index.html -->
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io();

    socket.on('connect', () => {
        console.log('Connected to server');
    });
</script>

3. Handling Chat Events

Sending Messages: Handle sending messages from the client to the server:

const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');

sendButton.addEventListener('click', () => {
    const message = messageInput.value;
    socket.emit('chatMessage', message);
    messageInput.value = '';
});

Receiving Messages: Handle receiving messages from the server and displaying them on the client:

socket.on('chatMessage', (message) => {
    const messagesDiv = document.getElementById('messages');
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    messagesDiv.appendChild(messageElement);
});

4. Implementing the Chat Logic on the Server Side

Broadcasting Messages: Handle incoming messages from clients and broadcast them to all connected clients:

io.on('connection', (socket) => {
    console.log('A user connected');

    socket.on('chatMessage', (message) => {
        io.emit('chatMessage', message);
    });

    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

Complete code:

You can check the complete code below:

// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('A user connected');

    socket.on('chatMessage', (message) => {
        io.emit('chatMessage', message);
    });

    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server running on port 3000');
});

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Chat Application</title>
</head>
<body>
    <div id="messages"></div>
    <input id="messageInput" type="text" placeholder="Enter your message">
    <button id="sendButton">Send</button>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        socket.on('connect', () => {
            console.log('Connected to server');
        });

        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');
        const messagesDiv = document.getElementById('messages');

        sendButton.addEventListener('click', () => {
            const message = messageInput.value;
            socket.emit('chatMessage', message);
            messageInput.value = '';
        });

        socket.on('chatMessage', (message) => {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messagesDiv.appendChild(messageElement);
        });
    </script>
</body>
</html>

To run the server, save both files (server.js and index.html) in the same directory and then run the following command in your terminal:

node server.js

Your chat application should now be running and accessible at http://localhost:3000 in your web browser.

Conclusion

This guide provides a step-by-step tutorial on building a real-time chat application using Socket.io and Express in Node.js. It covers setting up the project, creating a chat interface, handling chat events, and implementing server-side chat logic to broadcast messages. By the end of this guide, you'll have a functional chat application accessible via a web browser.

References

Share Your Thoughts

Have you built a real-time chat application with Socket.io? Share your experiences and tips in the comments below!

Building a Real-Time Chat Application with Socket.io

Comments

More from this blog

Introducing StackDevFlow: A New Hub for Developers 🚀

Top AI Tools That Actually Matter: A Comprehensive Guide

Top 10 AI Tools You Can Use for Free (2025 Edition)

Top 10 Payment Gateways for Next.js Applications (2025)

Top 5 Ways to Detect and Remove Keyloggers from Your System

Introduction

1. Setting Up Your Project

2. Creating the Chat Interface

3. Handling Chat Events

4. Implementing the Chat Logic on the Server Side

Complete code:

Command Palette

Comments

More from this blog

Introduction

1. Setting Up Your Project

2. Creating the Chat Interface

3. Handling Chat Events

4. Implementing the Chat Logic on the Server Side

Complete code: