ChatWave: Real-Time Chat App with MEAN Stack and Socket.IO

3 Oct, 2026

ChatWave is a real-time chat application built with the MEAN stack and Socket.IO. Users join rooms, send instant messages, see who is online and watch typing indicators, while MongoDB keeps the full conversation history.

Real-time features done properly: authenticated sockets, room based events, message persistence and a UI that stays in sync using RxJS.

Key features

Instant messaging

Messages travel over WebSockets through Socket.IO and appear for everyone in the room without refreshing the page.

Rooms and direct chats

Join public rooms or start one-to-one conversations. Each room is its own Socket.IO channel.

Online presence

See who is online right now. Presence updates the moment a user connects or leaves.

Typing indicators

A lightweight event shows when someone is typing and clears itself when they stop.

Message history

Every message is stored in MongoDB, so history loads in pages as you scroll up.

Authenticated sockets

The JWT is verified during the Socket.IO handshake, so only signed-in users can connect.

How it works

The user logs in and receives a JWT from the Express API.
Angular opens a Socket.IO connection and sends the token in the handshake.
The server verifies the token, joins the user to their rooms and broadcasts a presence update.
Sending a message emits an event, the server saves it with Mongoose and broadcasts it to the room.
RxJS streams in Angular push new messages and presence changes into the UI as they arrive.

Architecture and design decisions

Real-time apps need a clear event contract between the client and the server. ChatWave keeps that contract small and explicit.

A typed event list shared by client and server, so message, typing and presence events never drift apart.
An Angular service wraps the socket and exposes RxJS observables, keeping components simple.
Paginated history loaded through REST while live messages arrive through sockets.
Rate limiting on message events to stop spam and protect the server.

Tech stack

MongoDBDatabase
Express.jsAPI framework
AngularFrontend
Node.jsRuntime
Socket.IOReal-time events
RxJSReactive streams
TypeScriptLanguage
JWTAuthentication
Tailwind CSSStyling

What this project demonstrates

ChatWave covers the hard parts of real-time development in the MEAN stack: securing WebSocket connections, designing events, combining REST with sockets, and handling reconnects so the conversation never loses messages.