Access a Blazor server application from multiple browsers.

Posted 3 years ago by louyo
0

I have a Blazor server application that links a text  field to a variable. The variable is refreshed from a socket connection (from another device on the LAN).  When the variable is updated, the text field is also updated. I am running  executing via a publish folder (not IIS). If I connect from another browser (local or remote) the value is static, does not update. So, I have 2 instances, one is static and one is dynamic. I use await InvokeAsync(() => StateHasChanged()); to refresh. It works fine in only one browser instance. If I stop the socket and the restart from the #2 browser, that one is "dynamic" and #1 is static. Only updates if I refresh the page manually. I created the application with the latest VS and .net. The same thing happens if I publish to a Linux server.

Any help appreciated. 

  • 0

    It sounds like you may need to setup your app to use a state container. Setup a test app with the following to see if it provides the general functionality you're looking for.

    Create a new file called AppState.cs. You can place it anywhere for this example, so the Pages folder is fine. Add the following AppState class in there to use as the state container

    public class AppState
    {
        public event EventHandler OnStateChanged;
        public string AppText;
    
        public virtual void NotifyStateChanged() => OnStateChanged?.Invoke(this, EventArgs.Empty);
    
        public void RefreshAppState()
        {
            NotifyStateChanged();
        }
    }

    In your Startup.cs file, add the following to your ConfigureServices method (you'll also need to add a using directive for your AppState file, so it will be recognized)

    services.AddSingleton<AppState>();

    Change your index.razor file to the following

    @page "/"
    
    @inject AppState appState
    @implements IDisposable
    
    <h1>My Blazor App</h1>
    
    <button @onclick="@(() => HandleSubmit())">Submit</button>
    
    Ticks: @appState.AppText
    
    @code {
    
        protected override void OnInitialized()
        {
            appState.OnStateChanged += HandleAppStateChange;
        }
    
        public void Dispose()
        {
            appState.OnStateChanged -= HandleAppStateChange;
        }
    
        void HandleSubmit()
        {
            appState.AppText = DateTime.Now.Ticks.ToString();
            appState.RefreshAppState();
        }
    
        async void HandleAppStateChange(object sender, EventArgs args)
        {
            await InvokeAsync(() => StateHasChanged());
        }
    }

    When you run this Blazor app now and you click on the Submit button, it should update all browsers with the same 'tick' text.

    Posted 3 years ago by selliott
Someone is typing...

Post a Reply

You must be logged in to add a new post.
Number of online users: 1
An error has occurred. This application may no longer respond until reloaded. Reload 🗙