DEV Community

Cover image for SSE in WebForms Core 2 – Real-Time Server-to-Client Communication
Elanat Framework
Elanat Framework

Posted on

SSE in WebForms Core 2 – Real-Time Server-to-Client Communication

#sse #backend #dotnet #webformscore

As promised, we added SSE (Server-Sent Events) support to WebForms Core version 2 (just as we added WebSocket support in previous versions). SSE allows you to create long-lived, one-way connections from the server to the client, enabling real-time updates without repeated client requests.

WebForms Core SSE

With this update, CodeBehind framework in Elanat can now respond directly to SSE requests. You can send data to SSE connections with a single method call, no middleware required. SSE works just like WebSockets but is much simpler for one-way server-to-client communication.

Please note: WebForms Core only establishes SSE connections; how SSE events are processed depends on your backend infrastructure.

SSE Configuration in CodeBehind

Two new settings are added in the CodeBehind options file:

[CodeBehind options]; do not change order
view_path=wwwroot
move_view_from_wwwroot=true
...
max_web_socket_connections_per_client=3
web_socket_buffer_size=4096
send_view_only_in_get_method=false
+sse_interval=1000
+max_sse_connections_per_client=3
Enter fullscreen mode Exit fullscreen mode
  • sse_interval → interval in milliseconds for checking SSE data.
  • max_sse_connections_per_client → maximum number of concurrent SSE connections per user.

Example: Live Time Updates Using SSE

Let's create a realistic example: a button on the page sends current server time to the client every 5 seconds. You could replace this with stock prices, notifications, or any dynamic content.

1. View: Button and Result Display 

@page
@controller TimeSSEController
@layout "/layout.aspx"
@{
  ViewData.Add("title","SSE Time Example");
}
<button id="TimeButton">Get Live Server Time</button>
<b>Server Time: </b><span id="TimeResult"></span>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • TimeButton triggers the SSE stream.
  • <span id="TimeResult"> is where live updates will be displayed.

2. Controller: Attach SSE to the Button 

using CodeBehind;

public partial class TimeSSEController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        WebForms form = new WebForms();

        // Connect the button click to the SSE endpoint
        form.SetSSEEvent("TimeButton", HtmlEvent.OnClick, "/sse/gettime");

        Control(form);
    }
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • SetSSEEvent → links the button to the SSE path /sse/gettime.
  • When the button is clicked, the client subscribes to SSE updates from this endpoint.

View (path "/sse/gettime")

@page
@controller GetTimeSSEController
Enter fullscreen mode Exit fullscreen mode

3. SSE Endpoint: Sending Live Server Time 

using CodeBehind;

public partial class GetTimeSSEController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        EnableSSE(); // Activate SSE for this endpoint

        // Send time updates every 5 seconds
        Task.Run(async () =>
        {
            while (true)
            {
                await Task.Delay(5000); // Wait 5 seconds before sending the next update

                var form = new WebForms();

                // Here you can send anything: server time, stock prices, notifications, etc.
                string serverTime = DateTime.Now.ToString("HH:mm:ss");
                form.SetText("TimeResult", $"Current Server Time: {serverTime}");

                // Broadcast to all connected clients
                BroadcastSSE(context, form.ExportToLineBreak());
            }
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • await Task.Delay(5000) → waits 5 seconds before sending the next update.
  • EnableSSE() → activates SSE for this controller.
  • form.SetText() → Set dynamic content. In this example, the current server time is displayed. You can replace it with any data.
  • BroadcastSSE() → sends the message to connected clients in real time.

Note: You can Set SSE id (SetSSEId("get_time")) and then using BroadcastSSEForSSEId method.

EnableSSE();
SetSSEId("get_time");

BroadcastSSEForSSEId(context, form.ExportToLineBreak(), "get_time");
Enter fullscreen mode Exit fullscreen mode

It is usually recommended to set the "SetSSEId" method after the "EnableSSE" method. The above method sends data only to the SSE with the "get_time" key. In other words, an identifier is created for the "/sse/gettime" path. Otherwise, calling the BroadcastSSE method without an SSEID will cause the server data to be sent to all active SSEs.

4. Managing SSE Connections 

// Attach SSE to a tag event
SetSSEEvent(InputPlace, HtmlEvent, Path, ShouldReconnect = true, ReconnectTryTimeout = 3000);

// Attach SSE to an event listener
SetSSEEventListener(InputPlace, HtmlEventListener, Path, OutputPlace, ShouldReconnect = true, ReconnectTryTimeout = 3000);

// Remove SSE connections
RemoveSSEEvent(InputPlace, HtmlEvent);
RemoveSSEEventListener(InputPlace, HtmlEventListener);
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • ShouldReconnect = true → if the connection drops, it retries automatically after ReconnectTryTimeout milliseconds.
  • SSE connections can be attached to buttons, inputs, or custom events.
  • You can remove connections when they are no longer needed.

5. Broadcasting Options

SSE broadcasting works in all MVC sections: model, view, and controller.

// Broadcast to all clients
BroadcastSSE(context, Message);

// Broadcast with filtering
BroadcastSSE(context, Message, RoleName, Id, ClientId);

// Broadcast to specific roles
BroadcastSSEForRole(context, Message, RoleName);

// Broadcast to specific SSE IDs
BroadcastSSEForSSEId(context, Message, Id);

// Broadcast to specific clients
BroadcastSSEForClientId(context, Message, ClientId);
Enter fullscreen mode Exit fullscreen mode

Note: You can run Broadcast methods anywhere and it does not need to be specified in the SSE path.

Explanation:

  • You can send messages to all clients, a role, a specific SSE ID, or a single client.
  • This flexibility allows targeted real-time updates in multi-user applications.

Why This Example Matters

This SSE example is practical and extensible:

  • You can replace the server time with live stock prices, notifications, server statistics, chat messages, or any other dynamic content.
  • SSE is ideal for one-way, high-frequency updates without client polling.
  • WebForms Core makes it simple and fast: no middleware, no complex setup, just a few lines of CodeBehind code.

Use Cases for SSE

SSE (Server-Sent Events) is ideal for scenarios where the server needs to push real-time updates to the client. Some common use cases include:

  • Real-time notifications and alerts
  • Live dashboards (analytics, server status, monitoring)
  • Live stock or currency prices and financial data
  • Live news or social media feeds
  • Online games and interactive applications
  • Order or transaction status updates
  • One-way chat or messaging (server-to-client)

Conclusion

SSE in WebForms Core 2 provides a lightweight, easy-to-use, and highly flexible mechanism for real-time communication. With:

  • Simple CodeBehind integration
  • Configurable intervals
  • Flexible broadcasting options

…you can implement live dashboards, notifications, dynamic feeds, and interactive web applications with minimal effort.

SSE is perfect when you need one-way server-to-client updates while keeping your code clean, maintainable, and elegant.

WebForms Core 2 proves that real-time web development can be simple, powerful, and fun.

Top comments (0)