Blazor - Отправить сообщение с помощью SignalR - PullRequest
Новая
       4

Blazor - Отправить сообщение с помощью SignalR

0 голосов
/ 13 февраля 2020

Я создал довольно сложные приложения Blazor, вызывая веб-API, внедряя сервисы и используя сторонние библиотеки. Но я использую SignalR впервые. Моя настройка:

  • ASP. NET Базовый веб-API (выполнить тяжелую работу)
  • Внешний интерфейс - приложение Blazor (на стороне сервера - вызов веб-API через классы служб) я создал в блазорском проекте)

Все работает отлично. Я создал концентратор в моем API и выставить конечную точку. Через клиентов Blazer я могу установить sh подключение и дополнительные клиенты уведомляются всем клиентам через концентратор.

enter image description here

ПРОБЛЕМА Я получаю очень странное сообщение при попытке отправить / передать сообщение от клиента на сервер / концентратор. При нажатии на кнопку «Отправить» я получаю «Uncaught SyntaxError: Неожиданный номер»

enter image description here

При нажатии на ссылку об ошибке, она дает мне;

System.Runtime.CompilerServices.AsyncTaskMethodBuilder 1+AsyncStateMachineBox 1 [System.Threading.Tasks.VoidTaskResult, MBOSS.Pages.Index + d__6]

CODE

Мой компонент Index.razror очень прост (как показано ниже): 

@page "/index"
@using Microsoft.AspNetCore.SignalR.Client

<div class="container">
    <input type="text" id="message" class="form-control" bind="@Message" />
    <input type="button" id="sendMessage" value="Send" class="btn btn-primary" onclick="@SendMessage()" />
    <ul id="discussion">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
</div>

@code{
        HubConnection connection;
        string Message = "";
        IList<string> messages = new List<string>();

    protected override async Task OnInitializedAsync()
    {
        connection = new HubConnectionBuilder().WithUrl("http://localhost:63572/livedata").Build();
        connection.On<string, string>("broadcastMessage", this.OnBroadcastMessage);
        await connection.StartAsync();
    }

    Task OnBroadcastMessage(string name, string message)
    {
        if (!string.IsNullOrEmpty(message))
        {
            messages.Add(name + " : " + message);
            StateHasChanged();
        }
        return Task.CompletedTask;
    }

    async Task SendMessage()
    {
        await connection.InvokeAsync("Send", "Blazor Client", Message);
        Message = "";
    }
}

Мой класс-концентратор также очень прост; 

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRTest
{
    public class LiveData : Hub
    {
        public override Task OnConnectedAsync()
        {
            Clients.All.SendAsync("broadcastMessage", "system", $"{Context.ConnectionId} joined the conversation");
            return base.OnConnectedAsync();
        }
        public void Send(string name, string message)
        {
            Clients.All.SendAsync("broadcastMessage", name, message);
        }

        public override Task OnDisconnectedAsync(System.Exception exception)
        {
            Clients.All.SendAsync("broadcastMessage", "system", $"{Context.ConnectionId} left the conversation");
            return base.OnDisconnectedAsync(exception);
        }
    }
}

Может кто-нибудь подсказать, как чтобы решить проблему, чтобы я мог начать использовать SignalR с Blazor.

Большое спасибо

1 Ответ

1 голос
/ 13 февраля 2020

Простите, ребята, мой плохой!

Очень глупая (синтаксическая) проблема. В основном я использовал сторонние блейзорные библиотеки (например, Radzen, Dev Express et c.) Для создания пользовательского интерфейса. Для этого клиентского приложения blazor signalR я использую простые теги html. Проблема была в атрибутах 'bind' & 'onclick'. Им должен предшествовать символ @.

Таким образом, вводимый текст должен быть; 

<input type="text" id="message" class="form-control" @bind="Message" />

, а не 

<input type="text" id="message" class="form-control" bind="@Message" />

И кнопка должна быть 

    <input type="button" id="sendMessage" value="Send" class="btn btn-primary" @onclick="SendMessage" />

вместо 

<input type="button" id="sendMessage" value="Send" class="btn btn-primary" onclick="@SendMessage()" />
...