StreamingSSEWebSocketReal-timeUX

Implementing Streaming Responses for Better UX

How to implement Server-Sent Events and WebSocket streaming for real-time LLM responses.

Why Stream?

Streaming reduces perceived latency by 60%. Users see responses as they're generated rather than waiting for completion.

Server-Sent Events Implementation

// Client-side
const eventSource = new EventSource('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ message: 'Hello' })
});

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateUI(data.token);
};

Backend Streaming with ChinaWHAPI

ChinaWHAPI supports OpenAI-compatible streaming. Set stream=true in your request body.

UI Best Practices

Show typing indicators
Implement token counters
Add cancel functionality
Handle reconnection gracefully