CODEWITHSUNDEEP
c#signalrasp.net-core-webapiblazorblazor-server-side
Haseeb Sd
Haseeb Sd

Reputation: 236

Blazor - Send Message problem using SignalR

I have created fairly complicated Blazor apps, calling web APIs, injecting services and using 3rd party libraries. But I am using SignalR first time ever. My setup is:

Everything is working fine. I have created a hub in my api and expose the endpoint. Through blazer clients, i can establish the connection and connecting extra clients are notified to all clients via hub.

enter image description here

THE PROBLEM I am getting a very bizarre message when trying to send/broadcast a message from client to server/hub. When clicking the Send button, I am getting 'Uncaught SyntaxError: Unexpected number'

enter image description here

Clicking on the link on the error, it gives me;

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

CODE

My 'Index.razror' component is very simple (as follows):

@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 = "";
    }
}

My hub class is very simple as well;

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

Can someone please suggest, how to solve the problem so I can start using SignalR with Blazor.

Many thanks

Upvotes: 0

Views: 3334

Answers (1)

Haseeb Sd
Haseeb Sd

Reputation: 236

Sorry guys, my bad!

Very silly (syntax) issue. Mostly I used 3rd party blazor libraries (like Radzen, DevExpress etc.) to generate UI. For this blazor signalR client app, I use plain html tags. The problem was with the 'bind' & 'onclick' attributes. These should be preceded with @ symbol.

So, input text should be;

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

rather than

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

And button should be

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

rather than

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

Upvotes: 2

Related Questions