Blazor

Question

我创建了相当复杂的 Blazor 应用程序，调用网络 APIs，注入服务和使用第 3 方库。但我是第一次使用 SignalR。我的设置是：

ASP.NET 核心网站 API（做繁重的工作）
前端 - Blazor 应用程序（服务器端 - 通过我在 blazor 项目中创建的服务 class 调用网络 api）

一切正常。我在 api 中创建了一个集线器并公开了端点。通过 blazer 客户端，我可以建立连接并通过集线器将连接的额外客户端通知给所有客户端。

问题当我尝试 send/broadcast 从客户端发送消息到 server/hub 时，我收到一条非常奇怪的消息。单击“发送”按钮时，我收到 'Uncaught SyntaxError: Unexpected number'

点击错误上的link，它给了我；

System.Runtime.CompilerServices.AsyncTaskMethodBuilder1+AsyncStateMachineBox1[System.Threading.Tasks.VoidTaskResult,MBOSS.Pages.Index+d__6]

代码

我的'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 = "";
    }
}

我的hubclass也很简单；

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 一起使用。

非常感谢

Answer 1

对不起各位，我的错！

非常愚蠢的（语法）问题。大多数情况下，我使用第 3 方 blazor 库（如 Radzen、DevExpress 等）来生成 UI。对于这个 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()" />

Blazor - 使用 SignalR 发送消息问题

Blazor - Send Message problem using SignalR

c#

signalr

asp.net-core-webapi

blazor-server-side