Подключите приложение React Native к Net Core SignalR Hub - PullRequest
Новая
       11

Подключите приложение React Native к Net Core SignalR Hub

1 голос
/ 15 января 2020

Я занимаюсь разработкой реактивного мобильного приложения, в котором должен быть чат. Базовые API разработаны в. net Core 3.0, поэтому я решил создать SignalR Hub (Microsoft.AspNetCore.SignalR) и использовать его для сообщений в реальном времени.

На клиенте, который я установил через npm '@ aspnet / signalr' v "^ 1.1.4". (Я также пытался использовать пакет «response-native-signalr», но я не нашел способа пропустить переговоры (если кто-нибудь из вас знает, как это сделать, сообщите мне об этом).

Кстати. .. Я установил концентратор чата, и после этого я попытался подключить свой собственный нативный клиент к концентратору. Это мой компонент: 

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;

Возвращает ошибку: 

Error: Failed to start the connection: null

Просьба учесть, что один и тот же код (

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

) скопирован и вставлен в angular компонент работает как шарм.

Также в StartUp.cs есть следующая конфигурация: 

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

Можете ли вы помочь мне выяснить, где и почему у меня не получается установить соединение с реактивным родным? Кроме того, я установил для «skipNegotiation» значение «true», потому что в противном случае это не сработало. Но почему? И я читал, что родные приложения не учитывают cors. Так как я могу ограничить использование API только для моего приложения и моего веб-сайта?

Спасибо за вашу помощь!

...