我正在尝试将SignalR Core JS客户端集成到React Native上,但似乎无法使用带有SignalR的ASP.NET Core服务器 . 我听说尽管缺少指定的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, "&").replace(/</g, "<").replace(/>/g, ">");
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
{
"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
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中
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);
}
}
}
1 回答
事实证明,由于https协议,React Native有一个连接问题 . 此外,我还明确添加了“Microsoft.AspNetCore.SignalR”版本1.0.4以匹配React Native上的版本,即使它应该包含在“Microsoft.AspNetCore.App”中 .
所以,这里是适用于React和React Native的更新代码:
App.js
这是服务器的样子:
Startup.cs
Demo1.cs项目文件
launchSettings.json