Blazor Server App: How to design so that the client requests receive the same data

Let’s suppose we have this simple classical timer in default Blazor Server.

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        Console.WriteLine($"Count incremented: {currentCount}");
    }

    private Timer timer;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            timer = new Timer();
            timer.Interval = 1000;
            timer.Elapsed += OnTimerInterval;
            timer.AutoReset = true;
            // Start the timer
            timer.Enabled = true;
        }
        base.OnAfterRender(firstRender);
    }

    private void OnTimerInterval(object sender, ElapsedEventArgs e)
    {
        IncrementCount();
        InvokeAsync(() => StateHasChanged());
    }

    public void Dispose()
    {
        // During prerender, this component is rendered without calling OnAfterRender and then immediately disposed
        // this mean timer will be null so we have to check for null or use the Null-conditional operator ?
        timer?.Dispose();
    }
}

Right now when I open this page in the browser time starts from zero for every new window(as expected). However, I want to open multiple pages in the browser and every page should see the same time (if the time shows 10 in my first window and I open a new window I want the time in both to be the same). How can I achieve that?

In general, I want to create a simple SPA that shows the real-time stock price values to the users.
Any suggestions would be appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

SignalR would probably be the preferred Microsoft solution for this problem, since it provides real-time web functionality to apps.

At a high level, you would need to:

1. Create a Hub on the server that would be responsible for handling the connection with clients and broadcasting messages (in your case stock information).
2. Assuming you already have some sort of service for polling/receiving stock updates, that service could use the IHubContext to publish updates to the clients through the Hub.
3. The client would need a HubConnection to receive messages from the server.

Here’s a full example of a Chat app using a similar approach: https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-tutorial-build-blazor-server-chat-app

Since I couldn’t find a good example of an application using these components similar to your use case: I put together a simple repo that can be found here: https://github.com/t-j-c/Stack.Blazor.SignalR

Method 2

Just make currentCount static.

private static int currentCount = 0;

It should work.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0