Уведомить всех клиентов о добавленном студенте и обновить интерфейс - PullRequest
Новая
       33

Уведомить всех клиентов о добавленном студенте и обновить интерфейс

1 голос
/ 09 марта 2020

У меня есть проект веб-сборки Blazor и проект службы сигнализации r. Я хотел бы вызвать изменения в пользовательском интерфейсе при добавлении учащегося. В настоящее время я должен сослаться на sh страницу, чтобы увидеть дополнение.

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);
}

1 Ответ

0 голосов
/ 10 марта 2020

Вы предоставили частичные фрагменты кода, поэтому я создал небольшой работающий образец, использующий пользовательскую службу для доступа к концентратору сервера и возвращающий значения компоненту бритвы, в который вводится пользовательская служба.

Обратите внимание, что при использовании служб и обратных вызовов вы должны использовать метод InvokeAsyn c, который отправляет объекту SynchronizationContext Blazor объект, который обеспечивает выполнение одного логического потока.

Вот полный код, скопируйте и протестируйте его, и посмотрите, может ли оно помочь вам с вашим приложением ...

UserService.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;
   }
}

Index.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();
        }
   }
 }

Надеюсь, это поможет ...

...