Rainer Stropek
Leveraging Server-Sent Events (SSE) for Efficient Data Streaming in UI Development
#1about 6 minutes
The core problem of long-running HTTP requests
A simple demo illustrates poor user experience when a backend operation takes several seconds to complete, leaving the UI unresponsive.
#2about 6 minutes
Manually streaming data with HTTP chunks
Learn how to send partial responses from a Node.js server using `response.write` and process them on the client with `ReadableStream` and `TextDecoder`.
#3about 7 minutes
Introducing the Server-Sent Events protocol
The SSE protocol simplifies streaming by using a `data:` prefix and the browser's built-in `EventSource` API, which also handles automatic retries.
#4about 4 minutes
Using named events for structured messages
The SSE protocol supports sending named events using the `event:` key, allowing for more structured communication handled by specific event listeners on the client.
#5about 5 minutes
Ensuring reliable delivery with message IDs
Implement robust streaming by using the `id:` field in SSE messages, which enables the client to automatically send a `Last-Event-ID` header upon reconnecting.
#6about 7 minutes
Why SSE is relevant again because of OpenAI
OpenAI's streaming API uses Server-Sent Events extensively, leading to a resurgence of the technology for building real-time AI applications.
#7about 6 minutes
Building a streaming client for the OpenAI API
A practical demo shows how to use the OpenAI SDK, which abstracts SSE into a `for await` loop, and then stream the results from your server to the client using SSE.
#8about 12 minutes
Q&A on SSE implementation and best practices
Discussion covers topics like connection timeouts, keep-alive messages, server scalability for many connections, and use cases beyond text streaming.
Related jobs
Jobs that call for the skills explored in this talk.
Apaleo
München, Germany
Remote
€65-85K
Senior
JavaScript
.NET
+2
Matching moments
Featured Partners
Related Videos
29:54Streaming AI Responses in Real-Time with SSE in Next.js & NestJS
Ahmed Megahd
53:46WeAreDevelopers LIVE – AI vs the Web & AI in Browsers
Chris Heilmann, Daniel Cranney & Raymond Camden
57:52Develop AI-powered Applications with OpenAI Embeddings and Azure Search
Rainer Stropek
40:24Snappy UI needs no Single-Page Application
Clemens Helm
57:45Wasm Deep Dive - A Glance Behind the Scenes
Rainer Stropek
1:06:20WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Chris Heilmann, Daniel Cranney & Jan Deppisch
57:23Exploring the Latest Features of .NET and C# by Building a Game
Rainer Stropek
48:07Server Side Serverless in Swift
Sebastien Stormacq
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
ROSEN Technology and Research Center GmbH
Osnabrück, Germany
Senior
React
DevOps
Next.js
TypeScript
Cloud (AWS/Google/Azure)
Client Server
Sunderland, United Kingdom
Remote
£40-55K
React
.NET Core
JavaScript
+2
Client Server
Esher, United Kingdom
Remote
£60-70K
Azure
React
Python
+2