Building a Real-time Chat Application with Node.js and

Real-time chat applications have become an essential part of our daily lives. With the rise of online messaging, it has become necessary to create chat applications that provide real-time communication. In this article, we will walk you through the process of building a real-time chat application using Node.js and


Before we begin, make sure you have Node.js installed on your machine. You can download it from the official Node.js website. Also, we will be using the Express framework for Node.js, so make sure that is installed as well. You can install it by running the following command:

npm install express --save

Finally, we will be using to handle real-time communication. You can install it by running the following command:

npm install --save

Setting up the Project

First, let’s create a new Node.js project by creating a new directory and running npm init in the terminal. Once the project is created, create a new file called server.js.

In server.js, import the required dependencies and create a new instance of the Express application:

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('')(http);

Here, we create a new instance of the Express application and a new instance of the http.Server class. We also create a new instance of the class, which will handle real-time communication.

Next, create a route for serving the HTML file that will contain the chat application. We will create this file later in the article:

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

Finally, start the server by listening on a specific port:

const PORT = process.env.PORT || 3000;

http.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);

Building the Chat Application

Now let’s create the HTML file that will contain the chat application. Create a new file called index.html in the project directory and add the following code:

<!DOCTYPE html>
    <title>Real-time Chat Application</title>
    <script src="/"></script>
    <script src=""></script>
      <h1>Real-time Chat Application</h1>
      <form id="chat-form">
        <input type="text" name="username" placeholder="Username" required />
        <input type="text" name="message" placeholder="Message" required />
        <button type="submit">Send</button>
    <div id="chat-box"></div>

      const socket = io();

      $('#chat-form').submit(function (e) {
        e.preventDefault(); // prevents page reloading
        socket.emit('chat message', {
          username: $('input[name="username"]').val(),
          message: $('input[name="message"]').val(),
        return false;

      socket.on('chat message', function (msg) {
          $('<p>').text(`${msg.username}: ${msg.message}`)

This code defines a simple HTML form that allows users to enter their username and message.

Handling Real-time Communication with

Now that we have the basic structure of our chat application, let’s handle real-time communication using

In server.js, we need to define a listener for the connection event that is emitted whenever a client connects to the server:

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

This code logs a message to the console whenever a new user connects to the server.

Next, we need to define a listener for the chat message event that is emitted by the client when a message is sent:

socket.on('chat message', (msg) => {
  console.log('message: ' + msg);

This code logs the message sent by the client to the console.

Finally, we need to emit the chat message event to all connected clients when a message is received:

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

This code emits the chat message event to all connected clients, which allows them to receive and display the message in real-time.

Running the Chat Application

To run the chat application, start the server by running the following command in the terminal:

node server.js

Then, open a web browser and navigate to http://localhost:3000. You should see the chat application displayed in the browser. Enter a username and message in the form and click the “Send” button. The message should be displayed in the chat box in real-time.


In this article, we have walked you through the process of building a real-time chat application using Node.js and We started by setting up the project and creating the basic structure of the chat application. We then used to handle real-time communication between the client and server. Finally, we ran the chat application and tested it by sending messages in real-time.

Note that this is just a basic example of building a real-time chat application. There are many more advanced topics to cover, such as authentication, authorization, database integration, and more. However, this article provides a good starting point for building your own real-time chat application.