search

aspnet / SignalR

[Archived] Incredibly simple real-time web for ASP.NET Core. Project moved to https://github.com/aspnet/AspNetCore
Apache License 2.0
2.38k stars 446 forks source link

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

Closed Alexei000 closed 6 years ago

Alexei000 commented 6 years ago

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

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

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Glad it worked. Gonna close this as resolved.

analogrelay commented 6 years ago

@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.