Reactjs SignalR和React-由于基础连接已关闭,调用已取消
晚上好。 我正在使用SignalR(5.0.1,我还尝试了早期版本3.0.0)和dotnet core 3.1构建聊天组件 任何用户的评论都可以发送到所有连接的客户端,所有连接的客户端都可以看到该评论。但是,发送注释的客户端将断开连接,并且在mobx存储中捕获到一个错误Reactjs SignalR和React-由于基础连接已关闭,调用已取消,reactjs,signalr,Reactjs,Signalr,晚上好。 我正在使用SignalR(5.0.1,我还尝试了早期版本3.0.0)和dotnet core 3.1构建聊天组件 任何用户的评论都可以发送到所有连接的客户端,所有连接的客户端都可以看到该评论。但是,发送注释的客户端将断开连接,并且在mobx存储中捕获到一个错误addComment() 客户端在发送评论后将失去连接(发送方和其他客户端可以从ChatHub获取已处理的评论)。我不知道为什么服务器决定断开连接并引发错误。我 错误: [2021-01-10T22:38:14.314Z] Inf
addComment()
客户端在发送评论后将失去连接(发送方和其他客户端可以从ChatHub获取已处理的评论)。我不知道为什么服务器决定断开连接并引发错误。我
错误:
[2021-01-10T22:38:14.314Z] Information: Connection disconnected.
adventureStore.ts:73 Error: Invocation canceled due to the underlying connection being closed.
at HubConnection.connectionClosed (HubConnection.ts:654)
at HttpConnection.HubConnection.connection.onclose (HubConnection.ts:103)
at HttpConnection.stopConnection (HttpConnection.ts:488)
at WebSocketTransport.transport.onclose (HttpConnection.ts:410)
at WebSocketTransport.close (WebSocketTransport.ts:135)
at WebSocket.webSocket.onclose (WebSocketTransport.ts:97)
代码如下:
启动:
public class Startup
{
// only showing the codes related to problem
services.AddSignalR();
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(opt =>
{
opt.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuerSigningKey = true,
IssuerSigningKey = key,
ValidateAudience = false,
ValidateIssuer = false
};
opt.Events = new JwtBearerEvents
{
OnMessageReceived = context =>
{
var accessToken = context.Request.Query["access_token"];
var path = context.HttpContext.Request.Path;
if (!string.IsNullOrEmpty(accessToken) &&
(path.StartsWithSegments("/chat")))
{
context.Token = accessToken;
}
return Task.CompletedTask;
}
};
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseMiddleware<ErrorHandlingMiddleware>();
if (env.IsDevelopment())
{
// app.UseDeveloperExceptionPage();
}
// app.UseHttpsRedirection();
app.UseRouting();
app.UseCors("CorsPolicy");
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<ChatHub>("/chat");
});
}
}
建立连接的mobx存储区:
@observable comments: IComment[] | null = null;
@observable.ref hubConnection: HubConnection | null = null;
@action createHubConnection = () => {
this.hubConnection = new HubConnectionBuilder()
.withUrl("http://localhost:5000/chat", {
accessTokenFactory: () => this.rootStore.commonStore.token!,
})
.configureLogging(LogLevel.Information)
// i have to do this for now. Need to fix that disconnecting right
// after Clients.All.SendAsync("ReceiveComment", comment); in ChatHub.cs
// .withAutomaticReconnect([0, 0, 10000])
.build();
this.hubConnection
.start()
.then(() => console.log(this.hubConnection!.state))
.catch((error) => console.log("Error establishing connection: ", error));
this.hubConnection.on("ReceiveComment", (comment) => {
runInAction(() => {
if (this.comments == null) {
this.comments = new Array<IComment>();
}
this.comments.push(comment);
});
});
};
@action stopHubConnection = () => {
this.hubConnection!.stop();
};
@action addComment = async (values: any) => {
try {
await this.hubConnection!.invoke("SendComment", values);
} catch (error) {
console.log(error);
}
};
@可观察的注释:IComment[]| null=null;
@observable.ref hubConnection:hubConnection | null=null;
@操作createHubConnection=()=>{
this.hubConnection=新的HubConnectionBuilder()
.withUrl(“http://localhost:5000/chat", {
accessTokenFactory:()=>this.rootStore.commonStore.token!,
})
.configureLogging(日志级别信息)
//我现在必须这么做,需要把它修好
//在Clients.All.SendAsync(“ReceiveComment”,comment)之后;在ChatHub.cs中
//.使用AutomaticReconnect([0,0,10000])
.build();
这是hubConnection
.start()
.then(()=>console.log(this.hubConnection!.state))
.catch((错误)=>console.log(“建立连接时出错:”,错误));
this.hubConnection.on(“ReceiveComment”,(comment)=>{
运行不活动(()=>{
if(this.comments==null){
this.comments=新数组();
}
this.comments.push(comment);
});
});
};
@操作停止连接=()=>{
此.hubConnection!.stop();
};
@action addComment=async(值:any)=>{
试一试{
等待此.hubConnection!.invoke(“SendComment”,值);
}捕获(错误){
console.log(错误);
}
};
在Asp.net Core 3.1中,当连接到Signal Hub时,我有一个Angular客户端面临同样的问题。应用的NuGet包是“Microsoft.AspNetCore.signal.Core”版本1.1.0。将Asp.net Web API门户升级到.net 5.0后。问题已经解决。我有一个Angular客户端在连接到Asp.net Core 3.1中的SignalR Hub时面临同样的问题。应用的NuGet包是“Microsoft.AspNetCore.signal.Core”版本1.1.0。将Asp.net Web API门户升级到.net 5.0后。问题解决了。我也面临同样的问题。我已经使用System.Text.Json作为默认的Json序列化程序。
要解决此问题,我将“”nuget升级到有效版本
使用nginx进行反向代理的用户请更新您的nginx.config:
这些步骤帮助我解决了同样的问题。我也遇到过同样的问题。我已经使用System.Text.Json作为默认的Json序列化程序。
要解决此问题,我将“”nuget升级到有效版本
使用nginx进行反向代理的用户请更新您的nginx.config:
这些步骤帮助我解决了同样的问题。你说得对。在我将我的项目从3.1升级到5.0之后,问题就解决了。谢谢你是对的。在我将我的项目从3.1升级到5.0之后,问题就解决了。谢谢
@observable comments: IComment[] | null = null;
@observable.ref hubConnection: HubConnection | null = null;
@action createHubConnection = () => {
this.hubConnection = new HubConnectionBuilder()
.withUrl("http://localhost:5000/chat", {
accessTokenFactory: () => this.rootStore.commonStore.token!,
})
.configureLogging(LogLevel.Information)
// i have to do this for now. Need to fix that disconnecting right
// after Clients.All.SendAsync("ReceiveComment", comment); in ChatHub.cs
// .withAutomaticReconnect([0, 0, 10000])
.build();
this.hubConnection
.start()
.then(() => console.log(this.hubConnection!.state))
.catch((error) => console.log("Error establishing connection: ", error));
this.hubConnection.on("ReceiveComment", (comment) => {
runInAction(() => {
if (this.comments == null) {
this.comments = new Array<IComment>();
}
this.comments.push(comment);
});
});
};
@action stopHubConnection = () => {
this.hubConnection!.stop();
};
@action addComment = async (values: any) => {
try {
await this.hubConnection!.invoke("SendComment", values);
} catch (error) {
console.log(error);
}
};