Process Mining

Process Mining

Come for answers. Stay for best practices. All we’re missing is you.

 View Only

Server-Sent Events: The Perfect Match for Real-Time Chat

By Anjana M R posted yesterday

  

Traditionally, web applications built on REST APIs follow a request-response pattern: the client sends a request, the server responds, and the connection closes. While this model works well for static or infrequently updated data, it quickly becomes inefficient for real-time applications such as chat systems, live dashboards, notifications, or AI model streaming.

To keep data up to date in real time using REST, clients typically rely on polling—sending repeated requests to the server at short intervals. This approach increases latency, consumes extra bandwidth, and adds unnecessary load on the server, resulting in slower and less efficient updates.

This is where Server-Sent Events (SSE) come into play. SSE allows the server to push updates to the client automatically over a single, long-lived connection, eliminating the need for constant polling and providing a more responsive, lightweight, and efficient real-time experience.

What is SSE?

Server-Sent Events (SSE) is a web technology that enables a server to push real-time updates to the client over a single, long-lived HTTP connection. Unlike traditional REST APIs, where the client must repeatedly request new data, SSE allows the server to continuously send new information to the browser after the initial request. This makes it ideal for applications that require live updates without the overhead of repeated polling.

Once the connection is established, the client listens for events using the native EventSource API or, alternatively, the Fetch API for more flexibility with headers or authentication. SSE is inherently one-way (server → client), which simplifies implementation and reduces network load compared to full-duplex communication methods like WebSockets.

SSE is particularly well-suited for scenarios such as:

  • Chat interfaces: Stream incoming messages directly to the user as they arrive.

  • Streaming AI and machine learning outputs: Display AI-generated content progressively, such as text generation or model inference results.

  • Real-time dashboards and monitoring systems: Automatically update charts, graphs, or metrics without page reloads.

  • Live notifications and alerts: Push system notifications or status updates instantly.

Because SSE maintains a persistent connection, it reduces latency and avoids the inefficiency of repeated HTTP requests. Additionally, SSE can keep track of the last event received using unique identifiers, ensuring reliable delivery of messages even if the connection is temporarily lost.

How SSE Works

Server-Sent Events (SSE) rely on a persistent HTTP connection between the client and server. When a browser connects to a server endpoint that supports SSE, the server responds with the text/event-stream MIME type. This tells the browser that it should expect a continuous stream of data rather than a single response.The event stream is essentially a sequence of UTF-8 encoded text messages, each separated by a pair of newline characters (\n\n).

Once the connection is established, the server can send multiple events over the same connection. Each message in the stream can include several fields:

data: New message from server
event: message
id: 1

data: Another update
event: update
id: 2

Each message can include:

  • event: An optional type for the event, allowing the client to handle different types of messages separately.

  • data: The actual payload or content of the message

  • id:  A unique identifier for the event, used for reconnection tracking. If the connection drops, the client can resume from the last received ID.

  • retry: Optional reconnection time in milliseconds. If the connection is lost, the browser waits for this duration before trying to reconnect automatically.

SSE with Modern AI Applications

Server-Sent Events (SSE) are particularly well-suited for modern AI applications, where responses are generated progressively rather than all at once. Frameworks like LangChain often stream AI outputs token by token, allowing clients to display content as it is generated. This is ideal for chatbots, text generation, or any AI model that produces output incrementally, since users can start reading or interacting with results immediately instead of waiting for the entire response.

Python Backend Example with FastAPI and LangChain

Here’s how you can implement SSE for streaming AI responses using FastAPI and LangChain:

from fastapi import FastAPI
from fastapi.responses import StreamingResponse
from langchain.llms import OpenAI
from langchain.schema import HumanMessage

app = FastAPI()

@app.get("/stream")
async def stream_response():
    llm = OpenAI(streaming=True)

    async def get_response_stream():
        async for chunk in llm.astream([HumanMessage(content="What is process mining?")]):
            yield f"data: {chunk.content}\n\n"
        yield "data: [DONE]\n\n"

    return StreamingResponse(get_response_stream(), media_type="text/event-stream")
  • The /stream endpoint creates a single, long-lived HTTP connection that stays open for the duration of the AI response.
  • LangChain’s astream() method yields tokens from the AI model as they are generated. Each token is immediately sent to the client.
  • Each token is formatted as data: ...\n\n per the SSE protocol.
  • The response is wrapped in a StreamingResponse with text/event-stream content type.

JavaScript Client with Fetch API

Although EventSource is the standard browser API for SSE, we can also use Fetch API for greater flexibility, especially with custom headers or authentication:

async function streamSSE(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder("utf-8");

  let buffer = "";

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true });
    const messages = buffer.split("\n\n");
    buffer = messages.pop(); 

    for (const msg of messages) {
      if (!msg.trim()) continue;
      const dataLine = msg.split("\n").find(line => line.startsWith("data:"));
      if (dataLine) {
        const data = dataLine.replace("data: ", "");
        if (data === "[DONE]") return console.log("Stream complete");
        console.log("Received:", data);
        // Update UI here
      }
    }
  }
}

// Start streaming
streamSSE("http://localhost:8000/stream");

This approach allows:

  • Real-time streaming: Process AI tokens or other live data as soon as they arrive.

  • Incremental UI updates: Show typing indicators, live charts, or progressive AI responses.

  • Error handling: Catch connection errors and handle reconnections manually if needed.

SSE vs WebSocket

Both SSE and WebSockets enable real-time communication, but they serve different purposes. SSE is one-way, meaning the server can push updates to the client, making it simple and efficient for dashboards, notifications, and AI streaming. It works over standard HTTP,  and is easy to integrate with existing web infrastructure.

WebSockets, on the other hand, are bi-directional, allowing both client and server to send messages freely over a single TCP connection. While this is powerful for chat apps, multiplayer games, or collaborative tools, it adds complexity and requires additional handling for reconnection and message framing.

In general, if your application mostly needs server-to-client streaming, SSE is lighter and simpler. For scenarios that demand full-duplex communication, WebSockets are the better choice.

Conclusion

Server-Sent Events (SSE) offer a clean, efficient, and reliable method to stream real-time data from the server to the client over standard HTTP. With minimal setup, developers can deliver dynamic updates without relying on complex protocols or repetitive polling.

When combined with frameworks like LangChain, SSE becomes especially powerful — enabling live AI response streaming, interactive dashboards, and smooth real-time experiences for users.

In essence, SSE bridges the gap between traditional REST APIs and full-duplex WebSocket connections, providing a balanced solution that combines simplicity, performance, and real-time capability. For modern, event-driven web applications, SSE is an excellent choice for delivering responsive and interactive experiences.

1 comment
31 views

Permalink

Comments

9 hours ago

An insightful read—clearly explained and structured