Angular 6 SignalR gives "WebSocket is not in the OPEN state" on start connection

Question

I have installed @aspnet/signalr in my Angular 6 project

I tried all the other options found in stack-over flow for the signalr issue. Below is my service code:

import { Injectable } from '@angular/core';
import * as signalR from "@aspnet/signalr";
import { UserService } from 'app/@core/data/users.service';

@Injectable()
export class SignalRService {

  private url = baseurl+'&users='
  public data;

  private hubConnection: signalR.HubConnection;

  constructor(private user: UserService) { }

  public startConnection = () => {
    let loggedInuser = this.user.getUserEmail();
    let accessToken ="some token";
    var options = {
      transport: signalR.HttpTransportType.WebSockets,
      logging: signalR.LogLevel.Trace,
    accessTokenFactory: () => accessToken
  };

    this.hubConnection = new signalR.HubConnectionBuilder()
                            .withUrl(this.url + loggedInuser , options)
                            .build();
    this.hubConnection.serverTimeoutInMilliseconds = 9999999999999;
    this.hubConnection
      .start()
      .then(() => console.log('Connection started'))
      .catch(err => {
        console.log('url: ' + this.url + loggedInuser)
        console.log('Error while starting connection: ', err)
      })
  }

  public addTransferChartDataListener = () => {
    this.hubConnection.on('AppNotifications', (data) => {
      this.data = data;
      console.log(data);
    });
  }
}

When I run the ngOninit() of notification component, I get "Websocket is not in OPEN state" message in console. Where is that I'm doing wrong?

Example I followed to implement this is https://code-maze.com/netcore-signalr-angular/

Here's a good example to get you started: https://code-maze.com/netcore-signalr-angular/ — Latin Warrior, Feb 19 '19 at 15:01
This is the same example I followed to implement this. But encountered "Websocket is not in the OPEN state" issue — Anish K Pillai, Feb 20 '19 at 03:58

score 4 · Accepted Answer · answered Feb 20 '19 at 12:28

Changed transport from 'WebSockets' to 'ServerSentEvents' and moved hubConnection.on just ahead of hubConnection.start() So, this is my final code in working condition

import { Injectable } from '@angular/core';
import * as signalR from "@aspnet/signalr";
import { UserService } from 'app/@core/data/users.service';

@Injectable()
export class SignalRService {

    private url = baseurl + '&users='
    public data;

    private hubConnection: signalR.HubConnection;

    constructor(private user: UserService) { }

    public startConnection = () => {
        let loggedInuser = this.user.getUserEmail();
        let accessToken = "some token";
        var options = {
            transport: signalR.HttpTransportType.ServerSentEvents,
            logging: signalR.LogLevel.Trace,
            accessTokenFactory: () => accessToken
        };

        this.hubConnection = new signalR.HubConnectionBuilder()
            .withUrl(this.url + loggedInuser, options)
            .build();
        this.hubConnection.serverTimeoutInMilliseconds = 9999999999999;
        this.hubConnection.on('AppNotifications', (data: string) => {
            this.data = data;
            console.log('AppNotifications data');
            console.log(data);
        });

        this.hubConnection
            .start()
            .then(() => console.log('Connection started'))
            .catch(err => {
                console.log('Error while starting connection: ', err)
            })
    }

    public addTransferChartDataListener = () => {
        // this.hubConnection.on('AppNotifications', (data) => {
        //     this.data = data;
        //     console.log(data);
        // });
    }
}

Angular 6 SignalR gives "WebSocket is not in the OPEN state" on start connection

1 Answers1