无法启动连接：错误并且无法加载资源：SignalR中的net :: ERR_SSL_PROTOCOL_ERROR

如何解决无法启动连接：错误并且无法加载资源：SignalR中的net :: ERR_SSL_PROTOCOL_ERROR

我正在尝试将this example应用于带有.NET Core和Angular的SignalR上，并且我使用了ABP框架，

但是当我开始运行该示例时，浏览器控制台会在错误下方始终为我显示：

我的代码详细信息：

这是我的中心

public class HCHub : Hub
    {
    }

下面是我要的服务，我希望集线器与其连接，用户会点击它

[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());
                      }


       }
       }

我已经创建了示例中提到的服务

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("$$@#$@#$%@#$%@#$%@@#$@#$#$%@#%$@#$%");

    });
  }
}

我已调用集线器服务功能以在Angular组件内部启动连接

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

然后我在Startup.cs的Configure函数下面添加了

    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();
            });

解决方法

自托管的一个方面（尽管不是很透明或没有记载）正在SSL下运行自托管SignalR服务。 Windows证书的存储，证书的创建，配置和安装仍然很麻烦，因为Windows中没有提供将端点链接到证书的UI，而且该过程的端到端记录也不够完善。

我认为此链接会有所帮助

Hosting SignalR under SSL