为解决此问题,可以手动调用StateHasChanged方法。Step1:在组件中声明CancellationTokenSource对象;Step2:在OnInitializedAsync方法中实例化CancellationTokenSource对象;Step3:在组件中实例化HubConnection对象并订阅服务器端响应;Step4:在OnDisposingAsync方法中取消CancellationTokenSource对象并关闭HubConnection;Step5:在订阅回调中手动调用StateHasChanged方法更新组件UI。
代码示例:
@inject NavigationManager NavigationManager
@inject IJSRuntime JS
@implements IDisposable
CancellationTokenSource _cancellationTokenSource;
HubConnection _hubConnection;
protected override async Task OnInitializedAsync()
{
_cancellationTokenSource = new CancellationTokenSource();
var hubUrl = NavigationManager.ToAbsoluteUri("/hub");
_hubConnection = new HubConnectionBuilder()
.WithUrl(hubUrl)
.WithAutomaticReconnect()
.Build();
_hubConnection.On("ResponseMessage", async (message) =>
{
//Update your component's state here
await JS.InvokeVoidAsync("console.log", message);
//Manually update component UI
StateHasChanged();
});
await _hubConnection.StartAsync(_cancellationTokenSource.Token);
await JS.InvokeVoidAsync("console.log", "Connected");
}
protected override async Task OnDisposeAsync()
{
await _hubConnection.DisposeAsync();
_cancellationTokenSource.Cancel();
}
注:此示例使用了Blazor WebAssembly的SignalR集线器连接到服务器。在服务器上,请在Startup.cs文件中添加SignalR中间件。
app.UseEndpoints(endpoints =>
{
endpoints.MapHub("/hub");
});