Подключение к концентратору SignalR с помощью JavaScript: пошаговое руководство

SignalR — это мощная библиотека для создания веб-приложений в реальном времени. Это позволяет легко добавлять в приложение функции реального времени, такие как чат, уведомления и оперативные обновления. В этом руководстве вы узнаете, как настроить концентратор SignalR и подключиться к нему с помощью JavaScript.

Шаг 1. Создайте новое основное веб-приложение ASP.NET.

Первым шагом является создание хаба. Концентратор — это класс, который действует как мост между клиентом и сервером. Он позволяет вызывать методы на сервере с клиента и наоборот.

Во-первых, нам нужно создать новое основное веб-приложение ASP.NET. Откройте Visual Studio и выберите «Создать новый проект». Выберите шаблон «ASP.NET Core Web Application» и назовите свой проект. В этом уроке мы назовем его «SignalRHub».

Шаг 2. Установите пакет SignalR

Далее нам нужно установить пакет SignalR. Откройте «Консоль диспетчера пакетов» и выполните следующую команду:

Install-Package Microsoft.AspNetCore.SignalR

Шаг 3. Создайте концентратор SignalR

Теперь давайте создадим концентратор SignalR. В проекте «SignalRHub» создайте новую папку «Hubs» и добавьте в нее новый класс «ChatHub». Этот класс будет наследоваться от «Hub».

using Microsoft.AspNetCore.SignalR;

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

В этом примере мы создаем простое приложение для чата. Метод «SendMessage» вызывается, когда клиент отправляет сообщение, и он отправляет сообщение всем клиентам, подключенным к хабу, используя свойство «Clients.All».

Шаг 4. Настройте концентратор SignalR

Далее нам нужно настроить концентратор SignalR в классе «Автозагрузка». В методе «ConfigureServices» добавьте следующую строку:

services.AddSignalR();

В методе «Настроить» добавьте следующую строку:

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<ChatHub>("/chat");
});

Это сопоставит «ChatHub» с конечной точкой «/chat».

Шаг 5. Подключитесь к концентратору SignalR с помощью JavaScript

Наконец, мы можем подключиться к концентратору SignalR с помощью JavaScript. В вашем HTML-файле добавьте следующий скрипт в раздел head:

Это загрузит библиотеку JavaScript SignalR. Затем добавьте следующий скрипт для подключения к хабу:

<script>
    var connection = new signalR.HubConnectionBuilder()
        .withUrl("/chat")
        .build();

    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&>");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });

    connection.start().catch(function (err) {
        return console.error(err.toString());
    });

    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
</script>

Этот скрипт создает новое подключение к концентратору, используя класс «HubConnectionBuilder» и конечную точку «/chat». Метод on используется для прослушивания сообщений от хаба. В этом примере мы прослушиваем событие «ReceiveMessage» и добавляем сообщение в список в HTML. Для запуска соединения используется метод start.

Метод catch используется для обработки любых ошибок, которые могут возникнуть при подключении или отправке сообщения.

Сценарий также добавляет прослушиватель событий к элементу «sendButton», который используется для отправки сообщения в хаб. Метод «invoke» используется для вызова метода «SendMessage» в концентраторе, передавая пользователя и сообщение.

В HTML вы можете добавить форму для получения пользователя и сообщения, а также неупорядоченный список для отображения сообщений.

<form>
    <label for="userInput">User:</label>
    <input type="text" id="userInput" />
    <br />
    <label for="messageInput">Message:</label>
    <input type="text" id="messageInput" />
    <br />
    <button type="submit" id="sendButton">Send</button>
</form>
<ul id="messagesList"></ul>

Это простой пример того, как подключиться к концентратору SignalR с помощью JavaScript. Вы можете настроить его в соответствии с вашими потребностями и добавить дополнительные функции по мере необходимости.

Я надеюсь, что это руководство поможет вам понять, как подключиться к концентратору SignalR с помощью JavaScript. Это мощная библиотека, которая может легко добавить функциональность в реальном времени в ваше приложение, и она поддерживается .NET Core, что делает ее отличным выбором для веб-разработчиков.

Первоначально опубликовано на https://jamilhallal.blogspot.com 16 января 2023 г.