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?

Could there be a possibility you have a Chat Controller with route to /Chat? If not, can you change your route to routes.MapHub<ChatHub>("/chat"); //Notice the / <-- forward slash — penleychan
– penleychan, Commented Apr 4, 2018 at 16:48
@12seconds - the ASP.NET Core application contains no custom controllers and I have only this route. The working test uses signalr-client-1.0.0-alpha2-final.js and I sense an issue with @aspnet/signalr": "^1.0.0-preview1-update1 dependency. I will try to work the previous version (alpha2) instead of preview1. — Alexei - check Codidact
– Alexei - check Codidact, Commented Apr 4, 2018 at 19:21
@12seconds - http://localhost:60431/chat is resolved correctly and I receive the error http://localhost:60431/chat which is normal (the client must provide a connection id). — Alexei - check Codidact
– Alexei - check Codidact, Commented Apr 4, 2018 at 19:22
I'm voting to close this question as off-topic because this question was caused by a problem based on an alpha version that can no longer be reproduced — and solved by a simple upgrade to a preview version. A stable version has since been released. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. — aaron
– aaron, Commented Aug 15, 2018 at 5:53

Alexei - check Codidact · Accepted Answer · 2018-04-06 15:52:06Z

0

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:

Upgraded to 1.0.0-preview1-final

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.

answered Apr 6, 2018 at 15:52

Alexei - check Codidact

23.2k22 gold badges159 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

timblistic Over a year ago

May i know what error you experienced before updating signalr? is it "Failed to start the connection: TypeError: Cannot read property 'length' of undefined"?

Alexei - check Codidact Over a year ago

@ArulManivannan - "'Error while establishing connection" (on the client side) was the error. I did not have time to follow on this, but now it seems that they have finally released [a stable version of @aspnet/signalr]( npmjs.com/package/@aspnet/signalr).

Joshua Michael Calafell · Accepted Answer · 2018-08-11 23:15:53Z

0

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.

edited Aug 11, 2018 at 23:15

answered Jul 3, 2018 at 13:35

Joshua Michael Calafell

3,1371 gold badge39 silver badges47 bronze badges

1 Comment

timblistic Over a year ago

Yes docs are not useful, received an error, Failed to start the connection: TypeError: Cannot read property 'length' of undefined. Did u overcome any?

Collectives™ on Stack Overflow

Integrate Angular 4+ application with ASP.NET Core SignalR

ASP.NET Core

Working client

Angular 4+ client (non working)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

ASP.NET Core

Working client

Angular 4+ client (non working)

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related