无法完成与服务器的协商 - Angular + SignalR

Question

我无法使用 Angular + Azure Functions 使用 Nodejs 建立连接。我知道后端有效，因为我使用以下 documentation 创建它并使用文档中提供的客户端 URL 对其进行了测试。消息正在跨多个客户端工作。

所以现在我正在尝试让 Angular 工作。我在 Angular 中为 signalr 创建了一个服务来建立连接，但是我收到了错误

并在网络选项卡上

我也尝试在服务

中替换此代码


  private buildConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl("http://localhost:7070") //use your api adress here and make sure you use right hub name.
      .build();
  };

使用此代码

  private buildConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .configureLogging(signalR.LogLevel.Debug)
      .withUrl("http://localhost:7070/api", {
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets
      })
      .build();

根据此 post 的推荐答案，但它只是 returns

我以前从未使用过 SignalR，所以我试图通过查看几个教程来拼凑它。感谢您的帮助！

信号服务

import { Injectable, EventEmitter } from "@angular/core";
import * as signalR from "@aspnet/signalr";
import { SignalViewModel } from "./signal-view-model";

@Injectable({
  providedIn: "root"
})
export class SignalRService {
  private hubConnection: signalR.HubConnection;
  signalReceived = new EventEmitter<SignalViewModel>();

  constructor() {
    this.buildConnection();
    this.startConnection();
  }

  private buildConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl("http://localhost:7070/api") //c
      .build();
  };

  private startConnection = () => {
    this.hubConnection
      .start()
      .then(() => {
        console.log("Connection Started...");
        this.registerSignalEvents();
      })
      .catch(err => {
        console.log("Error while starting connection: " + err);

        //if you get error try to start connection again after 3 seconds.
        setTimeout(function () {
          this.startConnection();
        }, 3000);
      });
  };

  private registerSignalEvents() {
    this.hubConnection.on("SignalMessageReceived", (data: SignalViewModel) => {
      this.signalReceived.emit(data);
    });
  }
}

就像上面的 Reference Docs link 一样，这就是我的 azure 函数的样子

消息


module.exports = async function (context, req) {
  return {
    "target": "newMessage",
    "arguments": [ req.body ]
  };
};

协商


module.exports = async function (context, req, connectionInfo) {
  context.res.json(connectionInfo);
};

host.json

{
  "version": "2.0",
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[1.*, 2.0.0)"
  },
  "Host": {
    "LocalHttpPort": 7070,
    "CORS": "http://localhost:4200",
    "CORSCredentials": true
  }
}

Answer 1

好的，您无法将 Angular 与 SignalR 函数连接，因为 de CORS 策略。

您忘记在您的函数上配置 CORS。

试试这个配置。

无法完成与服务器的协商 - Angular + SignalR

Failed to complete negotiation with the server - Angular + SignalR

javascript

azure

node.js

angular

azure-signalr