Server-Sent Events in .NET: A Real-Time Update Example with Item API

 

In today's applications, delivering real-time updates to users is crucial for creating engaging experiences. One efficient way to achieve this in a .NET environment is by using Server-Sent Events (SSE). This blog will guide you through implementing SSE using an Item API to push real-time updates to clients.

What are Server-Sent Events?

Server-Sent Events (SSE) allow a server to push updates to clients over HTTP. Unlike WebSockets, which provide full-duplex communication, SSE is a simpler protocol suited for scenarios where updates flow from the server to the client, such as notifications or live content updates.

Why Use Server-Sent Events?

• Simplicity: SSE is built on standard HTTP protocols, making it easier to implement compared to WebSockets.
• Automatic Reconnection: The client automatically reconnects if the connection is lost.
• Text-Based: SSE sends data in plain text, making it easy to parse.

Setting Up the Item API

Let's assume you have a simple Item API with basic CRUD operations. We will extend this API to support real-time updates for item changes.

Never miss new posts by subscribe

Powered by

Step 1: Create the Item Model

First, define the Item model in your .NET application.

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Step 2: Set Up the Controller

Next, create a controller that manages your items. Add a method for handling SSE connections.

[ApiController]
[Route("api/[controller]")]
public class ItemsController : ControllerBase
{
    private static readonly List<Item> Items = new();
    private static readonly List<HttpResponse> Clients = new();

    [HttpGet]
    public ActionResult<List<Item>> GetItems()
    {
        return Items;
    }

    [HttpPost]
    public ActionResult<Item> CreateItem([FromBody] Item item)
    {
        item.Id = Items.Count + 1;
        Items.Add(item);
        NotifyClients(item);
        return CreatedAtAction(nameof(GetItems), new { id = item.Id }, item);
    }

    // SSE endpoint
    [HttpGet("updates")]
    public async Task GetUpdates()
    {
        Response.ContentType = "text/event-stream";
        Response.Headers.Add("Cache-Control", "no-cache");

        // Add the response to the client list
        Clients.Add(Response);

        // Keep the connection open
        await Response.CompleteAsync();
    }

    private void NotifyClients(Item item)
    {
        foreach (var client in Clients)
        {
            var message = $"data: Item created: {item.Name}, Price: {item.Price}\n\n";
            client.WriteAsync(Encoding.UTF8.GetBytes(message));
        }
        Clients.Clear(); // Clear clients after notifying
    }
}

Step 3: Connecting the Client

In your front-end application (let's say a React app), set up an EventSource to listen for updates.

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

const ItemList = () => {
    const [items, setItems] = useState([]);
    
    useEffect(() => {
        const eventSource = new EventSource('https://yourapi.com/api/items/updates');

        eventSource.onmessage = (event) => {
            console.log('New event:', event.data);
            // Update the state or UI with the new item data
            // Example: setItems(prevItems => [...prevItems, JSON.parse(event.data)]);
        };

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

    return (
        <div>
            <h1>Items</h1>
            {/* Render the items list here */}
        </div>
    );
};

export default ItemList;

Step 4: Testing the Implementation

1. Start your .NET application and ensure the Item API is running.
2. Open your front-end application that uses the ItemList component.
3. Use a tool like Postman or curl to make a POST request to create a new item:

POST /api/items
Content-Type: application/json

{
    "Name": "Sample Item",
    "Price": 19.99
}

4. Watch your front-end application for real-time updates as new items are created.

Never miss new posts by subscribe

Powered by

Conclusion

Server-Sent Events provide a straightforward method for implementing real-time updates in your .NET applications. By utilizing SSE in our Item API, we demonstrated how to push notifications to clients seamlessly. This approach enhances user experience by delivering timely updates without requiring complex setups.

Feel free to expand on this implementation by adding features like error handling, custom event types, or filtering updates based on item changes. Happy coding!