SignalR消息未发送-角度

时间:2020-06-18 16:33:33

标签: angular signalr azure-functions

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

传递天蓝色功能代码

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

function.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"
    }
  ]
}

1 个答案:

答案 0 :(得分:1)

问题是您拥有"NewMessage",客户端具有大写字母“ N”,功能上具有“ newMessage”。

module.exports = async function (context, req) {
  return {
    "target": "newMessage", // "n"
    "arguments": [ req.body ]
  };
};
 sendMessage(message: SignalViewModel) {
    this.hubConnection.invoke('NewMessage', message); // "N"
  }

还请参阅有关documentation的有关无服务器模式下的Azure SignalR服务的信息。如您所见,如果将集线器配置为无服务器模式,则无法从客户端调用方法。

如果在无服务器模式下使用Azure SignalR服务,则无法从客户端调用集线器方法。有关更多信息,请参见SignalR服务文档。 Link

更新:由于您正在使用Azure Functions,因此需要在无服务器模式下运行SignalR,如下所示,您不能从客户端调用集线器方法。