Server-Sent Events (SSE) are a lightweight streaming\/push technology for pushing updates to a web client over a single long-live HTTP connection.<\/p>\n
For example as use case where your web client connects to a server and periodically receives events or notifications from the server. Alternates to SSE might be long polling the server for updates, web sockets, Signal R etc. SSE is simpler than setting up web sockets and for C#\/.NET developers can be seen to be similar to asynchronous streams.<\/p>\n
All modern browser should support SSE using EventSource. SSE also supports automatic reconnection but one key thing to remember is this is only for one-way<\/strong> updates (unlike Signal R).<\/p>\n ASP.NET Sample<\/strong><\/p>\n Let’s create an ASP.NET server sample with an endpoint \/events<\/em> of type text\/event-stream<\/em>. This will just look and send “ticks” to a client.<\/p>\n Pretty simple. As mentioned we need to set the ContentType to text\/event-stream<\/em>. SSE must never be cached, hence context.Response.Headers.CacheControl = “no-cache”<\/em>. The handler should not return until all responses are sent, i.e. it goes into a loop or similar and writes responses. <\/p>\n It’s also important to note that the SSE spec requires the following wire format<\/p>\n C# client code<\/strong><\/p>\n Let’s look at what’s required for a C# client to interact with our server.<\/p>\n The HttpClient looks like this<\/p>\n Now we’ll created the request tot he \/events<\/em> endpoint and accept the text\/event-stream<\/em> i.e.<\/p>\n Okay, seo we’ve configured things and called the endpoint, now let’s look at how we might read the SSE<\/p>\n In the example code, above, we read each line from the SSE and get each part until we’re ready to put the read data together to write to the console.<\/p>\n Typescript client<\/strong><\/p>\n The following example is a React Typescript implementation of a simply UI with connect buttons etc. to connect to the events URL, using an EventSource we add a listener to and output the SSE’s as they arrive.<\/p>\n\r\napp.MapGet("\/events", async (HttpContext context, CancellationToken cancellationToken) =>\r\n{\r\n context.Response.ContentType = "text\/event-stream";\r\n context.Response.Headers.CacheControl = "no-cache";\r\n\r\n try\r\n {\r\n for (var i = 1; i <= 20; i++)\r\n {\r\n var payload = JsonSerializer.Serialize(new\r\n {\r\n id = i,\r\n message = $"Server tick {i}",\r\n sentAtUtc = DateTimeOffset.UtcNow\r\n });\r\n\r\n await context.Response.WriteAsync($"id: {i}\\n", cancellationToken);\r\n await context.Response.WriteAsync("event: tick\\n", cancellationToken);\r\n await context.Response.WriteAsync($"data: {payload}\\n\\n", cancellationToken);\r\n await context.Response.Body.FlushAsync(cancellationToken);\r\n\r\n await Task.Delay(TimeSpan.FromSeconds(1), cancellationToken);\r\n }\r\n }\r\n catch (OperationCanceledException)\r\n {\r\n }\r\n});\r\n<\/pre>\n\n
\r\nusing var httpClient = new HttpClient\r\n{\r\n BaseAddress = new Uri("http:\/\/localhost:5127")\r\n};\r\n<\/pre>\n\r\nusing var cancellation = new CancellationTokenSource();\r\n\r\nusing var request = new HttpRequestMessage(HttpMethod.Get, "\/events");\r\nrequest.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("text\/event-stream"));\r\n\r\nusing var response = await httpClient.SendAsync(\r\n request,\r\n HttpCompletionOption.ResponseHeadersRead,\r\n cancellation.Token);\r\n\r\nresponse.EnsureSuccessStatusCode();\r\n<\/pre>\n\r\nawait using var stream = await response.Content.ReadAsStreamAsync(cancellation.Token);\r\nusing var reader = new StreamReader(stream);\r\n\r\nwhile (!cancellation.IsCancellationRequested)\r\n{\r\n var line = await reader.ReadLineAsync(cancellation.Token);\r\n\r\n if (line is null)\r\n {\r\n break;\r\n }\r\n\r\n if (line.Length == 0)\r\n {\r\n if (eventDataBuilder.Length > 0)\r\n {\r\n Console.WriteLine($"[{DateTime.Now:T}] id={eventId}, event={eventName}, data={eventDataBuilder}");\r\n }\r\n\r\n eventId = string.Empty;\r\n eventName = string.Empty;\r\n eventDataBuilder.Clear();\r\n continue;\r\n }\r\n\r\n if (line.StartsWith("id: ", StringComparison.Ordinal))\r\n {\r\n eventId = line[4..];\r\n continue;\r\n }\r\n\r\n if (line.StartsWith("event: ", StringComparison.Ordinal))\r\n {\r\n eventName = line[7..];\r\n continue;\r\n }\r\n\r\n if (line.StartsWith("data: ", StringComparison.Ordinal))\r\n {\r\n if (eventDataBuilder.Length > 0)\r\n {\r\n eventDataBuilder.Append('\\n');\r\n }\r\n\r\n eventDataBuilder.Append(line[6..]);\r\n}\r\n<\/pre>\n\r\ntype TickEvent = {\r\n id: number\r\n message: string\r\n sentAtUtc: string\r\n}\r\n\r\nconst maxItems = 50\r\n\r\nfunction App() {\r\n const [events, setEvents] = useState<TickEvent[]>([])\r\n const [isConnected, setIsConnected] = useState(false)\r\n const [status, setStatus] = useState('Disconnected')\r\n const eventSourceRef = useRef<EventSource | null>(null)\r\n\r\n useEffect(() => {\r\n return () => {\r\n eventSourceRef.current?.close()\r\n eventSourceRef.current = null\r\n }\r\n }, [])\r\n\r\n const connect = () => {\r\n if (eventSourceRef.current) {\r\n return\r\n }\r\n\r\n setStatus('Connecting...')\r\n\r\n const eventSource = new EventSource(import.meta.env.VITE_SSE_URL ?? '\/events')\r\n eventSourceRef.current = eventSource\r\n\r\n eventSource.onopen = () => {\r\n setIsConnected(true)\r\n setStatus('Connected')\r\n }\r\n\r\n eventSource.addEventListener('tick', (event) => {\r\n const messageEvent = event as MessageEvent<string>\r\n\r\n try {\r\n const payload = JSON.parse(messageEvent.data) as TickEvent\r\n setEvents((previous) => [payload, ...previous].slice(0, maxItems))\r\n } catch {\r\n setStatus('Received malformed event payload')\r\n }\r\n })\r\n\r\n eventSource.onerror = () => {\r\n setStatus('Connection lost or closed by server')\r\n setIsConnected(false)\r\n eventSource.close()\r\n eventSourceRef.current = null\r\n }\r\n }\r\n\r\n const disconnect = () => {\r\n eventSourceRef.current?.close()\r\n eventSourceRef.current = null\r\n setIsConnected(false)\r\n setStatus('Disconnected')\r\n }\r\n\r\n const clear = () => setEvents([])\r\n\r\n return (\r\n <main className="app">\r\n <h1>Server Sent Events Demo<\/h1>\r\n <p className="subtitle">React + TypeScript client for the ServerSentEventsSample API<\/p>\r\n\r\n <div className="controls">\r\n <button onClick={connect} disabled={isConnected}>Connect<\/button>\r\n <button onClick={disconnect} disabled={!isConnected}>Disconnect<\/button>\r\n <button onClick={clear} disabled={events.length === 0}>Clear<\/button>\r\n <\/div>\r\n\r\n <p className="status">\r\n Status: <strong>{status}<\/strong>\r\n <\/p>\r\n\r\n <ul className="event-list">\r\n {events.length === 0 && <li className="empty">No events yet.<\/li>}\r\n {events.map((item) => (\r\n <li key={`${item.id}-${item.sentAtUtc}`}>\r\n <div className="row">\r\n <span className="id">#{item.id}<\/span>\r\n <span>{item.message}<\/span>\r\n <\/div>\r\n <time dateTime={item.sentAtUtc}>\r\n {new Date(item.sentAtUtc).toLocaleTimeString()}\r\n <\/time>\r\n <\/li>\r\n ))}\r\n <\/ul>\r\n <\/main>\r\n )\r\n}\r\n<\/pre>\n