1

I'm unable to establish a connection using Angular + Azure Functions using Nodejs. I know that the backend works because I created it using the following documentation and tested it with the client URL provided in docs. Messaging was working across multiple clients.

So now I'm trying to get Angular working. I've created a service for signalr in Angular to establish the connection, but I'm getting the errors

enter image description here enter image description here

and on the network tab

enter image description here I also tried replacing this code in service 


  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();
  };

with this code

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

per the recommended answer from this post but then it just returns

enter image description here

I've never used SignalR before so I'm trying to piece this together from looking at several tutorials. I appreciate any help!

signalr service

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);
    });
  }
}

just like from Reference Docs link above, this is what my azure functions looks like

messages


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

negotiate


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
  }
}
user6680
  • 79
  • 6
  • 34
  • 78

1 Answers1

2

Ok, you can't connect your Angular with the SignalR function because de CORS polity.

You forgot to configure the CORS on your function. enter image description here

Try with this configuration.

Nacho Martínez-Aedo
  • 585
  • 1
  • 3
  • 12
  • I updated my question to include host.json. I have it set to localhost:4200 since that's where Angular is currently coming from. – user6680 Jun 12 '20 at 19:08
  • Ok, I see the error now, you put the configuration on the thost.json not in the local.settings.json. Also try firts with "CORS" : "*". – Nacho Martínez-Aedo Jun 12 '20 at 22:38
  • Whoops. I fixed that now. I moved it to local.settings.json now. Errors are still there though. Also if I change it to ```"CORS": "*",``` then the browser throws this error. (first line) https://postimg.cc/KKPNzHsM , but at the same time if I put ```"CORS": "http://localhost:4200"``` then I get the error ```Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:7070/negotiate. (Reason: CORS request did not succeed).``` Any ideas? – user6680 Jun 13 '20 at 13:34
  • Ok, delete the CORSCredentials then. And try too with diferents explorers, chrome, firefox etc... – Nacho Martínez-Aedo Jun 13 '20 at 14:11
  • @user6680 Thank you and dont forget to config the CORS on the azure portal when you publish your Function!!! – Nacho Martínez-Aedo Jun 14 '20 at 14:37
  • Thanks I appreciate the help! I have one more question though. I got it working and the connection was established between Angular and backend, but something happened between then and now. Now when I run ```func start``` the negotiate function doesn't appear with list of other functions in console and it says ```The 'negotiate' function is in error: The binding type(s) 'signalRConnectionInfo' are not registered. Please ensure the type is correct and the binding extension is installed.``` any chance you know how to solve this issue? I couldn't find an answer online. I might create a new post – user6680 Jun 14 '20 at 15:00
  • You're welcome. Puff I m not sure, I work with functions on c# and that problem its cause you need the package, on c# was Microsoft.Azure.WebJobs.Extensions.SignalRService, so maybe you lost it try reinstalling. – Nacho Martínez-Aedo Jun 14 '20 at 16:53