Connect React Native App to Net Core SignalR Hub

Question

I'm developing a react netive mobile app that needs to implements a chat. The backend api are developed in .net Core 3.0, so I decided to create a SignalR Hub (Microsoft.AspNetCore.SignalR) and use it for real time messages.

On the client I installed via npm '@aspnet/signalr' v "^1.1.4". (I alse tried to use the package 'react-native-signalr' but I did not find a way to skip negotiation (if any of you knows how to that pls let me know).

By the way... I setted up a chat hub and after that, I tried to connect my react native client to the hub. this is my component:

import React from 'react';
import {
    View,
    SafeAreaView,
    StyleSheet
} from 'react-native';
import {  HubConnectionBuilder, HttpTransportType, LogLevel } from '@aspnet/signalr'


class ChatScreen extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount = () => {
        const connectionHub = new HubConnectionBuilder()
        .configureLogging(LogLevel.Debug)
        .withUrl('https://localhost:44379/chatHub', {
          skipNegotiation: true,
          transport: HttpTransportType.WebSockets
        }).build();
  
      connectionHub.start().catch(err => console.log(err));
    }

    render() {
        return (
            <SafeAreaView style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>
                   
                </View>
            </SafeAreaView>
        );
    }
}

ChatScreen.navigationOptions = {
    title: "Chat",
};

const styles = StyleSheet.create({

});

export default ChatScreen;

It return an error:

Error: Failed to start the connection: null

Pls note that the same code (

const connectionHub = new HubConnectionBuilder()
    .configureLogging(LogLevel.Debug)
    .withUrl('https://localhost:44379/chatHub', {
      skipNegotiation: true,
      transport: HttpTransportType.WebSockets
    }).build();

  connectionHub.start().catch(err => console.log(err));

) copied and pasted in angular component works like a charm.

Also, in the StartUp.cs there are the following configuration:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using CosmeticSurgery.WebApi.Hub;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;

namespace CosmeticSurgery.WebApi
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();
            services.AddSignalR();

            services.AddCors(o => o.AddPolicy("AllowAllPolicy", builder => {
                builder
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowAnyOrigin();
            }));
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseCors("AllowAllPolicy");
                        
            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapHub<ChatHub>("/ChatHub");
            });
        }
    }
}

Can you help me to find out where and why I'm failing with the connection from react native? Also, I set the "skipNegotiation" to "true" because otherwise it did not work. But why? And I read that native apps don't consider the cors. So how can I limit the use of the api, just to my app and my website?

Thank you for your help!

score 1 · Answer 1 · answered Jun 08 '20 at 02:22

This may be late, Try using https://www.npmjs.com/package/@microsoft/signalr

let connection = new signalR.HubConnectionBuilder()
    .withUrl("/chat")
    .build();
 
connection.on("send", data => {
    console.log(data);
});
 
connection.start()
    .then(() => connection.invoke("send", "Hello"));

Connect React Native App to Net Core SignalR Hub

1 Answers1