signalr with .net core 2.0

Question

I'm trying to use SignalR with core 2.0. If I set transport to LongPolling it works, but I get warnings about timeouts. I'm trying to use it with WebSockets, but I get

WebSocket is not in the OPEN state

I checked lots of similar questions, in most of them it's due to system restrictions, but I'm using Windows 10 and Chrome v.67. I think the problem is in Startup.cs:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("CorsPolicy");
    app.UseSignalR(routes =>
    {
        routes.MapHub<NotifyHub>("/notify");
    });
}

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyMethod()
               .AllowAnyHeader()
               .WithOrigins("http://localhost:52170/");
    }));
    services.AddSignalR();
}

Front(TypeScript):

ngOnInit() {
        let builder = new HubConnectionBuilder();
        this.hubConnection = builder.withUrl("http://localhost:52170/notify", HttpTransportType.WebSockets).build();//'http://localhost:1874/notify').build();
        this.hubConnection.serverTimeoutInMilliseconds = 5000;
        this.hubConnection
            .start()
            .then(() => console.log('Connection started!'))
            .catch(err => console.log(err)); //'Error while establishing connection :('));
        console.log(this.hubConnection);
        this.hubConnection.onclose = e => {
            this.hubConnection.start();
        }
   }

I get these two messages from browser:

Information: WebSocket connected to ws://localhost:52170/notify?id=SJ4cb49oWZtL6lIt4cqhKg WebSocket is not in the OPEN state

Answer 1

@Jamil, best on your code i have created on project and it is working. Can you provide more details or compare with below code. Let me also know if there is any different.

-- In Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();

    //DKS: Makes the SignalR services available to the dependency injection system. 
    services.AddCors(options => options.AddPolicy("CorsPolicy",
    builder =>
    {
        builder.AllowAnyMethod().AllowAnyHeader()
               .WithOrigins("http://localhost:53249")
               .AllowCredentials();
    }));

    services.AddSignalR();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
        {
            HotModuleReplacement = true
        });
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseStaticFiles();

    app.UseCors("CorsPolicy");
    app.UseSignalR(routes =>
    {
        routes.MapHub<ChatHub>("/chatHub");
    });

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}
}
}

--- home.component

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

@Component({
    selector: 'app-home-component',
    templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
    private _hubConnection: HubConnection | undefined;
    public async: any;
    message = '';
    messages: string[] = [];

    constructor() {
    }

    public sendMessage(): void {
        const data = `Sent by you: ${this.message}`;

        if (this._hubConnection) {
            this._hubConnection.invoke('SendAngular', data);
        }

        this.messages.push(data);
    }
    ngOnInit() {
        let builder = new signalR.HubConnectionBuilder();
        this._hubConnection = builder.withUrl("http://localhost:53249/chatHub", signalR.HttpTransportType.WebSockets).build();//'http://localhost:1874/notify').build();
        this._hubConnection.serverTimeoutInMilliseconds = 9999999999999;
        this._hubConnection
            .start()
            .then(() => console.log('Connection started!'))
            .catch(err => console.log(err)); //'Error while establishing connection :('));
        console.log(this._hubConnection);

        this._hubConnection.on('Send', (data: any) => {
            const received = `Received by Friend: ${data}`;
            this.messages.push(received);
        });

        //this._hubConnection.onclose = e => {
        //    this._hubConnection.start();
        //}

    }
}

---

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SignalRExample.Hubs
{
    public class ChatHub : Hub
    {
        public Task SendAngular(string data)
        {
            return Clients.All.SendAsync("Send", data);
        }
    }
}

Answer 2

comment this line "this.hubConnection.serverTimeoutInMilliseconds = 5000;" and check again.

serverTimeoutInMilliseconds is too small.