NodeJs

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

Posted on by thuan

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 Socket.io.

Prerequisites

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:

css
npm install express --save

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

lua
npm install socket.io --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:

javascript
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(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 socket.io 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:

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

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

javascript
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:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Real-time Chat Application</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div>
      <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>
      </form>
    </div>
    <div id="chat-box"></div>

    <script>
      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(),
        });
        $('input[name="message"]').val('');
        return false;
      });

      socket.on('chat message', function (msg) {
        $('#chat-box').append(
          $('<p>').text(`${msg.username}: ${msg.message}`)
        );
      });
    </script>
  </body>
</html>

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

Handling Real-time Communication with Socket.io

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

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

javascript
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:

javascript
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:

javascript
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.

Conclusion

In this article, we have walked you through the process of building a real-time chat application using Node.js and Socket.io. We started by setting up the project and creating the basic structure of the chat application. We then used Socket.io 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.

0368826868