Polling to get recent updates

Retrieve updated information from the server.

Polling is a technique to retrieve updated information from the server at a known time interval. Upon receiving new information, you can swap it into a known target element, and a user perceives that information is updating in near real-time. The method has its advantages and drawbacks.

Polling advantages include:

  • Users get new information without invoking any action.
  • Polling responses can be cached server-side if it's general-use information.
  • It's relatively straightforward to implement both client-side and server-side.

Polling disadvantages include:

  • Unnecessary calls to the server.
  • Near real-time is still is not real-time. As a result, requests could be slower than required.
  • Full HTTP requests and responses, being less efficient than newer options like WebSockets or Server-Sent Events.

As we saw in previous examples, HTMX can trigger requests from almost anything you can imagine. This sample will use an HTMX trigger to perform a poll at a two-second interval. When HTMX triggers the event, the page will complete a GET HTTP request to retrieve an updated HTML element.

<div class="container"
     hx-get="@Url.Page("10_Polling")"
     hx-trigger="every 2s"
     hx-swap="innerHtml">
    @await Html.PartialAsync("_Stonks")
</div>

Our C# implementation will randomly fluctuate the values to display to users. Again we see the ability to handle full and partial requests using Request.IsHtmx().

public class Polling: PageModel
{
    public List<Stonk> Companies { get; set; }
        = new() {
            new Stonk("Apple", "apple", 100, 100),
            new Stonk("Empire", "empire", 800, 1000),
            new Stonk("Rebel", "rebel", 10, 10)
        };

    public IActionResult OnGet()
    {
        foreach (var company in Companies) {
            company.CurrentPrice += RandomNumberGenerator.GetInt32(-10, 10);
        }

        return Request.IsHtmx()
            ? Partial("_Stonks", this)
            : Page();
    }
}

The partial view powering the updates is old reliable Razor with C# logic and models. Running this sample, we can see the stock values moving up and down in value at a two-second interval.

polling working in page

As you can see, polling is a low-effort approach with a high impact on user experience. Use this knowledge wisely and sparingly.

In the following video, you'll see how to take a near-realtime experience to real-time using server-sent events.