In this article, I’ll walk you through implementing Server-Sent Events (SSE) in Golang. SSE is a lightweight way to push real-time updates from the server to the client using standard HTTP. Unlike WebSockets, SSE works over a single HTTP connection and is simpler to implement for one-way data streaming.

Why Use SSE?

Lightweight: Uses simple HTTP connections without complex protocols.
Automatic Reconnection: Browsers automatically attempt to reconnect if the connection is lost.
Efficient: Ideal for one-way data updates like notifications, live updates, or monitoring systems.
Supported in Most Browsers: No need for additional client-side libraries.

Setting Up SSE in Golang

First, create a new Go project and initialize the module:

go mod init sse-example
go get github.com/gin-gonic/gin

Creating the SSE Server

Let’s build a simple SSE server using Gin.

package main

import (
    "fmt"
    "net/http"
    "time"

    "github.com/gin-gonic/gin"
)

func sseHandler(c *gin.Context) {
    // Set the necessary headers for SSE
    c.Writer.Header().Set("Content-Type", "text/event-stream")
    c.Writer.Header().Set("Cache-Control", "no-cache")
    c.Writer.Header().Set("Connection", "keep-alive")

    // Flush headers to the client
    c.Writer.Flush()

    // Sending events every 2 seconds
    for i := 1; i <= 10; i++ {
        fmt.Fprintf(c.Writer, "data: %s\n\n", fmt.Sprintf("Event %d at %s", i, time.Now().Format(time.RFC1123)))
        c.Writer.Flush()
        time.Sleep(2 * time.Second)
    }
}

func main() {
    r := gin.Default()
    r.GET("/events", sseHandler)

    r.Run(":8080")
}

Testing the SSE Server with Postman

You can test the SSE server using Postman by following these steps:

Open Postman and create a GET request to:
```
 http://localhost:8080/events
```
Click on the Send button.
Postman will start receiving streamed events from the server every 2 seconds.

Since SSE keeps the connection open, the events will continuously appear in Postman until the loop ends or you manually stop the request.

Creating an SSE Client in React

To receive SSE events in a React application, we’ll use the EventSource API.

1. Install React and Set Up a New Project

npx create-react-app sse-client --template typescript
cd sse-client
npm start

2. Implement the SSE Client Component

Inside src/App.tsx, update the file with the following code:

import React, { useEffect, useState } from "react";

const App: React.FC = () => {
  const [messages, setMessages] = useState<string[]>([]);

  useEffect(() => {
    const eventSource = new EventSource("http://localhost:8080/events");

    eventSource.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };

    eventSource.onerror = () => {
      console.error("EventSource failed.");
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <h2>Server-Sent Events</h2>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
    </div>
  );
};

export default App;

3. Run the React App

Start the development server:

npm start

Open http://localhost:3000 in your browser, and you should see real-time messages appearing on the screen.

Conclusion

I hope this guide helps you understand how to implement Server-Sent Events (SSE) in Golang and test them using Postman and React. SSE is a great way to push real-time updates without the complexity of WebSockets. It’s perfect for live feeds, notifications, and monitoring dashboards. Let me know if you have any questions or need further improvements!

Server-Sent Events (SSE) in Golang