Building a Real-time Chat Application with Express.js

In the age of instant communication, real-time chat applications have become an integral part of our digital lives. Whether it’s for social networking, customer support, or team collaboration, the need for seamless, responsive chat functionality is undeniable. Express.js, a popular Node.js web application framework, is a powerful tool for building these types of applications. In this article, we’ll explore how to create a real-time chat application using Express.js.

Prerequisites

Before we dive into building our chat application, make sure you have the following tools and technologies installed:

Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official website (https://nodejs.org/).
Basic JavaScript knowledge: A fundamental understanding of JavaScript is necessary to work with Express.js.
A code editor: You can use any code editor or integrated development environment (IDE) of your choice. Popular options include Visual Studio Code, Sublime Text, or Atom.
Terminal or Command Prompt: You’ll need a terminal or command prompt to run commands and start your Express.js application.

Setting Up the Project

Let’s get started by creating a new directory for our chat application and initializing a Node.js project. Open your terminal and follow these steps:

# Create a new directory for your project
mkdir express-chat-app

# Change to the project directory
cd express-chat-app

# Initialize a new Node.js project
npm init -y

This will create a package.json file with default settings for your project.

Installing Dependencies

For our chat application, we’ll need a few dependencies. We’ll use Express.js for handling HTTP requests and Socket.io for real-time communication. Install these packages by running the following commands:

npm install express socket.io

Creating the Express.js Server

Now, it’s time to set up the Express.js server. Create an index.js file in your project directory and open it in your code editor. Then, add the following code:

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);

// Serve static files from the 'public' directory
app.use(express.static('public'));

// Set up a route to serve the HTML file
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

// Set up the WebSocket server
io.on('connection', (socket) => {
  console.log('A user connected');

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

const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

In this code, we’ve created an Express.js server that also serves static files from a ‘public’ directory. We set up a route to serve an HTML file (which we’ll create shortly) and initialized a WebSocket server using Socket.io. The WebSocket server handles user connections and disconnections.

Building the Chat Interface

Next, create an index.html file inside the ‘public’ directory. This HTML file will serve as the chat application interface. Here’s a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>Express.js Chat App</title>
</head>
<body>
  <h1>Welcome to the Chat App</h1>
  <div id="chat">
    <ul id="messages"></ul>
    <input id="input" autocomplete="off" /><button>Send</button>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    const socket = io();

    $('form').submit(() => {
      socket.emit('chat message', $('#input').val());
      $('#input').val('');
      return false;
    });

    socket.on('chat message', (msg) => {
      $('#messages').append($('<li>').text(msg));
    });
  </script>
</body>
</html>

This HTML file contains a basic structure with a form for sending messages. It uses Socket.io to send and receive chat messages in real-time.

Adding Real-Time Chat Functionality

Now, let’s implement the real-time chat functionality on the server. Update your index.js file with the following code:

// ...

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

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

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

// ...

Here, we’ve added an event listener for the ‘chat message’ event. When a user sends a message, the server broadcasts it to all connected clients using io.emit.

Starting the Application

You’re now ready to run your Express.js chat application. In your terminal, navigate to your project directory and run the following command:

node index.js

Your server should start, and you’ll see the message, “Server is running on port 3000.” Open a web browser and go to http://localhost:3000 to access your chat application.

Conclusion

In this tutorial, we’ve explored how to build a real-time chat application using Express.js and Socket.io. You’ve learned how to set up an Express.js server, create a chat interface, and add real-time chat functionality. With this foundation, you can further enhance your chat application by implementing features like user authentication, private messaging, and message persistence.

Building a chat application is a great way to learn about real-time web applications and enhance your Node.js and Express.js skills. Happy coding, and best of luck with your chat application development!