通知所有客户端添加的学生并更新ui

Question

我有一个blazor web组装项目和一个signal r服务项目，我想在添加学生时调用对ui的更改。目前，我必须重新刷新页面才能看到添加的内容。

StudentService.cs

public class StudentService
{
public HubConnection connection;
public StudentServicen()
{    
connection = new HubConnectionBuilder()                                            
.WithUrl(".../StudentsHub")
.Build();
connection.StartAsync();
}
public async Task<List<Students>> GetAllStudents() => 
await connection.InvokeAsync<List<Students>>("GetAllStudents"));    
public async Task<Boolean> AddStudent(StudentData student) => 
await connection.InvokeAsync<Boolean>("AddStudent", student);
}

Students.razor

@inject StudentService StudentService
<ul >
@foreach (var student in students)
{
<li>@student.Name</li>
} 
</ul>
@code {  
private List<Students> students = new List<Students>();  
protected override async Task OnInitializedAsync()
{
students = await StudentService.GetAllStudents();        
}

学生们集中在另一个项目中。

public class StudentsHub : Hub
{
public Task<List<Students>> GetAllStudents() => 
Task.FromResult(getAllStudents.GetAll());
public Boolean AddStudent(StudentData student) => 
studentService.AddStudent(student);
}

Answer 1

您已经提供了部分代码片段，因此我创建了一个正在运行的小示例，并使用自定义服务访问服务器集线器，并将值返回到注入自定义服务的razor组件。

请注意，当您使用服务和回调时，必须使用InvokeAsync方法，该方法将分派到Blazor的SynchronizationContext，该对象强制执行单个逻辑线程。

这是完整的代码，复制并测试它，看看它是否能帮助你使用你的应用程序。。。

用户服务.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.SignalR.Client;
namespace BlazorSignalRApp.Client
{
public class UserService
{
public event Action Notify;
public string User { get; set; }
public string Message { get; set; }
HubConnection hubConnection;
public UserService(NavigationManager navigationManager) 
{
hubConnection = new HubConnectionBuilder()
.WithUrl(navigationManager.ToAbsoluteUri("/chatHub"))
.Build();
hubConnection.On<string, string>("ReceiveMessage", (user, 
message) =>
{
User = user;
Message = message;
if (Notify != null)
{
Notify?.Invoke();
}
});
hubConnection.StartAsync();
hubConnection.SendAsync("SendMessage", null, null);
}
public void Send(string userInput, string messageInput) => 
hubConnection.SendAsync("SendMessage", userInput, messageInput);
public bool IsConnected => hubConnection.State == 
HubConnectionState.Connected;
}
}

索引.razor

@page "/"
@inject UserService UserService
@implements IDisposable
<div>
<label for="userInput">User:</label>
<input id="userInput" @bind="@userInput" />
</div>
<div class="form-group">
<label for="messageInput">Message:</label>
<input id="messageInput" @bind="@messageInput" />
</div>
<button @onclick="@(() => UserService.Send(userInput, messageInput))" 
disabled="@(!UserService.IsConnected)">Send Message</button>
<hr />
<ul id="messagesList">
@foreach (var message in messages)
{
<li>@message</li>
}
</ul>
@code {
List<string> messages = new List<string>();
string userInput;
string messageInput;
protected override void OnInitialized()
{
UserService.Notify += OnNotify;
}
public void OnNotify()
{
if (!string.IsNullOrEmpty(UserService.User))
{
var encodedMsg = UserService.User + " says " + 
UserService.Message;
messages.Add(encodedMsg);
}
InvokeAsync(() =>
{
StateHasChanged();
});
}

public void Dispose()
{
UserService.Notify -= OnNotify;
}
}

ChatHub.cs(将此文件放在服务器项目的Hubs文件夹中(

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;
namespace BlazorSignalRApp.Server.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}

Program.cs(客户端项目(

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Blazor.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.Components;
namespace BlazorSignalRApp.Client
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSingleton<UserService>();
builder.RootComponents.Add<App>("app");
await builder.Build().RunAsync();
}
}
}

希望这能帮助。。。