Real-Time Web App Development with Node.js and WebSockets
Some features cannot wait for a page refresh: a chat message, a new support ticket, an appointment request, an attendance mark. WebSockets keep one connection open between the browser and the server, so the server can push an update the moment something happens instead of the page asking again and again. Done well, the app feels instant. Done badly, it drops messages, shows duplicates and drains batteries.
I build the real-time layer as a first-class part of the app. That starts with an event contract, since every message type needs a clear shape, and continues with a single socket service in Angular that reconnects after a drop, avoids duplicate messages and keeps the interface in sync using signals and RxJS. Large uploads travel over normal HTTP requests so they never block the live channel.
What's included
- Chat with private and group rooms, presence, typing indicators and read receipts
- Live notifications that arrive as a snapshot first and then one push per event
- Automatic reconnection and message de-duplication
- Cursor-based message history so long conversations stay fast
- Attachments uploaded over HTTP and referenced by id over the socket
- Live camera streams where the app needs them
How we'll work
Define the events
We list every event the app sends and receives, with its payload and who may see it, so client and server agree before coding.
Build one socket layer
A single service owns connecting, authenticating, reconnecting and routing events, so screens only subscribe to what they need.
Handle the bad days
Dropped connections, duplicate events, sleeping tabs and slow networks are tested on purpose instead of being found by users.
Ship and watch
Deploy behind nginx with proxy settings that allow connection upgrades, then watch connection counts and errors in the first weeks.
Case studies
- ChatMessengerMulti-tenant team chat on native WebSockets, with presence, typing indicators, read receipts and attachments.
- Student Management SystemA teacher camera streams frames over WebSockets, and face-recognition matches appear in the lecture view live.
- MyCityHelpReal-time ticket notifications over WebSockets that reconnect on their own and are grouped per ticket.
- AA Bridal StudioLive appointment notifications in the staff dashboard and the website header.
Frequently asked questions
When should I use WebSockets instead of polling?
Use WebSockets when updates must appear within a second or two and arrive unpredictably, such as chat or alerts. For data that changes every few minutes, plain polling or a page refresh is simpler and cheaper.
Do I need Socket.IO or are native WebSockets enough?
Native WebSockets are enough for most business apps and keep the bundle small; I wrap them in one service with reconnection. Socket.IO helps when you need fallbacks for very restrictive networks.
Can WebSockets work with my existing Node.js API?
Yes. A WebSocket server can run beside your Express API and share its authentication, so a user token or session decides what each person may receive.
How do WebSockets behave behind nginx or a load balancer?
They need proxy settings that allow connection upgrades and long-lived connections. With more than one server instance you also need a shared message channel, so every instance can reach every user.