Angular: невозможно передать URL API в SignalR HubConnection - PullRequest
Новая
       25

Angular: невозможно передать URL API в SignalR HubConnection

0 голосов
/ 30 июня 2018

Я разработал проект на Angular6. Требуется разработать раздел для живого чата. Для этого я использую SignalR в своем ядре asp.net Web Apiproject. Теперь я хочу использовать эту ссылку Web Api в своем проекте Angular.

Я использую эту ссылку.

Но при предоставлении URL-адреса Web Api в App.Component.ts я получаю сообщение об ошибке ниже:

Конструктор класса 'HubConnection' является закрытым и доступен только в объявлении класса.

App Component.ts: 

import { HubConnection } from '@aspnet/signalr';
import { Message } from 'primeng/api';

export class AppComponent implements OnInit {
  public _hubConnection: HubConnection;
  msgs: Message[] = [];
  constructor() {   
  }
  ngOnInit() {
    this._hubConnection = new HubConnection('http://localhost:1874/notify'); // getting error on this line.

Редактировать : пробовал ниже код: -

Модифицированный App.Component.ts: 

import { HubConnection } from '@aspnet/signalr';
import * as signalR from '@aspnet/signalr';
import { Message } from 'primeng/api';

export class AppComponent implements OnInit {
  public _hubConnection: HubConnection;
  msgs: Message[] = [];
  constructor() {   
  }
  ngOnInit() {       
    this._hubConnection = new signalR.HubConnectionBuilder()
          .withUrl('http://localhost:1874/notify')
          .configureLogging(signalR.LogLevel.Information)
          .build();

Ошибка:

Не удалось загрузить http://localhost:1874/notify/negotiate: Ответ на предполетный запрос не проходит проверку контроля доступа: значение Заголовок «Access-Control-Allow-Credentials» в ответе «», который должен иметь значение «истина», если режим учетных данных запроса «включить». Origin 'http://localhost:4200' поэтому не допускается. режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Ответы [ 3 ]

0 голосов
/ 11 июля 2018

Попробуй вот так, 

 private hubConnection: signalr.HubConnection;    
 message: string;
 ngOnInit() {
    this.hubConnection = new signalr.HubConnection('');

    this.hubConnection
      .start()
      .then(() => {
        console.log('Connection started!');
        this.hubConnection.on('ReceiveMessage', (message) => { 
          alert(message);
        });
      })
      .catch(err => console.log('Error while establishing connection :('));

  }
0 голосов
/ 13 августа 2018

Они изменили конструкторы для SignalR Client HubConnection, чтобы больше не позволять вам передавать маршрут в конструкторе клиента, и сделали конструктор HubConnection закрытым, чтобы применить изменение. Вместо этого вам нужно использовать HubConnectionBuilder следующим образом:

new HubConnectionBuilder().withUrl("/YOURROUTEHERE").build();

Вы захотите импортировать HubConnectionBuilder в свой заголовок следующим образом:

import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';

В случае, если это поможет, я также только что опубликовал обновление своих образцов RxSignalR для @ aspnet / signalr 1.0.2, RxJs 5.5.6 и Angular 6. Посмотрите на компонент ReactiveChat для примера.

0 голосов
/ 01 июля 2018

В коде вашего сервера вы используете CORS? 

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddCors(options => options.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyMethod()
               .AllowAnyHeader()
               .WithOrigins("http://localhost:4200")
               .AllowCredentials();
    }));

    ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...

    app.UseCors("CorsPolicy");

    app.UseSignalR(routes =>
    {
        // your routes
    });

    ...
}
...