Люди хотели бы получать обновления в реальном времени после выполнения какой-либо задачи. Иметь веб-приложение с функциями реального времени просто ОТЛИЧНО!
В этой статье я собираюсь показать вам, как добавить функцию реального времени для вашего веб-приложения. Инструмент, который я собираюсь использовать для этой цели, — 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, эта ссылка — отличный источник для этого.
Спасибо за прочтение, увидимся в другой истории :)