SignalR 消息未发送 - Angular

Question

我正在尝试使用 SignalR 和 Angular 发送消息，但 API 从未在后端受到攻击。根本没有状态代码，因此它永远不会到达 API 端点。集线器连接建立得很好，所以我认为它在执行this.hubConnection.invoke('NewMessage', message); 时会自动到达端点，但它似乎不起作用。我真的是 SignalR 的新手，所以我很感激任何帮助！

消息发送azure函数代码

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

函数.json

{
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "signalR",
      "name": "$return",
      "hubName": "chat",
      "direction": "out"
    }
  ]
}

角度服务

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")
      .build();
  };
  sendMessage(message: SignalViewModel) {
    this.hubConnection.invoke('NewMessage', message);
  }
  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);
    });
  }
}

角度分量

 txtMessage: string = 'd';
  uniqueID: string = new Date().getTime().toString();
  messages = new Array<SignalViewModel>();
  signalRMessage = new SignalViewModel();
  sendMessage(): void {
    if (this.txtMessage) {
      console.log("Executing signalr")
      this.signalRMessage = new SignalViewModel();
      this.signalRMessage.clientuniqueid = this.uniqueID;
      this.signalRMessage.type = "sent";
      this.signalRMessage.message = this.txtMessage;
      this.signalRMessage.date = new Date();
      this.messages.push(this.signalRMessage);
      this.signalRService.sendMessage(this.signalRMessage);
      this.txtMessage = '';
    }

协商功能

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

协商函数的function.json

{
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "signalRConnectionInfo",
      "name": "connectionInfo",
      "hubName": "chat",
      "direction": "in"
    }
  ]
}

Answer 1

问题是你有"NewMessage"，在客户端有大写“N”，在函数上有“newMessage”。

module.exports = async function (context, req) {
  返回 {
    "target": "newMessage", // "n"
    “参数”：[ req.body ]
  };
};

 sendMessage(message: SignalViewModel) {
    this.hubConnection.invoke('NewMessage', message); // "N"
  }

还可以查看documentation，了解无服务器模式下的 Azure SignalR 服务。如您所见，如果您的集线器配置为无服务器模式，则无法从客户端调用方法。

如果您在无服务器模式下使用 Azure SignalR 服务，则无法从客户端调用集线器方法。有关详细信息，请参阅 SignalR 服务文档。 Link

更新：由于您正在使用 Azure Functions 并且需要在无服务器模式下运行 SignalR，如下所示，您无法从客户端调用集线器方法。