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

【问题标题】：Failed to start the connection: Error And Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR in SignalR无法启动连接：错误并且无法加载资源：SignalR 中的 net::ERR_SSL_PROTOCOL_ERROR
【发布时间】：2021-01-18 16:39:42
【问题描述】：

我正在尝试使用 .NET Core 和 Angular 在 SignalR 上应用 this example，并且我使用了 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("$$@#$@#$%@#$%@#$%@@#$@#$#$%@#%$@#$%");

    });
  }
}

我已经调用 Hub 服务函数来启动我的 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();
            });

【问题讨论】：

标签： angular asp.net-core signalr aspnetboilerplate abp

【解决方案1】：

自托管的一个方面虽然不是那么透明或记录在案，但在 SSL 下运行自托管 SignalR 服务。 Windows 证书存储以及证书的创建、配置和安装仍然很麻烦，因为 Windows 中没有提供将端点链接到证书的 UI，而且该过程没有很好的端到端记录。

我认为这个链接会有所帮助

Hosting SignalR under SSL

【讨论】：