Real-Time Chat App: instant messaging with Socket.io

The problem

A chat is only useful if messages arrive the moment they are sent, without anyone refreshing the page. People also need to see who is available before they write. A normal request and response cycle cannot push a message to the other person, so a chat needs a live connection.

The solution

Socket.io keeps a live connection open between each signed-in browser and the Node.js server. When someone sends a message, the server saves it to MongoDB and, if the receiver is online, pushes it to them straight away. The React interface listens for a newMessage event and updates the conversation instantly.

Features

• Register and log in with JWT authentication, with passwords hashed using bcrypt
• Real-time one-to-one messaging with Socket.io
• Online and offline status for every user
• Message history stored in MongoDB
• User search in the sidebar
• Automatic scroll to the latest message

How it works

Authentication

1. A new user registers, and the password is hashed before it is saved in MongoDB.
2. On login the server issues a JWT, which the browser stores.
3. Every API request sends the token in an Authorization: Bearer header.
4. A protect middleware on the server verifies the token before any private route runs.

Real-time messaging and online status

1. After login the front end connects to Socket.io with the user's id.
2. The server keeps a map from each user id to their socket and shares the list of online users with every client.
3. A sent message is saved to the database first, then emitted to the receiver if they are online.
4. When a user disconnects they are removed from the map and the online list is sent out again.

API endpoints

• POST /api/auth/register and POST /api/auth/login for sign-up and sign-in
• GET /api/auth/users and GET /api/auth/me for the user list and the current user
• GET /api/messages/:userId to load a conversation
• POST /api/messages/send/:receiverId to send a message

All routes except register and login require a valid token. The code is split into a back end (models, routes, middleware and socket handling) and a front end (pages, components and a socket context), so each part is easy to find.

Read the code

The full source is on GitHub, including setup steps. If you need something similar, see my full-stack development service.

Technologies

The interface is built with React and Vite and styled with Tailwind CSS. The API runs on Node.js and Express.js, with users and messages stored in MongoDB through Mongoose. Socket.io handles the real-time layer, and JWT with bcrypt handles authentication.

• React
• Vite
• Tailwind CSS
• Node.js
• Express.js
• MongoDB
• Mongoose
• Socket.io
• JWT
• bcrypt