Cannot connect Angular 5 SPA client to ASP.NET Core SignalR Hub

[Alexei000]

I have problem integrating an Angular 5 SPA with an ASP.NET Core SignalR Hub.

ASP.NET Core app info

Hosting: IIS Express 10
Package: Microsoft.AspNetCore.SignalR version 1.0.0-alpha2-final
Relevant code:

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

I have a working client based on 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();

The connection is working correctly

Angular 5 application (not working)

package.json

"@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",

(I have also tried with @aspnet/signalr@1.0.0-preview1-final)

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

Relevant code:

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,
        logger: signalR.LogLevel.Trace
      });

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

Connection is not started. Developer Tools (Network) shows a request to http://localhost:60431/chat/negotiate which returns a non-JSON response. \

Since I have a working client I think I am not using a correct package within Angular 5 app or the transport type is not used at all (thus, the need for negotiate).

How can I overcome this issue?

Please include as much of the following as you can in your bug report

• Versions of Server-Side NuGet Packages: Microsoft.AspNetCore.SignalR version 1.0.0-alpha2-final
• Versions of Client-Side NuGet/NPM Packages: "@aspnet/signalr": "^1.0.0-preview1-update1"
• Are you using the C# client or the JavaScript client: JS client
• The Server you are using (Kestrel/HttpSysServer/IIS/IIS Express/Azure Web App/etc.): IIS Express 10
• The Operating System on the Server (Windows/Linux/macOS): Windows 7 x64
• The Operating System on the Client (Windows/Linux/macOS): Windows 7 x64
• The Browser on the client, if using the JavaScript client (IE/Chrome/Edge/Firefox/etc.): Chrome 65
• If possible, please collect Network Traces and attach them (please do not post them inline, use a service like Gist to upload them and link them in the issue): I will post relevant network brief info

I have problem integrating an Angular 5 SPA with an ASP.NET Core SignalR Hub.

ASP.NET Core app info

Hosting: IIS Express 10
Package: Microsoft.AspNetCore.SignalR version 1.0.0-alpha2-final
Relevant code:

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

I have a working client based on 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();

The connection is working correctly

Angular 5 application (not working)

package.json

"@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",

(I have also tried with @aspnet/signalr@1.0.0-preview1-final)

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

Relevant code:

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

Connection is not started. Developer Tools (Network) shows a request to http://localhost:60431/chat/negotiate which returns a non-JSON response.

Since I have a working client I think I am not using a correct package within Angular 5 app or the transport type is not used at all (thus, the need for negotiate).

How can I overcome this issue?

Thank you.

Please include as much of the following as you can in your bug report

• Versions of Server-Side NuGet Packages: Microsoft.AspNetCore.SignalR version 1.0.0-alpha2-final
• Versions of Client-Side NuGet/NPM Packages: "@aspnet/signalr": "^1.0.0-preview1-update1"
• Are you using the C# client or the JavaScript client: JS client
• The Server you are using (Kestrel/HttpSysServer/IIS/IIS Express/Azure Web App/etc.): IIS Express 10
• The Operating System on the Server (Windows/Linux/macOS): Windows 7 x64
• The Operating System on the Client (Windows/Linux/macOS): Windows 7 x64
• The Browser on the client, if using the JavaScript client (IE/Chrome/Edge/Firefox/etc.): Chrome 65
• If possible, please collect Network Traces and attach them (please do not post them inline, use a service like Gist to upload them and link them in the issue)
  • For either client you can use a tool such as Fiddler for this
  • Many browsers allow you to capture Network Traces from their Dev Tools. See sample instructions for Chrome: https://support.zendesk.com/hc/en-us/articles/204410413-Generating-a-HAR-file-for-troubleshooting
• If possible, please collect logs from the client:
  • Set the logger option on your HubConnection to LogLevel.Trace and find the logs in the Console tab of your Browser Dev Tools
  • Example: new signalR.HubConnection(url, { logger: signalR.LogLevel.Trace })
• If possible, please collect logs from the server:
  • When using Kestrel/HttpSysServer, these are available on the Console by default
  • When using IIS/IIS Express, these are available in Visual Studio in the "ASP.NET Core Web Server" section of the Output Window
  • See https://docs.microsoft.com/en-us/aspnet/core/fundamentals/logging/?tabs=aspnetcore2x for more information

Request URL: ws://localhost:4200/sockjs-node/023/12jswgxc/websocket
Request Method: GET
Status Code: 101 Switching Protocols

Request URL: http://localhost:60431/chat/negotiate
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:60431
Referrer Policy: no-referrer-when-downgrade

Request URL: http://localhost:60431/chat/negotiate
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:60431
Referrer Policy: no-referrer-when-downgrade
(this request returns an invalid JSON response (some default string on invalid route) and the client crushes with Error:

Failed to start the connection. SyntaxError: Unexpected token H in JSON at position 0

)

Request URL: http://localhost:4200/sockjs-node/info?t=1522913376070
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:4200
Referrer Policy: no-referrer-when-downgrade

[analogrelay]

Versions of Server-Side NuGet Packages: Microsoft.AspNetCore.SignalR version 1.0.0-alpha2-final
Versions of Client-Side NuGet/NPM Packages: "@aspnet/signalr": "^1.0.0-preview1-update1"

These versions are not compatible. Please update your server to 1.0.0-preview1-final and see if the issue reproduces there.

[Alexei000]

Indeed, that was the issue. I have also noticed that on the client side@aspnet/signalr@latest means ^1.0.0-preview1-update1 instead of ^1.0.0-preview1-final. However, both versions seem to work just fine for my simple scenario.

[mikaelm12]

Glad it worked. Gonna close this as resolved.

[analogrelay]

@Alexei000 yes, that is correct. 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.