I currently have an Angular project that successfully negotiates with a C# Azure Function then attempts to send said function a message. The Azure Function is using a class-based model and despite tagging the method which should receive the Angular message with a SignalRTrigger decoration, the function never seems to be called.
I am not using any sort of “builder.Services.AddSignalR();” call in the Azure Function's Startup.cs file.
Below is the trigger class in the Azure Function:
/// <summary>
/// Responsible for handling HTTP requests related to SignalR
/// </summary>
public class ChatV3 : ServerlessHub {
/// <summary>
/// Used to start a SignalR connection.
/// Note: HubName will be lowercased on output, so may as well leave it lowercase here.
/// </summary>
[FunctionName(nameof(Negotiate))]
public SignalRConnectionInfo Negotiate(
[HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest request,
[SignalRConnectionInfo(HubName="chatv3")] SignalRConnectionInfo connectionInfo) {
return connectionInfo;
}
[FunctionName("SignalRTest")]
public static async Task SignalRTest([SignalRTrigger] InvocationContext invocationContext, string message, ILogger logger) {
logger.LogInformation($"Receive {message} from {invocationContext.ConnectionId}.");
}
}
Below is the Angular implementation of the send:
ngOnInit(): void {
this.signalRService.negotiate().subscribe({
next: (negotiateResponse) => {
console.debug("Inside Next!");
console.debug("Negotiate Response: ", negotiateResponse);
let options = {
accessTokenFactory: () => negotiateResponse.accessToken,
};
console.debug("Establishing Connection...");
const connection = new signalR.HubConnectionBuilder()
.withUrl(negotiateResponse.url, options)
.configureLogging(signalR.LogLevel.Information)
.build();
connection.start().then(() => {
console.debug("Ready to send!");
connection.send("initializechat", negotiateResponse.url, negotiateResponse.accessToken);
console.log('connected!');
})
.catch((err) => console.error("Problem with Connection.start()", err.toString()));
},
error: (err) => {
console.error("Problem with signalRService.negotiate()", err);
}
});
}
I tried adding a variety of decorations to the server-side SignalRTrigger method and used ngrok to verify that the payload the Angular project is sending is correct. I also attempted to implement some solutions prescribed by the official documentation, but nothing has worked thus far. It seems there are many different implementations of this behavior. Any help would be immensely appreciated!