A Messenger-style chat UI with Blazor Server and SignalR
BlazerSignalRChat is a faithful clone of the Messenger.com web interface, built with Blazor Server and SignalR: three-column layout, conversation bubbles, reactions, typing indicators, presence — all realtime, with no database and no login.
How to demo multi-user chat with zero infrastructure
Every browser tab is its own demo user (an identity stored in sessionStorage).
Open three tabs and you have Alice, Bob and Carol chatting live. All state is in-memory
(history capped at 500 messages per room) and resets on restart. For a UI demo this is a
superpower: no accounts, no seed data, no cleanup.
What SignalR is, in one paragraph
SignalR is ASP.NET's realtime library: the server keeps a persistent connection to each
browser and can call JavaScript methods on it directly (Clients.All.broadcast(...)),
while clients call server-side hub methods the same way. Under the hood it picks WebSockets
and falls back gracefully. In this app the /chat hub relays messages, reactions,
typing indicators and presence; a hosted background service also pushes a telemetry update
every three seconds to show server-originated push.
UI details worth stealing
- Date separators (
M/d/yy, h:mm tt) and gray-vs-blue bubbles — the small conventions that make chat readable. - Reaction pills on the bubble corner, syncing live to everyone including late joiners; clicking your own reaction again removes it.
- Typing indicators that self-expire after 4 seconds — never trust a client to send "stopped typing".
- Per-room unread badges that survive room switching, because every tab joins every room at startup.
- Auto-reconnect with a status pill — connections drop; the UI should say so.
Relationship to the other Blazor sample
This is the "wide" version of realtime UI; the BlazorSignalR article is the minimal version. Read them together: same transport, opposite scopes.
Repository: github.com/bobhuang1/BlazerSignalRChat