Интеграция приложения Angular 4+ с ASP.NET Core SignalR

Я пытаюсь интегрировать Angular 4 + SPA с ASP.NET Core SignalR, начиная с это руководство.

Мне удалось интегрировать с помощью простого веб-приложения (клиент jquery + signalR) с приложением ASP.NET Core, поэтому конфигурация на стороне сервера кажется нормальной.

ASP.NET Core

Microsoft.AspNetCore.SignalR версии 1.0.0-alpha2-final

Startup.cs

app.UseSignalR(routes =>
{
    routes.MapHub<ChatHub>("chat");
});

ChatHub.cs

public class ChatHub: Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.InvokeAsync("broadcastMessage", name, message + " from SignalR hub");
    }

    public override Task OnConnectedAsync()
    {
        Clients.All.InvokeAsync("broadcastMessage", "system", $"{Context.ConnectionId} joined the conversation");
        return base.OnConnectedAsync();
    }

    public override Task OnDisconnectedAsync(System.Exception exception)
    {
        Clients.All.InvokeAsync("broadcastMessage", "system", $"{Context.ConnectionId} left the conversation");
        return base.OnDisconnectedAsync(exception);
    }
}

Рабочий клиент

Я ссылаюсь на signalr-client-1.0.0-alpha2-final.js

// Web sockets do not work, most probably due to IIS Express I am using for testing
var transport = signalR.TransportType.LongPolling;
var connection = new signalR.HubConnection(`http://localhost:60431/chat`, { transport: transport });

connection.start();

Это прекрасно работает.

Клиент Angular 4+ (не работает)

import { Component, OnInit } from '@angular/core';
import * as signalR from '@aspnet/signalr';

export class SignalrTestComponent implements OnInit {

  private hubConnection: signalR.HubConnection;

  ngOnInit() {
    let transportType = signalR.TransportType.LongPolling;
    this.hubConnection = new signalR.HubConnection('http://localhost:60431/chat', { transport: transportType });

    this.hubConnection.start()
      .then(() => {
        console.log('Hub connection started')
      })
      .catch(() => {
        console.log('Error while establishing connection')
      });
  }

Я получаю сообщение «Ошибка при установке соединения». Ошибка связана с тем, что клиент пытается связаться с http://localhost:60431/chat/negotiate, который возвращает неправильный ответ (какой-то фиктивный текст, связанный с неправильным маршрутом, вместо ожидаемого JSON).

Я предполагаю, что параметр transport игнорируется и, таким образом, инициируется согласование. Однако согласование AFAIK больше не поддерживается в версии SignalR для ASP.NET Core.

package.json, возможно, соответствующие зависимости

"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@aspnet/signalr": "^1.0.0-preview1-update1",

Вопрос: Как я могу правильно настроить HubConnection для включения желаемого протокола при использовании клиента Angular2 +?


person Alexei - check Codidact    schedule 04.04.2018    source источник
comment
Может быть, у вас есть Chat Controller с маршрутом к /Chat? Если нет, можете ли вы изменить свой маршрут на routes.MapHub<ChatHub>("/chat"); //Notice the / <-- forward slash   -  person penleychan    schedule 04.04.2018
comment
@ 12seconds - приложение ASP.NET Core не содержит настраиваемых контроллеров, и у меня есть только этот маршрут. В рабочем тесте используется signalr-client-1.0.0-alpha2-final.js, и я чувствую проблему с @aspnet/signalr": "^1.0.0-preview1-update1 зависимостью. Постараюсь работать предыдущей версией (alpha2) вместо preview1.   -  person Alexei - check Codidact    schedule 04.04.2018
comment
@ 12seconds - http://localhost:60431/chat разрешен правильно, и я получаю сообщение об ошибке http://localhost:60431/chat, что является нормальным (клиент должен предоставить идентификатор соединения).   -  person Alexei - check Codidact    schedule 04.04.2018
comment
Я голосую за то, чтобы закрыть этот вопрос как не по теме, потому что этот вопрос был вызван проблемой на основе альфа-версии, которая больше не может быть воспроизведена, и решена простым обновлением до предварительной версии. С тех пор была выпущена стабильная версия. Хотя подобные вопросы могут быть здесь по теме, этот был решен способом, который вряд ли поможет будущим читателям.   -  person aaron    schedule 15.08.2018


Ответы (2)


Хорошо, я получил помощь по разделу проекта github. Моя серверная (ASP.NET Core SignalR) версия не обновлялась, и поэтому у меня были проблемы:

  1. Обновлен до 1.0.0-preview1-final

  2. Изменен серверный код для адаптации к более новой версии (т.е. исправлены ошибки компиляции):

    public class ChatHub: Hub
    {
        public void Send(string message)
        {
             // Call the broadcastMessage method to update clients.
             Clients.All.SendAsync("broadcastMessage", message + " from SignalR hub");
        }
     }
    

В качестве побочного примечания, @latest версия пакета на стороне клиента не совсем такая, как на стороне сервера:

Когда был выпущен preview1, в клиенте JavaScript была небольшая проблема, и его нужно было обновить, поэтому последняя версия клиента JavaScript - 1.0.0-preview1-update1, а сервер - 1.0.0-preview1-final. Эти версии полностью совместимы.

person Alexei - check Codidact    schedule 06.04.2018
comment
Могу ли я узнать, с какой ошибкой вы столкнулись перед обновлением signalr? Не удалось запустить соединение: TypeError: Не удается прочитать свойство «длина» неопределенного значения? - person timblistic; 23.07.2018
comment
@ArulManivannan - 'Ошибка при установлении соединения (на стороне клиента) была ошибкой. У меня не было времени следить за этим, но теперь кажется, что они наконец выпустили [стабильную версию @ aspnet / signalr] (npmjs.com/package/@aspnet/signalr). - person Alexei - check Codidact; 23.07.2018

Вместо this.hubConnection.start() в новых @aspnet/signalr документах говорится, что нужно использовать следующее ...

const url = 'http://www.something.com';

this.hubConnection = new signalR.HubConnectionBuilder()
  .withUrl(url)
  .build();

Документы все еще очень дрянные, но они работают в моем проекте, надеюсь, это поможет.

person Joshua Michael Waggoner    schedule 03.07.2018
comment
Да, документы бесполезны, получена ошибка, не удалось установить соединение: TypeError: невозможно прочитать свойство «length», равное undefined. Вы преодолели что-нибудь? - person timblistic; 23.07.2018