How to Build a Real-time Chat App using Flutter, Socket.io & NodeJS?
Building a real-time chat app using Socket.io and NodeJS is a great way to create an interactive, dynamic platform for instant messaging. Socket.io provides a simple and efficient way to implement real-time communication between clients and servers, enabling smooth and seamless message delivery. By leveraging NodeJS, a powerful and scalable backend, you can manage multiple connections efficiently. In this blog, we will guide you through the steps to build a fully functional chat app, from setting up the server to handling user messages in real-time.
What Is Socket.io?
Before we dive into the steps of building a real-time chat app, it’s important to understand Socket.io. Socket.io is a JavaScript library that enables real-time, bidirectional communication between web clients and servers. It uses WebSockets, a protocol that allows full-duplex communication channels over a single TCP connection. Socket.io provides event-driven communication, making it perfect for chat applications where users need to send and receive messages instantly.
The beauty of using Socket.io for chat apps lies in its ability to establish a persistent connection between the client and server, allowing data to flow in both directions seamlessly. This connection enables the real-time functionality crucial for messaging apps.
Why Use Socket.IO Over HTTP Rest API?
The HTTP protocol functions as a request-response mechanism, where a client initiates a request for data from a server, which then returns a corresponding response. One of the primary limitations of this approach is that each message requires a separate request-response interaction. Additionally, because the HTTP protocol does not facilitate persistent connections, multiple connections must be created for each message sent. This results in heightened network latency, which can compromise the intended efficiency of a real-time chat application.
In contrast, Socket.IO functions on a continuous bi-directional data transfer mechanism, ensuring that the connection remains active and that messages are transmitted and received either instantaneously or with minimal latency.
Why To Use Node.js To Build Chat App?
Node.js is an open-source, cross-platform JavaScript runtime built on Chrome’s V8 JavaScript engine. It’s a non-blocking, event-driven architecture, making it ideal for I/O-heavy applications like a chat app.
Node.js is well-suited for a chat app Node JS because of its performance under real-time conditions. Unlike traditional server-side technologies, Node.js can handle numerous concurrent connections efficiently without getting bogged down. This makes it scalable and responsive, perfect for building a node chat app that can accommodate hundreds or thousands of users.
Node.js also works seamlessly with JavaScript, meaning that you can use the same language on both the client and server sides. This reduces the need for context switching and makes the development process more streamlined.
Key Components of a Real-Time Chat App
When building a chat app Node JS, several components must come together. Let’s explore the essential building blocks of a build a real-time chat app using Socket.io:
1. Server-Side with Node.js
The server is responsible for handling communication between users. When a message is sent from one user, the server broadcasts it to other users in the same chat room or conversation. Node.js, with the help of Socket.io, is perfect for handling these real-time events.
2. Client-Side with HTML/CSS and JavaScript
The front end of a chat application is built using HTML, CSS, and JavaScript. The client-side application interacts with the server through Socket.io, enabling the seamless exchange of messages. You will create a user interface (UI) for your chat app where users can send and receive messages, view the chat history, and perhaps even see who’s online.
3. WebSockets for Real-Time Communication
At the heart of any real-time chat app is WebSockets. They allow for persistent connections between the client and server, ensuring that messages are delivered instantly without needing to refresh the page. Socket.io simplifies the usage of WebSockets by providing a higher-level API to manage connections, errors, and events more easily.
Let’s Understand what is room in socket.io
So, let’s dive into the blog, to understand the idea of utilizing rooms and their application with socket.io. We will see how to make a realtime chat app using Node.js as the backend and Flutter as the frontend. We will use sockets to communicate between devices.
In Socket.IO, a room serves as a virtual channel that enables clients to join designated groups for the purpose of targeted message dissemination. This functionality facilitates the separation of discussions, such as private conversations, group discussions, and gaming rooms, rather than sending messages to all connected clients indiscriminately.
How Rooms Work in Socket.IO:
Let’s understand the room concept with the simple diagram:
Previously, when room was not used in the socket.io then a user sent a message that was then broadcasted by the server to all other users.
Through the implementation of rooms, we can establish one-on-one communication.
Example of Chat Application
- Server-side Code (Node.js)
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, {
cors: { origin: "*" }
});
io.on('connection', (socket) => {
console.log('User connected:', socket.id);
// When user connect to server, store user’s socket_id to database so that we can use it when we want to emit data to that user
socket.on("sendMessage", (data) => {
// store message to database
Chat.create(data);
// emit data to other user to do that you have to fetch other user's socket_id from database
socket.to(receiver_socket_id)
.emit("messageReceived", data);
});
});
// same you can create other events for different purpose
socket.on("isTyping", (data) => {
isTyping(io, socket, data);
});
// Sending messages to a specific room
socket.on('sendMessage', ({ room, message }) => {
io.to(room).emit('message', message); // Sends to all clients in the room
});
socket.on('disconnect', () => {
console.log('User disconnected:', socket.id);
});
});
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});All users connected to our server are identified by a unique socketId, which they employ to access the chat room. As a result, if someone desires to communicate with a particular user, they need to target that user’s socketId.
2. Client Side Code (JS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="message" placeholder="Enter Message" />
<button onclick="sendMessage()">Send Message</button>
<div id="message_list">
<!-- show message list here -->
</div>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script>
const socket = io("http://localhost:3000");
function sendMessage() {
const room = document.getElementById("roomName").value;
const message = document.getElementById("message").value;
socket.emit("sendMessage", { message });
}
socket.on("messageReceived", (msg) => {
console.log("Message:", msg);
// append message in message list
document.getElementById("message_list").append(msg);
});
</script>
</body>
</html>Benefits of Using Rooms in Socket.IO:
The application of rooms in Socket.IO confers multiple advantages, notably for chat applications, multiplayer gaming experiences, live streaming, and real-time collaboration tools.
- Message Broadcasting: Rather than transmitting messages to every connected client, rooms enable the targeted broadcasting of messages to particular users within a group.
- Personal & Group Messaging: The functionality of rooms enables users to conduct chats that are either personal or collaborative in nature.
- Scalability for Large Applications: Effectively manages a huge number of users, whether it’s thousands or millions. Reduces network clutter by sending data only to those who really need it. Great for gaming, video chats, and live stock market info.
- Secure Communication: Users in separate rooms can’t pick up messages from other rooms. This is great for corporate chats, secure messaging, and sensitive discussions.
- Simplifies Multi-User Interactions: This is common in multiplayer games, ensuring that players in the same room only get the updates that are important to them. It’s also used in collaborative apps, allowing users in the same document to see live updates.
- Supports Dynamic Room Creation: Whenever users start a group chat, meeting, or game, new rooms can be created on the spot.
So by using room in chat application with socket.io ensure the scalability, security and efficiency.
Conclusion:
Therefore, Implementing the room technique in socket.io with Node.js as the backend and Flutter as the frontend is a good move. It helps save on server bandwidth and prevents the server from being overwhelmed by too many connections.
Contact us to make a chat application to bring it to real life, contact us by email at info@primocys.com, or connect us on whatsapp.
Here is our website to explore https://primocys.com/
