Issue with Nativescript/Angular and SignalR

Viewed 109

I'm developing an application using Nativescript/Angular and ASP.NET Core 3.1 Web API, and I'm trying to implement real-time functionality using SignalR Core.

The server-side implementation of SignalR is working fine (I have tested it with an Angular application), I can invoke methods and handle all incoming events.

On the client-side (Nativescript) I'm using nativescript-signalr-core and I'm following the instructions I found on that link.

I'm running the app on the Android Studio simulator (Pixel_3a_API_30_x86 / Android 11)

Here is my code:

import { SignalrCore } from 'nativescript-signalr-core/angular';

declare var require;
var WebSocket = require('nativescript-websockets');

signalrCore: SignalrCore;

constructor(){
    this.signalrCore = new SignalrCore();

    this.signalrCore.on('connected', (data) => {
        console.log('connected');
    });

        
    this.signalrCore.on('PaymentSuccess', (paymentId : string) => {
        console.log('Payment Success!: ', paymentId );
    });
}  

ngOnInit(): void {
    this.signalrCore.start('https://b685239ad8eb.ngrok.io/paymenthub')
                    .then((isConnected: boolean) => {
                         console.log('isConnected? ', isConnected);

                         if(isConnected) {
                             this.signalrCore.invoke('JoinGroup', 'room_name');
                         }
                     });
}

On the server-side I have the following methods:

public Task JoinGroup(string groupName)
{
    return Groups.AddToGroupAsync(Context.ConnectionId, groupName);
}

public override async Task OnConnectedAsync()
{
    var connId = Context.ConnectionId;
}

public override async Task OnDisconnectedAsync(Exception ex)
{
    var connId = Context.ConnectionId;
}

The OnConnectedAsync method is triggered when the connection is started on the client-side. The OnDisconnectedAsync is never triggered. (I have added these 2 methods only for debugging purposes).

The JoinGroup method is never invoked.

The signalrCore.on('connected' ... on the client-side is never triggered.

Here are 3 methods I have in the SignalR Hub interface:

public interface IPaymentHub
{
    Task OnPaymentSuccessful(string paymentId);
    Task OnPaymentFailed(string paymentId);
    Task TestMessage(string message);
}

I've used the TestMessage method to send a test message to all connected clients, but that doesn't work either.

Sometimes I'm getting this error in the console:

JS: Unhandled Promise rejection: Error - Connection already close!

I have tested the exact same scenarios on a dummy Angular application using @microsoft/signalr and it is working perfectly.

I have found a similar question here, but there are no answers: Nativescript and SignalR?

I can't find any relevant resources online, so I would be very grateful if someone could help me.

Thanks.

1 Answers

I have resolved this issue after adding 1 second timeout before invoking the JoinGroup method:

if(isConnected) {
     setTimeout(() => {
        this.signalrCore.invoke('JoinGroup', 'room_name');
     }, 1000);
}
Related