End of Life for Twilio Programmable Video - Upgrade to VideoSDKLearn More

How to Build Real-time Chat Application using Socket.io?

Learn how to build a real-time chat application using Socket.io with our comprehensive step-by-step guide. From setup to deployment, get practical examples and tips to create your own chat app.

Introduction and Overview

In today's digital age, real-time communication has become a cornerstone of web applications, providing users with instant interaction and feedback. Whether it's for customer support, social networking, or collaborative workspaces, the need for real-time chat applications is ever-growing. One of the most popular technologies to implement such functionality is Socket.io.
Socket.io is a JavaScript library that enables real-time, bidirectional, and event-based communication between web clients and servers. It abstracts the complexities of WebSockets, making it easier to build robust real-time applications. In this article, we'll delve into how to build a real-time chat app using Socket.io, providing a step-by-step guide from setup to deployment.

What You Will Learn?

This article aims to equip you with the knowledge and skills to create a fully functional real-time chat application using Socket.io. By the end of this guide, you will have learned:
  • How to set up a development environment for a Socket.io project.
  • The basics of creating a server with Express and integrating Socket.io.
  • Building a simple yet effective frontend for the chat application.
  • Handling real-time communication between clients and server.
  • Enhancing the chat application with additional features for a better user experience.
  • Deploying your chat application to a production environment.
Whether you're a seasoned developer looking to expand your skill set or a beginner eager to explore real-time web development, this comprehensive guide will provide you with the necessary tools and insights to build your own Socket.io chat app. Let's get started!

Getting Started Building the Chat App with Socket.io

Before diving into building the chat application, ensure you have the necessary tools and knowledge. You will need Node.js and npm (Node Package Manager) installed on your machine. Additionally, a basic understanding of JavaScript and how web servers work will be beneficial. With these prerequisites in place, you are ready to start building your Socket.io chat app.

Step 1: Setting Up the Project

First, we need to set up a new project directory and initialize it with npm. This will create a package.json file to manage our project's dependencies.

bash

1mkdir socketio-chat-app
2cd socketio-chat-app
3npm init -y
4npm install express socket.io
This command sequence creates a new directory for the project, initializes it with default settings, and installs express and socket.io packages, which are essential for our chat application.

Step 2: Creating the Server

Next, we'll set up an Express server and integrate Socket.io to handle real-time communication. Create a file named index.js and add the following code:

JavaScript

1const express = require('express');
2const http = require('http');
3const socketIo = require('socket.io');
4
5const app = express();
6const server = http.createServer(app);
7const io = socketIo(server);
8
9app.get('/', (req, res) => {
10    res.sendFile(__dirname + '/index.html');
11});
12
13io.on('connection', (socket) => {
14    console.log('a user connected');
15    socket.on('disconnect', () => {
16        console.log('user disconnected');
17    });
18});
19
20server.listen(3000, () => {
21    console.log('listening on *:3000');
22});
This code sets up a basic Express server that serves an HTML file and initializes Socket.io to log when users connect and disconnect.

Step 3: Creating the Frontend

Now, create the frontend of our chat application. Create a file named index.html in the root directory of your project and add the following code:

HTML

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Socket.io Chat App</title>
5</head>
6<body>
7    <ul id="messages"></ul>
8    <form id="form" action="">
9        <input id="input" autocomplete="off" /><button>Send</button>
10    </form>
11    <script src="/socket.io/socket.io.js"></script>
12    <script src="/js/main.js"></script>
13</body>
14</html>
This HTML file creates a simple user interface with a list to display messages and a form to send new messages. It also includes the Socket.io client library and a JavaScript file (main.js) that we will create next.

Step 4: Handling Real-Time Communication

To handle real-time communication, we need to set up event listeners on both the client and server sides. First, create a js directory in the root of your project and add a file named main.js inside it with the following content:

JavaScript

1var socket = io();
2var form = document.getElementById('form');
3var input = document.getElementById('input');
4
5form.addEventListener('submit', function(e) {
6    e.preventDefault();
7    if (input.value) {
8        socket.emit('chat message', input.value);
9        input.value = '';
10    }
11});
12
13socket.on('chat message', function(msg) {
14    var item = document.createElement('li');
15    item.textContent = msg;
16    document.getElementById('messages').appendChild(item);
17});
This JavaScript code sets up the client-side logic to send messages to the server and display incoming messages. Now, update the server-side code in index.js to handle incoming messages and broadcast them to all connected clients:

JavaScript

1io.on('connection', (socket) => {
2    socket.on('chat message', (msg) => {
3        io.emit('chat message', msg);
4    });
5});
With this setup, any message sent by a client will be broadcasted to all connected clients in real time.

Step 5: Enhancing the Chat App

To improve the user experience, let's add features like user notifications, timestamps, and message history. Here’s a brief example of how to add timestamps to messages:

Client-side (main.js)

JavaScript

1form.addEventListener('submit', function(e) {
2    e.preventDefault();
3    if (input.value) {
4        const timestamp = new Date().toLocaleTimeString();
5        socket.emit('chat message', { message: input.value, timestamp });
6        input.value = '';
7    }
8});
9
10socket.on('chat message', function(data) {
11    var item = document.createElement('li');
12    item.textContent = `${data.timestamp} - ${data.message}`;
13    document.getElementById('messages').appendChild(item);
14});

Server-side (index.js)

JavaScript

1io.on('connection', (socket) => {
2    socket.on('chat message', (data) => {
3        io.emit('chat message', data);
4    });
5});
This enhancement adds a timestamp to each message, providing more context to the conversation.

Step 6: Deploying the Chat App

Finally, let's deploy our chat application to a production environment using Heroku. First, ensure you have the Heroku CLI installed. Then, create a Procfile in the root of your project with the following content:
1web: node index.js
Follow these steps to deploy:

Log in to Heroku

bash

1    heroku login

Create a new Heroku app

bash

1    heroku create

Deploy your code

bash

1    git add .
2    git commit -m "Initial commit"
3    git push heroku master

Open your app

bash

1    heroku open
Your chat application is now live and accessible on the web.

Get Free 10,000 Minutes Every Months

No credit card required to start.

Conclusion

Congratulations! You have successfully built and deployed a real-time chat application using Socket.io. Throughout this guide, we covered the setup of the development environment, creation of a server with Express, building a frontend, handling real-time communication, enhancing the chat app with additional features, and deploying it to Heroku.
This project not only demonstrates the power and simplicity of Socket.io but also provides a solid foundation for further exploration and development of real-time applications. Keep experimenting and adding new features to make your chat app even more robust and user-friendly.

Want to level-up your learning? Subscribe now

Subscribe to our newsletter for more tech based insights

FAQ