Возможно, вы написали приложения реального времени с помощью SignalR и / или вы также могли написать веб-приложение с использованием экосистемы @ngrx. Следуя шаблону Redux, вы хотите предсказуемого управления состоянием, но асинхронная система обмена сообщениями SignalR не может быть его частью. Однако подобные операции могут сопровождаться побочными эффектами. И, конечно же, @ngrx может с этим справиться.

Перенося SignalR в свой @ ngrx / store и @ ngrx / effect, вы получаете контроль над своим приложением разными способами:

  • автоматически создавать, подключать, отправлять / получать события и повторно подключать концентраторы SignalR…
  • … Для идеальной синхронизации со статусами вашего хаба
  • … И поэтому повторно используйте это состояние для выполнения операций: обнаружение автономного / онлайн-режима, отображение состояния концентратора

Начало работы

Конечно, вам потребуются необходимые пакеты: @ ngrx / store, @ ngrx / effect и @ aspnet / signalr.

npm install rxjs @ngrx/store @ngrx/effects @aspnet/signalr

А затем установите новую зависимость:

npm install ngrx-signalr-core

После установки всех зависимостей не забудьте обновить свой модуль:

Для начала вам понадобятся две вещи:

  • часть состояния, предназначенная для сохранения определения хабов с их соответствующим статусом
  • и список предустановленных эффектов, которые мы увидим прямо сейчас

То, что вам никогда не понадобится: управление жизненным циклом концентратора

Мы делаем для вас как минимум 3 вещи, которые вам больше не придется делать при работе с SignalR в приложении @ngrx.

createHub $

createHub$ - это побочный эффект, который автоматически обрабатывает создание концентратора, когда вы выполняете действие createSignalRHub. Просто отправьте это действие, и сразу же появится новый хаб. Магия!

beforeStartHub $

В мире побочных эффектов ничто не будет работать должным образом. Вот почему сделано beforeStartHub$. Он обрабатывает все эффекты состояния подключения за вас:

  • когда хаб не запускается
  • когда концентратор отключается (а затем подключается)
  • при возникновении какой-либо ошибки

startHub $

И, наконец, startHub$ запускает концентратор, когда вы отправляете действие startSignalRHub.

Автоматическое переподключение

Ранее я сказал «как минимум 3 вещи, которые мы делаем для вас». Действительно, мы предоставляем 4-й эффект, который вы можете использовать повторно. Это сделано для автоматического переподключения, поскольку SignalR не обеспечивает механизма переподключения.

Вам нужно будет добавить этот эффект в свое приложение:

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

Осталось развлечься: обработка событий

После того, как все настроено, вы знаете, что хотите использовать SignalR для того, что он делает: для отправки и получения сообщений. Для этого воспользуемся эффектами.

Единый концентратор

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

Также не забудьте запустить концентратор сигнализации, отправив действие startSignalRHub для получения сообщений.

Вам также может потребоваться отправлять события на сервер с помощью функции hub.send.

Работа с несколькими концентраторами

При написании приложений вам, возможно, придется использовать несколько концентраторов.

При работе с несколькими концентраторами вы можете отфильтровать действие концентратора с помощью оператора ofHub. Таким образом, каждый эффект, который вы напишете, будет применяться только к соответствующему концентратору.

Представьте, что у вас есть несколько концентраторов:

Вот как инициализировать хабы по очереди:

Отчет о состоянии

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

И, конечно же, каждый статус хаба находится внутри состояния:

Скажите, я в сети?

Мы предоставляем действия, эффекты, состояние, но мы также предоставляем некоторые селекторы, которые могут соответствовать вашим потребностям.

Если я хочу отобразить информацию о статусе того, подключено приложение или нет, я могу использовать такие селекторы:

Используя наблюдаемый connectionState$, мы можем наблюдать текущий статус моего приложения:

  • GREEN все хабы подключены
  • RED когда нет подключения к Интернету или отключен какой-либо концентратор
  • нет статуса, если хабы не запущены, например

Дополнительная информация

В этой статье показано, как использовать SignalR (.NET Core) в приложении @ngrx. Если вам нужна дополнительная информация, вы можете проверить репозиторий GitHub здесь: https://github.com/Odonno/ngrx-signalr-core



Odonno / ngrx-signalr-core
Библиотека для обработки событий SignalR (.NET Core) в реальном времени с использованием angular, rxjs и библиотеки @ngrx. Эта библиотека создана… github.com



Кроме того, поскольку реализация SignalR между .NET Core и .NET Framework отличается, вы можете проверить следующий репозиторий, чтобы применить SignalR .NET Framework внутри приложения @ngrx: https://github.com/Odonno/ngrx-signalr