Люди хотели бы получать обновления в реальном времени после выполнения какой-либо задачи. Иметь веб-приложение с функциями реального времени просто ОТЛИЧНО!

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

Примеры обновлений в реальном времени?

Лучший пример, который я могу привести, — это система чата Facebook. Вы открываете окно чата, вводите текст и нажимаете Enter. После того, как другой человек нажмет ответ, вы сразу же получите сообщение без необходимости обновлять страницу. Это в реальном времени.

Другой пример, который я могу привести, снова связан с Facebook. Когда ваш друг прокомментировал вашу публикацию, вы получите уведомление в режиме реального времени.

Такие вещи — отличные функции, которые следует учитывать при создании вашего продукта. Давайте вместе создадим веб-приложение в реальном времени, чтобы вы узнали об этом.

Давайте начнем

Я создал простое веб-приложение в React и Visual Studio, которое представляет собой окно чата.

Когда вы вводите сообщение и нажимаете Enter, ваше сообщение должно быть отправлено всем пользователям в списке, а также должно отображаться в правой области сообщений. Давайте применим для этого магию.

Установка необходимых компонентов

Microsoft.AspNetCore.SignalR — пакет Nuget
@aspnet/signalr — пакет npm

После этого я открываю свой файл Startup.cs, чтобы сообщить проекту, что мы собираемся использовать signalR. Внутри ConfigureServices() я добавляю следующую строку кода:

Сделанный! Прежде чем использовать signalR, нам нужно иметь какой-то файл класса, который действует как концентратор. Я объясню это через некоторое время, а пока давайте создадим и этот файл.

Я создаю класс с именем Chathub.cs и наследую его от родительского класса Hub (который исходит из установленного нами пакета). Это мой класс концентратора:

Класс Hub работает как промежуточное ПО. Когда пользователь вызывает эту функцию, он получает имя пользователя и сообщение и пересылает сообщение всем другим пользователям.

Теперь, когда у нас есть класс концентратора, мы можем использовать signalR. Итак, я снова открываю файл Startup.cs и добавляю следующие строки кода в функцию Configure():

Приведенный выше блок сообщает инструменту использовать наш вновь созданный класс в качестве класса-концентратора и прослушивать запросы, поступающие по указанному URL-адресу.

Это все, что касается нашего бэкенда. Теперь давайте напишем скрипт!.

Сначала сделаем импорт

импортировать * как signalR из ‘@aspnet/signalr’;

Теперь давайте определим подключение к серверному концентратору. Я набираю этот код:

const con = new signalR.HubConnectionBuilder().withUrl(‘/mychathubpath’).build();

Строка, которую мы только что набрали, создаст новый объект signalR и скажет отправлять запросы на указанный путь URL.

Затем я пишу приведенный ниже блок кода внутри моего конструктора класса. Что делает этот блок, так это то, что он сначала запускает соединение. и .on() очень важен. Внутри этого мы укажем, что делать, когда получим сообщение от других пользователей. Я просто добавляю имя пользователя и сообщение в правую часть этого раздела.

Затем я пишу эту функцию под названием invokeChat(), чтобы привязать ее к нажатию кнопки.

Приведенная выше функция вызовет метод в нашем хаб-классе и отправит имя пользователя и сообщение в качестве параметров.

Вау! Это все для этой истории, я думаю. Разве это не очень просто? Если вы все еще не понимаете, как все это работает, посмотрите на картинку ниже. В двух словах это сигнал R.

Предположим, что я пользователь, я набираю сообщение и нажимаю Enter. Это означает, что я вызываю метод invokeChat(). Затем через URL-адрес /mychathubpath сообщение попадет в функцию SendMessageAsync() хаб-класса. Эта функция будет асинхронно пересылать сообщение всем клиентам, у которых есть обработчик UpdateMessages. В этом обработчике имя пользователя и сообщение отображаются в правой части нашей страницы, и именно так пользователи получают обновления в реальном времени.

Время демонстрации!

Это все для этой истории. Я надеюсь, что вам понравилось. Однако, если вы хотите узнать о более сложном содержимом signalR, эта ссылка — отличный источник для этого.

Спасибо за прочтение, увидимся в другой истории :)