AI and Data Science

The Power of Server-Sent Events(SSE) : Why SSE Are Your App's New Best Friend

Imagine having a personal news reporter who lives just outside your house and whose only job it is to inform you of breaking news as it occurs. They are always there to keep you informed, whether it's the latest technology, a sudden shift in the weather, or an unexpected spike in the stock market. This reporter is available 24/7, providing you with the news as soon as it breaks, so you don't have to wait or ask questions. The personal reporter is alert, monitoring events and disseminating the most recent information as it becomes available. The best part is that they take care of staying connected and deliver the news straight to you, saving you the trouble of constantly checking for updates. All you need to do is sit back, relax, and let the updates come to you, as they happen around.

This is what Server-Sent Events (SSE) does for your applications. They work just like having your own personal news reporter (the server) delivering real-time updates straight to you, the client, without you having to ask for them. In today's fast-paced digital world, where information needs to be delivered instantly, traditional request-response communication models often fall short. Whether it's real-time stock market updates, live sports scores, etc, there is an increasing demand for systems that can send real-time data to clients as soon as it's available. One technology that perfectly addresses this need is Server-Sent Events (SSE).

If you're curious about how it can help you solve real-world problems, how it works, how to implement it, and why it's an essential tool for modern web development, you've come to the right place!!
I'm pretty sure that, without even realizing it, most of us have already encountered and used SSE in our daily lives. And, there's a little bonus info waiting for you at the end-so stay tuned!!

What Are Server-Sent Events?

Server-Sent Events are like a one-way street where the server is constantly driving by and sending data your way - no U-turns etc. It's HTTP-based, so it's easy to set up and doesn't require a complex road map. SSE is all about the server broadcasting information to the client. It's lightweight, reliable, and works beautifully for scenarios where the server just needs to "push" data to the client as soon as new data is available, keeping the client always in sync with the server.

"But why not Polling or WebSockets?" you ask. Well, in a world with polling (the "refresh every n seconds" approach) and WebSockets (the two-way communication method), SSE stands out as the most efficient and straightforward way to keep users informed in real-time. Of course, the others have their place too (a discussion for another day all together)- but when it comes to keeping users informed without the hassle, SSE takes the lead.

How Does SSE Work?

Image 1. Server sent Events

The process is actually pretty simple as depicted in Image 1, just like how your personal news reporter operates:

1. Client Request: The client (browser or app) sends a request to the server to establish a SSE connection. This is done using an HTTP request with the Accept: text/event-stream header.
2. Server Response: The server responds by setting up a continuous connection with the client, sending back an HTTP response with the Content-Type: text/event-stream header.
3. Stream Initialization: Once the connection is open, the server starts sending events to the client. Each event is typically a small chunk of data, often in JSON or plain text format.
4. Real-Time Data Push: As new data or updates become available on the server, it pushes these updates to the client over the open connection-without the client needing to refresh or make repeated requests.
5. Event Formatting: Each event sent by the server is prefixed with specific fields, like data:, id:, and event:, which tell the client how to process the event.
6. Client Receives Updates: The client listens for events from the server and processes them as they arrive, updating the user interface or triggering actions accordingly.
7. Connection Closure: Once the data streaming is complete or no longer needed, the server closes the connection.

Note: Automatic Reconnection: If the connection is lost due to network issues, SSE automatically attempts to reconnect after a brief delay, ensuring minimal disruption.

SSE isn't just a cool tech trick - it's a solution for real-time applications that need fast, efficient, and scalable data delivery. I'll try to convince, why SSE is your new best friend:

• Simplicity: Setting up SSE is straightforward and hassle-free. It is easy, comfortable, and it just works. You don't need to worry about handshake protocols or overly complex setups like you do with WebSockets.
• Efficiency: Unlike polling, where the client has to keep asking the server, "Is there anything new? How about now? How about now?", SSE is like having a dedicated reporter who will always keep you in the loop, no matter what.
• Scalability: Your reporter isn't just talking to you - imagine they're sending the same update to thousands of people at the same time, no extra effort needed. With SSE, the server can broadcast updates to multiple clients at once with minimal overhead. So, whether you have 10 users or 10,000, it's just as easy to keep them all in the loop.
• Performance: SSE is a lightweight technology, so it doesn't slow down your app or your device. It's like having a news reporter who doesn't talk too much, just enough to keep you informed. The less data that needs to be transferred, the faster it can reach you.
• Browser Compatibility: Unlike a fussy reporter who only uses a special kind of microphone, SSE works with most modern browsers right out of the box. No need to worry about compatibility-if you can access the web, you can access SSE in most of the cases.
• Real-time Communication: SSE is ideal for use cases that require live updates, such as live notifications, real-time dashboards, collaborative tools, or chat applications.
• Built-in Reconnection: SSE has built-in mechanisms for automatic reconnections, ensuring that the client stays connected to the server even in the event of temporary network failures.

How to Set Up SSE in an Application

server.js

// Server which streams data in a regular interval(here it is 5 seconds)

const express = require('express');
const app = express();

// Send a update every 5 seconds
app.get('/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  setInterval(() => {
    res.write(`data: The time is: ${new Date().toLocaleTimeString()}\n`);
    res.write(`data: ${JSON.stringify({ message: "Breaking News: SSE is Awesome!" })}\n\n`);
  }, 5000);
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

// Client which listens for updates from the server
const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Got new update:', data.message);
};

On the client side, we will use JavaScript's EventSource API to listen for updates from the server. 

Let's deep dive into the code:

• EventSource API:
  • new EventSource('/stream'): This creates a new connection to the server at the /stream endpoint.
• onmessage Event Handler:
  • The onmessage event handler is triggered whenever the server sends new data.
  • The incoming event.data contains the data sent by the server, which is parsed using JSON.parse().
  • The client logs the message from the server to the console.

Running the Application

To run this app, follow these steps (Make sure you have Node.js installed before starting):

1. Install Express: If you haven't already, install Express by running the following command:

   npm install express

2. Initialize the Project: Run the following command to initialize a new Node.js project:

   npm init -y

3. Run the Server: Start the server by running:

   node server.js

4. Open the Client: Open http://localhost:3000/stream in your browser to see the data updating every 5 seconds.

Image 2. App output and Network Tab

You could see the output of the app from Image 2. And also on inspecting, in the network tab we could find the data is streamed every 5 seconds. 

Image 3. App output and Timing

From Image 3, you could notice the Timing tab which shows the timings involved and the process is still going on(Indicated by "CAUTION: request is not finished yet"). Also the same is shown in the timeline under Network tab.

Challenges:

• Browser Compatibility: While most modern browsers support SSE, you might still encounter a few old browsers that might not support.
• Data Integrity: Sometimes things can get lost in transit. Ensure that you're handling data properly to maintain integrity on both sides.
• Doesn't support Binary data: SSE doesn't support binary data to be transmitted.

Real World Applications:

• Chatbots & AI: Like ChatGPT, chatbots love SSE to respond in real-time, providing answers as they're generated. Granite also provides this support.
• Live Data Dashboards: Whether it's stock prices, cricket scores, or updates on your pizza delivery, SSE lets you stream data that changes every second-without ever needing to refresh the page.
• Financial Markets: Whether it's stocks, cryptocurrencies, commodities, prices can be streamed to clients as soon as there is a price change, ensuring that the user always has the latest data.

In a world that demands real-time updates, SSE offers a simple, efficient way to keep users informed instantly. Whether it's live data or AI-driven responses, SSE is a game-changer for building faster, more interactive applications. It's time to let SSE be your app's new best friend!
Hope you learnt something new today:)

GitHub Repository link: server-sent-events-demo

Bonus:
How ChatGPT Uses Server-Sent Events for Streaming Real-Time Responses

Here's the funny part - you probably already knew the answer to this by reading the blog.
The twist is, you might already be experiencing: If you've ever interacted with ChatGPT, whether it's reading a response or seeing updates as they're typed out, you're already experiencing the magic of SSE. That's right-the very technology you've just learned about is powering this real-time conversation! So next time you chat with ChatGPT, you'll know exactly what's happening under the hood. Anyways, I'll repeat: In ChatGPT's case, the streaming mode works by delivering responses incrementally as they are generated. The user submits a query, which is processed by ChatGPT's model on the server. Instead of waiting for the full response, the client establishes an SSE connection. As ChatGPT generates the response, it streams parts of the answer in real-time to the user. Once the full response is ready, the streaming connection is closed.

The same technology is used by IBM's very own Granite for streaming:) You can explore this by trying to stream using Granite.