Signal R 将数据发送到 UI 的功能在使用 Azure Active Directory 身份验证的 Angular/ASP.Net Core Web API 3.1 应用程序中不起作用

Question

我正在使用 Signal R 功能创建一个应用程序，通过 Azure Active Directory 用户身份验证将数据推送到 Angular/ASP .NET Core Web API 3.1 应用程序中的 UI 上。

我正在角度应用程序中编写此代码。

public DoConnection = (): void => {
this.hubConnection = new signalR.HubConnectionBuilder()
.configureLogging(signalR.LogLevel.Trace)
.withUrl(this.myUrl + "dataHub", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
}
)
.build();
this.hubConnection
.start()
.then(() => {
this.hasRemoteConnection = true;
this.registerSignalEvents();
})
.catch(() => {
this.hasRemoteConnection = false;
console.log("No Connection");
});
};



// Reg signalR events
private regSignalEvents(): void {
this.hubConnection.onclose(() => {
this.hasRemoteConnection = false;
});
this.hubConnection.on('doreload', (data) => {
this.sendData(data);
});
}

sendData(doRefresh: boolean): void {
this.doupdate$.next(doreload);
}

但我收到这个错误。

[2022-03-24T13:05:18.150Z] 调试：启动 HubConnection。

XXXXXX.ts:203 [2022-03-24T13:05:18.151Z] 调试：以传输格式“文本”启动连接。

XXXXXX.ts:203 [2022-03-24T13:05:18.151Z] 跟踪：（WebSockets 传输）正在连接。

XXXXXX.ts:199 [2022-03-24T13:05:18.443Z] 信息：WebSocket 连接到 ws://localhost:29863/XXXXXXHub。

XXXXXX.ts:203 [2022-03-24T13:05:18.443Z] 调试：HttpConnection 连接成功。

XXXXXX.ts:203 [2022-03-24T13:05:18.443Z] 调试：发送握手请求。

XXXXXX.ts:203 [2022-03-24T13:05:18.444Z] 调试：集线器握手失败，并在 start() 期间出现错误“WebSocket 未处于打开状态”。停止集线器连接。

XXXXXX.ts:203 [2022-03-24T13:05:18.444Z] 跟踪：（WebSockets 传输）套接字已关闭。

XXXXXX.ts:203 [2022-03-24T13:05:18.445Z] 调试：在“断开连接”状态下调用 HttpConnection.stopConnection（未定义）。

XXXXXX.ts:193 [2022-03-24T13:05:18.445Z] 错误：连接因错误“WebSocket 未处于打开状态”而断开。

XXXXXX.ts:203 [2022-03-24T13:05:18.445Z] 调试：在连接状态下调用 HubConnection.connectionClosed（WebSocket 未处于打开状态）。

XXXXXX.ts:203 [2022-03-24T13:05:18.445Z] 调试：HubConnection 由于错误“WebSocket 未处于打开状态”而无法成功启动。

XXXXXX.service.ts:71 连接失败

任何想法或工作示例 Signal R 功能如何在具有 Azure Active Directory 用户身份验证的 Angular 11/ASP .NET Core Web API 3.1 应用程序中工作。

谢谢！提前

Answer 1

此错误通常是由于客户端仅使用 WebSockets 传输但服务器上未启用 WebSocket 协议引起的。因此请确保其已启用。请参阅
： enabling-websockets-on-iis

在 Azure 中，如果部署在应用服务中
打开您的应用程序仪表板>>
转到配置部分。>>
然后到“常规设置”选项卡并启用 WebSockets

另外，在 dot net core 的配置方法中添加

app.UseWebSockets(new WebSocketOptions
  {
      KeepAliveInterval = TimeSpan.FromSeconds(120),
  });

参考：在 .Net Core 上使用 WebSocket Angular 与 SignalR |乌拉尔 | ITNEXT

解决方法是在尝试连接之前或连接的 start() 之前添加以下代码。

Object.defineProperty(WebSocket, 'OPEN', { value: 1, });

参考： SignalR Asp.netcore 和 Angular（WebSocket 未处于打开状态） - 堆栈内存溢出

另请检查以下类似问题的参考：

1. 集线器握手失败，出现错误' WebSocket 不在
   start()期间的OPEN状态。停止HubConnection - 堆栈内存溢出
   溢出
2. ASP.NET Core SignalR连接故障排除 |微软文档