react-native - React Native 应用程序无法与 SignalR Core 完成协商

我正在尝试将 SignalR Core JS 客户端集成到 React Native 上，但似乎无法让它与带有 SignalR 的 ASP.NET Core 服务器一起工作。我听说尽管缺乏指定的 React Native 客户端，但其他人已经能够使其工作。

我不断收到以下错误:“错误:无法完成与服务器的协商:错误”。有人可以帮助我吗？

这是 React Native 应用程序的样子:

应用程序.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableHighlight, TextInput, Alert } from 'react-native';

import * as signalR from '@aspnet/signalr';

export default class App extends Component {

  componentDidMount() {
    let connection = new signalR.HubConnectionBuilder()
      .withUrl("http://192.168.0.89:5000/app")
      .configureLogging(signalR.LogLevel.Information)
      .build();

    connection.on("ReceiveMessage", (user, message) => {
      const msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
      const encodedMsg = user + " says " + msg;
      log(encodedMsg);
    });

    connection.start().catch(err => this.logError(err));
  }

  render() {
    return (
      <View style={styles.container}>

      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

包.json

{
  "name": "TakMobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@aspnet/signalr": "^1.0.4",
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.4",
    "react-native-callkit": "^1.3.4",
    "react-native-voip-push-notification": "^1.1.2",
    "react-native-webrtc": "^1.67.1",
    "socket.io-client": "^2.1.1"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.0",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },
  "jest": {
    "preset": "react-native"
  }
}

这是服务器的样子:

启动文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

namespace demo1
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
        }

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

            app.UseFileServer();
            app.UseSignalR(routes =>
            {
                routes.MapHub<ApplicationHub>("/app");
            });
        }
    }
}

程序.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;

namespace demo1
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateWebHostBuilder(args).Build().Run();
        }

        public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>();
    }
}

Demo1.cs 项目文件

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.App" />
  </ItemGroup>

</Project>

启动设置.json

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://192.168.0.89:5002",
      "sslPort": 44397
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "demo1": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "http://192.168.0.89:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

应用中心

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace demo1 {
    public class ApplicationHub : Hub {
        public Task Send(string message) {
            return Clients.All.SendAsync("Send", message);
        }
    }
}

最佳答案

结果证明 React Native 连接出现问题，可能是因为 https 协议(protocol)。此外，我还明确添加了“Microsoft.AspNetCore.SignalR”版本 1.0.4 以匹配 React Native 上的版本，即使它应该包含在“Microsoft.AspNetCore.App”中。

所以，这是适用于 React 和 React Native 的更新代码:

应用程序.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableHighlight, TextInput, Alert } from 'react-native';

import * as signalR from '@aspnet/signalr';

export default class App extends Component {

  componentDidMount() {
    const hubUrl = 'http://192.168.0.89:5000/app';

const connectionHub = new signalR.HubConnectionBuilder()
  .withUrl(hubUrl)
  .configureLogging(signalR.LogLevel.Information)
  .build();

connectionHub.on('ReceiveMessage', this.messageReceived);
connectionHub.start()
  .catch(err => this.logError(err));
  }

  render() {
    return (
      <View style={styles.container}>

      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

这是服务器的样子:

启动文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

namespace demo1
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
            services.AddCors();
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseCors(cors => {
                cors.AllowAnyHeader();
                cors.AllowAnyOrigin();
                cors.AllowAnyMethod();
                cors.AllowCredentials();
            });
            app.UseSignalR(routes =>
            {
                routes.MapHub<ApplicationHub>("/app");
            });


            app.UseHttpsRedirection();
            app.UseWebSockets();
            app.UseMvc();

        }
    }
}

Demo1.cs 项目文件

   <Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.App" />
    <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.4" />
  </ItemGroup>

</Project>

启动设置.json

 {
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://*:5002",
      "sslPort": 44397
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "demo1": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "http://*:5000;https://*:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

关于react-native - React Native 应用程序无法与 SignalR Core 完成协商，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53250252/