Issue in Transport.js with WebSocket.OPEN readyState

[chinookproject]

I have a strange issue when trying to connect to my hub in JS code. I have the following code (Angular project):

    ngOnInit() {
        this.hubConnection = new HubConnection('/support', { transport: TransportType.WebSockets, logging: LogLevel.Information });

        this.hubConnection.on("Say", (message: any) => {
            console.log('message:', message);
        });

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

But whenever I launch the web page I get the following error back in console:

Error while establishing connection: WebSocket is not in the OPEN state

After some debugging in both my JS code en C# code I decided to check what was going on in Transport.js. The file that throws the above error. By default it does this:

send(data) {
    if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
         // left out some code here....
    }
    return Promise.reject("WebSocket is not in the OPEN state");
}

When I added a few console.log lines, then I get the following, with output:

    send(data) {
		console.log('this.webSocket', this.webSocket); //output: WebSocket {__zone_symbol__eventTasks: Array... (prints the websocket object)
		console.log('this.webSocket.readyState', this.webSocket.readyState); //output: 1
		console.log('WebSocket.CONNECTING', this.webSocket.readyState == WebSocket.CONNECTING); //output: false
		console.log('WebSocket.OPEN', this.webSocket.readyState == WebSocket.OPEN); //output: false
		console.log('WebSocket.CLOSING', this.webSocket.readyState == WebSocket.CLOSING); //output: false
		console.log('WebSocket.CLOSED', this.webSocket.readyState == WebSocket.CLOSED) //output: false;
        if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
            this.webSocket.send(data);
            return Promise.resolve();
        }
        return Promise.reject("WebSocket is not in the OPEN state");
    }

So as you can see this.webSocket.readyState outputs 1, which should be equal to: WebSocket.OPEN. But for some reason its not.

When I change the if statement to match against just 1, then it all works fine. Then I can send data to the C# code without any problems.

(changed if statement)

if (this.webSocket && this.webSocket.readyState === 1) {

Any idea what the issue could be? Is it me, or is the code in Transport.js not right?

Additional info:

Nuget:

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-alpha2-27280" />
  </ItemGroup>

NPM:
"@aspnet/signalr-client": "^1.0.0-alpha2-final"

Browser chrome

Google Chrome is up-to-date
Version 61.0.3163.100

[moozzyk]

Do you know if your application is using WebSockets provided by the browser? What I found for instance is that angular-cli may polyfill XmlHttpRequest which can cause issues, so I am wondering if something similar is happening here. Can you provide a repro for investigation?

[chinookproject]

At first I tried to setup a new Angular .net Core project with only SignalR added to it, But to my surprise that worked perfectly.

So the only other issue that was left was, like you said, some sort of a polyfill causing this.

In my original project I added a template that comes with all sorts of JS plugins, including PACE.js (it's globally included). That was the library that was causing the issue.

I've added the following code before I load pace.js:

        window.paceOptions = {
            ajax: false,
            restartOnRequestAfter: false,
        };

source: CodeByZach/pace#305

And it now works fine. So this wasn't an issue with SignalR after all.

Thanks for the prompt response and pointing me in the right direction!

[MohamedChaabouni]

@chinookproject you saved my day THANKS ! 💃

[bigo92]

@chinookproject
Thank you! im fixed done. siglar using angular 4 call dot net core 2.0 successfull

• Remove pace.js ^^

[Kevin-Deason]

Had the same issue, removing pace.js solved the problem

[jbomhold3]

Same issue, removing pace.js solved.

[boubaker-chieb]

So if removing pacejs solves the problem, so what to do if we want to use it ?? -_-

[MattJeanes]

@BoubakrEchieb Try this:

Pace.start({
    ajax: {
        trackWebSockets: false,
        ignoreURLs: ["browserLink", "socket.io", "hub"],
        trackMethods: ["GET", "POST"],
    },
    restartOnRequestAfter: false,
});

This assumes your hub endpoints are /hub/*

Worked for me with browserlink and socket.io (feel free to remove those)

[dnlsilva]

At first I tried to setup a new Angular .net Core project with only SignalR added to it, But to my surprise that worked perfectly.

So the only other issue that was left was, like you said, some sort of a polyfill causing this.

In my original project I added a template that comes with all sorts of JS plugins, including PACE.js (it's globally included). That was the library that was causing the issue.

I've added the following code before I load pace.js:

        window.paceOptions = {
            ajax: false,
            restartOnRequestAfter: false,
        };

source: HubSpot/pace#305

And it now works fine. So this wasn't an issue with SignalR after all.

Thanks for the prompt response and pointing me in the right direction!

I love you man!!!
tks