Tutorials SignalR Real-Time Tutorial
Server-Sent Events (SSE) — Complete Guide
Server-Sent Events (SSE) — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of SignalR Real-Time Tutorial on Toolliyo Academy.
On this page
SignalR Real-Time Tutorial · Lesson 5 of 100
Server-Sent Events (SSE)
Foundations & Hubs → Clients & Apps → Scale & Secure → Enterprise
Foundations & Hubs · 1 — Connect · ~12 min read · Module 1: Real-Time Foundations
1. Introduction
Today: Server-Sent Events (SSE). Read the diagram, run the sample, then change one line and watch DevTools.
SSE is a one-way HTTP stream from server to browser. Perfect when only the server talks (tickers, logs, notifications). Simpler than WebSockets when you do not need client→server duplex on the same pipe.
2. Real-world story
CollabDesk (SaaS) needs multi-user presence and comments. They apply Server-Sent Events (SSE) inside ShopNest.Live so updates appear without refresh.
Outcome: CollabDesk delivers multi-user presence and comments with a clear SignalR/SSE design.
3. Why it matters
Without solid server-sent events (sse), users refresh endlessly, servers burn CPU on polling, or messages vanish when you scale to multiple pods.
4. Visual understanding
Read this diagram top to bottom — the mental model for Server-Sent Events (SSE).
Browser EventSource
│ GET text/event-stream
▼
ASP.NET Core endpoint
│ data: {...}\n\n
▼
Chart / toast updates
(Client→server uses normal HTTP POST)
5. Key concepts (easy words)
| Idea | Meaning |
|---|---|
| Topic | Server-Sent Events (SSE) — one skill in the real-time stack |
| ShopNest.Live | Our sample platform: tracking, chat, alerts, dashboards |
| Transport | WebSocket, SSE, or long polling under the hood |
| Hub | C# class with methods clients can call |
6. How it works
- Definition: SSE is a one-way HTTP stream from server to browser. Perfect when only the server talks (tickers, logs, notifications). Simpler than WebSockets when you do not need client→server duplex on the same pipe.
- Prefer groups/users over global broadcast for multi-tenant data.
- Persist important messages in a database; SignalR is the live pipe, not the source of truth.
- Plan scale-out (Redis or Azure SignalR) before production traffic.
7. SignalR vs SSE vs WebSockets
| Option | When to use |
|---|---|
| SignalR | Duplex hubs, groups, JWT, great default for .NET apps |
| SSE | One-way server→client, simple for tickers and logs |
| Raw WebSocket | Max control, you own protocol and scale |
8. Try this example
Create an ASP.NET Core app with the SignalR package (or an SSE endpoint). Run dotnet run and test in the browser DevTools.
app.MapGet("/sse/ticks", async (HttpResponse res, CancellationToken ct) =>
{
res.Headers.ContentType = "text/event-stream";
while (!ct.IsCancellationRequested)
{
await res.WriteAsync($"data: {DateTime.UtcNow:O}\n\n", ct);
await res.Body.FlushAsync(ct);
await Task.Delay(1000, ct);
}
});Line walkthrough
| Code | What it means |
|---|---|
app.MapGet("/sse/ticks", async (HttpResponse res, CancellationToken ct) => | Part of the SignalR/SSE example — read with surrounding lines. |
{ | Part of the SignalR/SSE example — read with surrounding lines. |
res.Headers.ContentType = "text/event-stream"; | SSE stream write or browser listener. |
while (!ct.IsCancellationRequested) | Part of the SignalR/SSE example — read with surrounding lines. |
{ | Part of the SignalR/SSE example — read with surrounding lines. |
await res.WriteAsync($"data: {DateTime.UtcNow:O}\n\n", ct); | SSE stream write or browser listener. |
await res.Body.FlushAsync(ct); | Part of the SignalR/SSE example — read with surrounding lines. |
await Task.Delay(1000, ct); | Part of the SignalR/SSE example — read with surrounding lines. |
9. Another real-world angle
10. Best practices checklist
- Use withAutomaticReconnect() on JS/.NET clients.
- Authorize hubs; never trust client-supplied tenant/order ids without checks.
- Keep payloads small; send IDs + deltas, not entire documents.
- Log connectionId and userId for support debugging.
- Load-test concurrent connections before a sale or match day.
11. Common mistakes
- Broadcasting to Clients.All for private order/chat data.
- Scaling to multiple pods without Redis or Azure SignalR.
- Putting secrets or huge payloads on the wire every second.
- Forgetting automatic reconnect on the client.
12. Practice on your machine
- Create or open ShopNest.Live.Api (ASP.NET Core + SignalR package).
- Apply the Server-Sent Events (SSE) pattern from the example.
- Run the app and open a test client (JS SignalR client or EventSource).
- Confirm one successful push in DevTools Network.
- Note how you would scale this (single node vs Redis/Azure SignalR).
Experiments
- Change the hub method or event name and update the client to match.
- Send to a group instead of All (or the reverse) and observe who receives it.
- Disconnect Wi-Fi briefly and watch reconnect behavior.
13. FAQ
Should I use SignalR or SSE for Server-Sent Events (SSE)?
Use SignalR for duplex chat/tracking/collaboration. Use SSE when the server only streams (prices, logs, one-way alerts).
Do I need Redis on day one?
Not for a single instance lab. Add Redis backplane or Azure SignalR before running multiple replicas.
Where do I practice?
ASP.NET Core 8 app + @microsoft/signalr in a simple HTML/React page. Watch the WebSocket frame list in DevTools.
14. Interview questions
What is Server-Sent Events (SSE)?
Server-Sent Events (SSE) is a real-time skill on ShopNest.Live. Explain the problem, the diagram, and one C#/JS snippet.
How do you scale SignalR?
Single node first; then Redis backplane or Azure SignalR Service so messages reach clients on every pod.
SignalR vs SSE?
SignalR = bidirectional + fallback + groups. SSE = unidirectional HTTP stream, ideal for dashboards and tickers.
15. Remember
- You can explain Server-Sent Events (SSE) in plain English.
- You have a runnable hub/SSE snippet to practice.
- You know a scale or security risk for this pattern.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
