SignalR в Angular 7 и ASP.Net MVC

Question

Я хочу использовать SignalR 2 в своем угловом приложении в качестве клиента и ASP.Net MVC в качестве бэкэнда.
Я установил Microsoft.AspNet.SignalR и Microsoft.Owin и добавил startup.cs и ChatHub.cs следующим образом:

startup.cs

[assembly: OwinStartup(typeof(MyMvcApp.Startup))]
namespace MyMvcApp
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

ChatHub.cs

namespace MyMvcApp.Hubs
{
    public class ChatHub : Hub
    {
        public void Send(string user, string message)
        {
            Clients.All.SendMessage(message);
        }
    }
}

в моем угловом приложении я установил signalr npm и включил сигнализатор в angular.json :

"scripts": [
   "node_modules/signalr/jquery.signalR.js"
]

и используется в SignalRService :

start() {
    $.connection('http://localhost/hubs').start();
}

но я получаю эту ошибку в консоли браузера: http://localhost/hubs/negotiate?clientProtocol=2.1&_=1557811289416
Как я могу это исправить?

Answer 1

Ваш код должен быть таким:

Вам необходимо определить концентратор, например

    public class MyHub : Hub
    {
        public void HelloServer()
        {
            Clients.All.hello("Hello message to all clients");
        }
    }

и ваш код на стороне клиента

(function () {
    // Defining a connection to the server hub.
    var myHub = $.connection.myHub;
    // Setting logging to true so that we can see whats happening in the browser console log. [OPTIONAL]
    $.connection.hub.logging = true;
    // Start the hub
    $.connection.hub.start();

    // This is the client method which is being called inside the MyHub constructor method every 3 seconds
    myHub.client.SendServerTime = function (serverTime) {
        // Set the received serverTime in the span to show in browser
        $("#newTime").text(serverTime);
    };

    // Client method to broadcast the message
    myHub.client.hello = function (message) {
        $("#message").text(message);
    };

    //Button click jquery handler
    $("#btnClick").click(function () {
        // Call SignalR hub method
        myHub.server.helloServer();
    });
}()); 

Полный учебник можно найти здесь Но так как вы используете angular 7, почему вы используете новую версию SignalR?

Альтернативное решение с использованием aspnet / signal, но для ядра asp.net.Настроить что-то вроде этого очень просто

Сначала создать концентратор

public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }

Зарегистрироваться в DI-контейнере

public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseSignalR(routes =>
            {
                routes.MapHub<ChatHub>("/chatHub");
            });
        }

Затем запустить его под углом, например

import * as signalR from "@aspnet/signalr";

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub")
    .build();

connection.start().catch(err => document.write(err));

connection.on("messageReceived", (username: string, message: string) => {
    let m = document.createElement("div");

    m.innerHTML =
        `<div class="message-author">${username}</div><div>${message}</div>`;

    divMessages.appendChild(m);
    divMessages.scrollTop = divMessages.scrollHeight;
});

Пример можно найти здесь и здесь

Надеюсь, это поможет.Пожалуйста, дайте мне знать, если у вас есть какие-либо проблемы

Answer 2

Я использовал неправильный URL. моя вина !!! Я должен был использовать $.connection('http://localhost/signalr').start(); вместо $.connection('http://localhost/hubs').start();

Answer 3

проверьте ваш код, если используется «jsonp: true».Если да, то проверьте, включен он в конфигурации концентратора или нет.Пожалуйста, перейдите по ссылке ниже.

https://www.roelvanlisdonk.nl/2013/09/10/asp-net-signalr-self-hosting-fixing-the-error-xmlhttprequest-cannot-load-httplocalhost8080signalrnegotiate-origin-httplocalhost52947-is-not-allowed-by-access-control-allow-origin/