Failed to start the connection: Error And Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR in SignalR

Question

I'm trying to applay this example on SignalR with .NET Core and Angular and I used ABP Framework,

but when I start to run the example the browser console keeps show for me below Errors:

My code details :

Here is My Hub

public class HCHub : Hub
    {
    }

And below is my service that I want the hub connect with it and the user will hit on it

[AbpAuthorize]
   public class MyAppService : ApplicationService
   {
       private readonly IRepository<MyTable, long> _repository;
       private IHubContext<HCHub> _hub;

       public MyAppService(IRepository<MyTable, long> repository, IHubContext<HCHub> hub)
       {
           _repository = repository;
           _hub = hub;
       }



public async Task Get(long Id,long userRoleFlag)
       {
           try { 
           
           var data = await _repository.GetDbContext().Set<MyTable>()
               .Include(x=>x.list1)
               .ThenInclude(x=>x.list2)
               .ThenInclude(x=>x.message)
               ).ToListAsync();


           var BasicInfo = _hub.Clients.All.SendAsync("transferchartdata", data.Select(x => new MyDto
           {
               name1 = x.name1,
               Id1 = x.Id1,
               Id2 = x.Id2,
               PLACE = x.PLACE,
               Testvar = x.Testvar,
               ID4 = x.ID4,
               ERT = x.ERT
               , Count = x.Count
           }).OrderByDescending(x => x.Count).ToList());

           }
           catch (Exception ex)
           {
               new UserFriendlyException(ex.InnerException.Message.ToString());
                      }


       }
       }

I've create service as mentioned in the example

import { Injectable } from '@angular/core';
import * as signalR from "@aspnet/signalr";

@Injectable({
  providedIn: 'root'
})
export class SignalRService {

  listOfData:Array<any>=[];


private hubConnection: signalR.HubConnection

  public startConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
                            .withUrl('https://localhost:21021/hchub')
                            .build();

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

  public addTransferChartDataListener = () => {
    
    this.hubConnection.on('transferchartdata', (data) => {
     
      this.listOfData = data;
      console.log("$$@#$@#$%@#$%@#$@#$@#$%@#$%@#%$@#$%");
      console.log(data);
      console.log("$$@#$@#$%@#$%@#$%@@#$@#$#$%@#%$@#$%");

    });
  }
}

I've invoke the Hub Service function to start the connection inside my Angular component

async ngOnInit() {
  this.signalRService.startConnection();
  this.signalRService.addTransferChartDataListener();  
thisGet(this.gloabalPlace,this.gloabalId); // it is POST Http request
}

And I added below inside Configure function in Startup.cs

    app.UseEndpoints(endpoints =>
            {
                endpoints.MapHub<AbpCommonHub>("/signalr"); 
                endpoints.MapHub<MyChatHub>("/signalr-myChatHub");
                endpoints.MapHub<HCHub>("/hchub");
                endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
                endpoints.MapControllerRoute("defaultWithArea", "{area}/{controller=Home}/{action=Index}/{id?}");
            });

  app.UseCors(builder =>
            {
                builder.WithOrigins("http://localhost:4200")
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
            });

Answer 1

One aspect of self-hosting that's not quite so transparent or documented though, is running a self-hosted SignalR service under SSL. The Windows certificate store and creation, configuration, and installation of certificates is still a pain as there's no UI in Windows that provides linking endpoints to certificates and the process is not very well documented end to end.

I think this link would be helpful

Hosting SignalR under SSL