RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/node-js/how-to-create-a-chat-app-using-socket-io-node-js/ below:

How to Create a Chat App Using socket.io in NodeJS?

Last Updated : 23 Jul, 2025

Socket.io is a JavaScript library that enables real-time, bidirectional, event-based communication between the client and server. It works on top of WebSocket but provides additional features like automatic reconnection, broadcasting, and fallback options.

What We Are Going to Create?

In this article, we will create a real-time chat application using Socket.IO and NodeJS. The application will feature

Real-time communication between multiple users without the need for page reloads.
Sending and receiving messages in real-time, instantly displaying messages across all connected clients.
A simple and responsive chat interface built using HTML, CSS (Tailwind CSS), and JavaScript.
Broadcasting messages to all clients in a chat room.
Customization for both the username and the message body.
A fully functional system where users can see messages as they are typed and sent in real-time.

Project Preview Chat App Why use Socket.io?

Provides real-time communication between clients and servers.
Supports broadcasting messages to multiple clients.
It works even if WebSockets are unavailable by using polling as a fallback.
Easy to implement and extend with additional features like chat rooms.

Building a real-time chat app with Socket.io and NodeJS is an excellent way to learn full-stack development.

Approach

Real-time communication: We use Socket.io to enable instant message exchange between users without reloading the page.
Server setup: The server runs on ExpressJS, which handles connections and sends the chat page to users when they open the app.
Sending & receiving messages: When a user types a message, Socket.io sends it to the server, which then shares it with all connected users.
Updating the chat: The messages appear instantly on everyone's screen by updating the web page as soon as a new message is received.
Multiple users: Since Socket.io supports broadcasting, every user in the chat room can see all messages in real time.

Setting Up Your NodeJS Chat App Project

Here's a structured guide to setting up your project:

We will start off by creating a new folder called socket-chat-app. Open your command prompt and navigate to the folder we just created.

Step 1: Create Project Directory

mkdir chat-app && cd chat-app
npm init -y

Step 2: Initialize NodeJS Project

Now, Initialize the node package by typing in the following command in the terminal:

npm init -y

Step 3: Install Dependencies

This will create a package.json file for us so that we can install the necessary libraries. Now type in the command:

npm install express socket.io

Step 4: Create Project Files

Now, in the socket-chat-app folder, create two files - index.html and index.js:

touch index.html index.js

Project Structure

Finally, your folder structure should look like this

Folder Structure

Implementation: Below is the implementation of the above approach to creating a real-time chat application using socket.io and NodeJs:

HTML Form: Contains input fields for the user's name and message.
Socket.io Client Library: Included via <script src="/socket.io/socket.io.js"></script>.
Client-Side JavaScript:
- Initializes a Socket.io connection (let socket = io();).
- Handles form submissions, emitting send name and send message events to the server.
- Listens for send name and send message events from the server to display chat messages.
- Uses tailwind css cdn for styling.

HTML


 <html>
<head>
    <title>Chat app using Socket IO and Node JS</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>

<body>
    <h1 class="font-bold text-green-500 
               text-3xl text-center mt-5">
          GeeksforGeeks
      </h1>
    <div>
        <h2 class="font-semibold text-xl 
                   text-center mt-5" 
            id="logo">
              Chat App using Socket io
          </h2>
    </div>
    <form class="flex flex-col justify-center 
                 items-center mt-5" 
          id="form">
        <input class="border border-gray-400 
                      rounded-md mt-5 p-1" 
               type="text" 
               placeholder="Name" 
               id="myname">
        <input class="border border-gray-400 
                      rounded-md mt-5 p-1" 
               type="text" 
               placeholder="Message" 
               id="message">
        <button class="bg-blue-500 rounded-md p-2 
                       text-white mt-5">
              Send
          </button>
    </form>
    <div class="flex flex-col justify-center 
                items-center mt-5" 
         id="messageArea">
    </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
    let socket = io();
    let form = document.getElementById('form');
    let myname = document.getElementById('myname');
    let message = document.getElementById('message');
    let messageArea = document.getElementById("messageArea");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        if (message.value) {
            socket.emit('send name', myname.value);
            socket.emit('send message', message.value);
            message.value = "";
        }
    });
    socket.on("send name", (username) => {
        let name = document.createElement("p");
        name.style.backgroundColor = "grey";
        name.style.width = "100%";
        name.style.textAlign = "center";
        name.style.color = "white";
        name.textContent = username + ":";
        messageArea.appendChild(name);
    });
    socket.on("send message", (chat) => {
        let chatContent = document.createElement("p");
        chatContent.textContent = chat;
        messageArea.appendChild(chatContent);
    });
</script>

</html>

JavaScript


 //index.js

const express = require('express');
const app = express();
const { Server } = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = new Server(server);
const port = 5000;

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

io.on('connection', (socket) => {
    socket.on('send name', (username) => {
        io.emit('send name', (username));
    });

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

server.listen(port, () => {
    console.log(`Server is listening at the port: ${port}`);
});

In this code

Express Web Server: The code uses Express to create a basic web server and an HTTP server with the http module.
Serving HTML: When users visit the root URL (/), the server sends index.html to the client.
Socket.IO Integration: Socket.IO enables real-time communication between the server and client.
Event Handling: The server listens for two events from the client: send name and send message, emitting these to all connected clients.
Server Setup: The server runs on port 5000 and logs a message when it starts, indicating it's ready for connections.

Steps to run the application: Write the below code in the terminal to run the server

node index.js

Output: Open your browser and open two tabs with the URL: http://localhost:5000 so that we have two clients that can chat with each other. Following is the output of our chat app:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4