Building a multi-room chat application with Express.js and Socket.IO

17 Sep 2023

In this tutorial, we will explore how to build a real-time multi-room chat application using Express.js and Socket.IO. With Socket.IO, we can create web applications that support bidirectional, event-driven communication between the client and the server.

Prerequisites

To follow along with this tutorial, you need to have the following:

Node.js installed on your machine
A basic understanding of JavaScript and web development concepts

Setting Up the Project

Create a new directory for your project and navigate into it.
Initialize a new Node.js project using the following command:

$ npm init -y

Install the necessary dependencies by running the following command:

$ npm install express socket.io

Building the Server

Create a new file called server.js and open it in your favorite code editor.
Import the required modules:

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');

Create an instance of Express.js and initialize a server:

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

Create an instance of Socket.IO:

const io = socketIO(server);

Set up the route for serving the client-side files:

app.use(express.static(__dirname + '/public'));

Set up the event handlers for when a client connects and disconnects:

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

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

Start the server:

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

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

Implementing the Chat Functionality

Create a new folder called public in your project directory.
Inside the public folder, create index.html and style.css files.
Open index.html and add the following content:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Multi-Room Chat Application</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="chat-container">
    <div id="room-list">
      <h2>Rooms</h2>
      <ul id="rooms"></ul>
    </div>
  
    <div id="message-container">
      <h2>Messages</h2>
      <ul id="messages"></ul>
    </div>
  
    <div id="input-container">
      <input type="text" id="message-input" placeholder="Type your message...">
      <button id="send-button">Send</button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
  <script src="script.js"></script>
</body>
</html>

Open style.css and add the following styles:

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#chat-container {
  display: flex;
  height: 100vh;
}

#room-list, #message-container {
  flex: 1;
  border-right: 1px solid #ccc;
  padding: 10px;
}

#input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #ccc;
}

#message-input {
  flex: 1;
  margin-right: 10px;
  padding: 5px;
}

#send-button {
  padding: 5px 10px;
}

Create a new file called script.js inside the public folder.
Open script.js and add the following JavaScript code:

const socket = io();

const roomsContainer = document.getElementById('rooms');
const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

socket.on('connect', () => {
  const username = prompt('Enter your username:');
  socket.emit('setUsername', username);
});

socket.on('roomList', (rooms) => {
  roomsContainer.innerHTML = '';

  rooms.forEach((room) => {
    const li = document.createElement('li');
    li.innerText = room;
    li.addEventListener('click', () => {
      socket.emit('joinRoom', room);
    });
    roomsContainer.appendChild(li);
  });
});

socket.on('message', (message) => {
  const li = document.createElement('li');
  li.innerText = message;
  messagesContainer.appendChild(li);
});

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

Finally, start the server by running the following command:

$ node server.js

Conclusion

In this tutorial, we have built the foundation of a multi-room chat application using Express.js and Socket.IO. Socket.IO allows us to establish real-time, bidirectional communication between the client and the server, enabling seamless chat functionality. From here, you can expand the application by adding user authentication, implementing private messaging, and enhancing the user interface.

Don’t forget to follow us for more exciting tutorials! #chatapplication #expressjs #socketio