React Native应用程序将无法与SignalR Core完成协商 [英] React Native app won't complete negotiation with SignalR Core

查看：76
本文介绍了React Native应用程序将无法与SignalR Core完成协商的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm trying to integrate the SignalR Core JS client on React Native but can't quite seem to get it to work with a ASP.NET Core server with SignalR. I've heard that other people have been able to make it work despite the lack of a designated React Native client.

我一直收到以下错误:错误:无法完成与服务器的协商:错误".有人可以帮我吗?

I keep getting the following error: "Error: Failed to complete negotiation with the server: Error". Could someone help me?

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

Here's what the React Native app looks like:

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

Package.json

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

这是服务器的样子:

Startup.cs

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

Program.cs

Program.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项目文件

Demo1.cs project file

<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

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

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

推荐答案

结果表明，React Native可能由于https协议而存在连接问题.此外，我还明确添加了"Microsoft.AspNetCore.SignalR"版本1.0.4，以匹配React Native上的版本，即使该版本应包含在"Microsoft.AspNetCore.App"中.

Turns out React Native had an issue connecting perhaps because of the https protocol. Furthermore, I also explicitly added 'Microsoft.AspNetCore.SignalR' version 1.0.4 to match the version on React Native even though it should be included in 'Microsoft.AspNetCore.App'.

因此，这是在React和React Native上都可以使用的更新代码:

So, here's the updated code that works on both React and 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',
  }
});

这是服务器的样子:

Startup.cs

Startup.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项目文件

Demo1.cs project file

   <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

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

这篇关于React Native应用程序将无法与SignalR Core完成协商的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆