Real-time & Communication
WebSocket and Server-Sent Events solve the same problem — data arriving without the client asking for it — but in different ways. WebSocket opens a real bidirectional channel, needed when the client also has to talk back — like in a chat. SSE is simpler and runs over plain HTTP: great for event feeds and notifications that only flow from server to client. This demo will put both approaches side by side, including: what happens when the connection drops?
Technologies
- WebSocket API
- Ably/Pusher
- Server-Sent Events
- Next.js API Routes (streaming)
Architecture
- WebSocket (bidirectional) and Server-Sent Events (unidirectional) channels coexisting in the same feature
Concepts
- WebSocket lifecycle
- SSE vs WebSocket
- Optimized UI
- Broadcast pattern
Demo area
The interactive demo for this feature will be available soon.
Coming Soon
The interactive demo for Real-time & Communication is currently under development. The architecture and technical details are documented above.
Dashboards
Observability dashboard inspired by tools like Grafana, simulating the real-time health of a distributed application through metrics, events, interactive charts, and incident scenarios.
Micro-frontend Architecture
A living diagram of this project's Feature-Sliced Design, plus a Module Federation demo showing two independent micro-apps side by side.