Integrate Angular 4+ application with ASP.NET Core SignalR

Question

I am trying to integrate Angular 4 + SPA with ASP.NET Core SignalR starting from this tutorial.

I have managed to integrate using a simple web app (jquery + signalR client) with ASP.NET Core App, so server-side configuration seems ok.

ASP.NET Core

Microsoft.AspNetCore.SignalR version 1.0.0-alpha2-final

Startup.cs

app.UseSignalR(routes =>
{
    routes.MapHub<ChatHub>("chat");
});

ChatHub.cs

public class ChatHub: Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.InvokeAsync("broadcastMessage", name, message + " from SignalR hub");
    }

    public override Task OnConnectedAsync()
    {
        Clients.All.InvokeAsync("broadcastMessage", "system", $"{Context.ConnectionId} joined the conversation");
        return base.OnConnectedAsync();
    }

    public override Task OnDisconnectedAsync(System.Exception exception)
    {
        Clients.All.InvokeAsync("broadcastMessage", "system", $"{Context.ConnectionId} left the conversation");
        return base.OnDisconnectedAsync(exception);
    }
}

Working client

I am referencing signalr-client-1.0.0-alpha2-final.js

// Web sockets do not work, most probably due to IIS Express I am using for testing
var transport = signalR.TransportType.LongPolling;
var connection = new signalR.HubConnection(`http://localhost:60431/chat`, { transport: transport });

connection.start();

This works fine.

Angular 4+ client (non working)

import { Component, OnInit } from '@angular/core';
import * as signalR from '@aspnet/signalr';

export class SignalrTestComponent implements OnInit {

  private hubConnection: signalR.HubConnection;

  ngOnInit() {
    let transportType = signalR.TransportType.LongPolling;
    this.hubConnection = new signalR.HubConnection('http://localhost:60431/chat', { transport: transportType });

    this.hubConnection.start()
      .then(() => {
        console.log('Hub connection started')
      })
      .catch(() => {
        console.log('Error while establishing connection')
      });
  }

I will receive 'Error while establishing connection'. The error is related to the fact that client tries to reach http://localhost:60431/chat/negotiate which returns a wrong response (some dummy text associated with an incorrect route instead of an expected JSON).

My assumption is that transport parameter is ignored and thus the negotiate is triggered. However, AFAIK negotiate is no longer supported in ASP.NET Core version of SignalR.

package.json possibly relevant dependencies

"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@aspnet/signalr": "^1.0.0-preview1-update1",

Question: How can I properly configure HubConnection to include the desired protocol when using Angular2+ client?

Answer 1

Instead of this.hubConnection.start(), the new @aspnet/signalr docs say to use the following...

const url = 'http://www.something.com';

this.hubConnection = new signalR.HubConnectionBuilder()
  .withUrl(url)
  .build();

The docs are still really crappy, but I have it working in my project, hope this helps.

Answer 2

Ok, I got help on the project's github issue section. My server-side (ASP.NET Core SignalR) version was not up to date and thus the issues I had:

1. Upgraded to 1.0.0-preview1-final

2. Changed server-side code to adapt to newer version (i.e. fixed compile errors):

   public class ChatHub: Hub
   {
       public void Send(string message)
       {
            // Call the broadcastMessage method to update clients.
            Clients.All.SendAsync("broadcastMessage", message + " from SignalR hub");
       }
    }
   

As a side note the @latest version of client side package is not exactly as the server-side one:

There was a minor issue in the JavaScript client when preview1 was released and it needed to be updated, so the latest version of the JavaScript client is 1.0.0-preview1-update1, but the server is 1.0.0-preview1-final. These versions are completely compatible.