React Native 应用无法完成与 SignalR Core 的协商

Question

我正试图在React Native上集成SignalR Core JS客户端，但似乎无法将其与ASP配合使用。NET核心服务器与SignalR。我听说，尽管缺乏指定的React Native客户端，但其他人也能让它发挥作用。

我不断收到以下错误："错误：无法完成与服务器的协商：错误"。有人能帮我吗？

React Native应用程序如下所示：

App.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"
}
}

以下是服务器的样子：

启动.cs

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>

launchSettings.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"
}
}
}
}

ApplicationHub.cs

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

Answer 1

React Native的连接出现问题，可能是因为https协议。此外，我还明确添加了"微软"。AspNetCore。SignalR版本1.0.4与React Native上的版本相匹配，尽管它应该包含在"Microsoft"中。AspNetCore。应用程序。

因此，以下是适用于React和React Native的更新代码：

App.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',
}
});

以下是服务器的样子：

启动.cs

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>

launchSettings.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"
}
}
}
}

Answer 2

据我所知，这个问题已经解决了，但我认为我可能会分享我遇到的问题的解决方案(导致相同的错误消息="错误：无法完成与服务器的协商：错误"(。

问题的原因是我在客户端代码中指定了错误的端口号。(作为传递给HubConnectionBuilder((.withUrl((方法的参数(

因此；demo1"’s应用程序URL(http://192.168.0.89:5000)，我需要传递iisExpress的applicationUrl(http://192.168.0.89:5002)。