๐๐ผ๐ ๐ ๐๐ถ๐ ๐ฒ๐ฑ ๐๐ ๐๐ต๐ฎ๐๐ฏ๐ผ๐ ๐๐ฎ๐ด ๐ช๐ถ๐๐ต ๐ฆ๐ฆ๐
I built an AI chatbot for my developer blog.
It was a failure at first.
Users typed a question and waited 30 seconds. The screen showed a spinner. Then the entire answer appeared all at once. This felt slow. My bounce rate went up by 50 percent.
I tried three different ways to fix this:
Plain Fetch I sent a POST request and waited for a full JSON response. The delay was too long. The connection often timed out before the AI finished.
Polling I sent a request and asked the server for updates every second. This hammered my server with too many requests. The experience still felt clunky.
WebSockets This allows two-way communication. But it is too complex for a simple widget. I had to manage connection states and handle complex reconnection logic.
I decided to use Server-Sent Events (SSE) instead.
SSE is a lightweight way to stream data. The server pushes text tokens to the client one by one. It uses a standard HTTP connection.
How I implemented it:
- I set the Content-Type to text/event-stream on my Express server.
- I used the Fetch API with response.body.getReader() on the frontend.
- This allowed me to read the stream as it arrives.
The result: The AI response now appears word by word. Users see a real-time typing effect. The waiting time feels much shorter.
Trade-offs to remember:
- One-way only: SSE only sends data from the server to the client.
- Browser support: Some older browsers need a polyfill.
- Reconnection: If you use the Fetch API instead of the EventSource API, you must write your own retry logic.
SSE is not a new technology. But it solved my problem without adding heavy complexity.
Do you use WebSockets or SSE for streaming data?