What 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 & Nodejs, providing a step-by-step guide from setup to deployment.

Let`s Started Build Real-time Chat App with Socket.io & NodeJS

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
5
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});
23
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>
15
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});
18
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});
6
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});
15

Server-side (index.js)

JavaScript
1io.on('connection', (socket) => {
2    socket.on('chat message', (data) => {
3        io.emit('chat message', data);
4    });
5});
6
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
2
Follow these steps to deploy:

Log in to Heroku

bash
1    heroku login
2

Create a new Heroku app

bash
1    heroku create
2

Deploy your code

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

Open your app

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

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.

Free $20 Balance for AI Voice Agents & Video Calls

FAQ