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

Question

我正在尝试使用 .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("$$@#$@#$%@#$%@#$%@@#$@#$#$%@#%$@#$%");

    });
  }
}

我调用了集线器服务函数来启动我的 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();
            });

Answer 1

self-hosting 的一个方面虽然不那么透明或记录，但运行 SSL 下的 self-hosted SignalR 服务。 Windows 证书存储和证书的创建、配置和安装仍然很痛苦，因为 Windows 中没有 UI 为证书提供 linking 端点，并且过程是没有很好的端到端记录。

我认为这个 link 会有所帮助

Hosting SignalR under SSL

无法启动连接：错误并且无法加载资源：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

asp.net-core

aspnetboilerplate

angular

abp