Практическое лабораторное занятие. Веб-приложения в режиме реального времени с SignalR
Команда веб-лагерей
Предупреждение
Эта документация не для последней версии SignalR. Взгляните на ASP.NET Core SignalR.
Скачать учебный комплект для веб-лагерей, выпуск за октябрь 2015 г.
Веб-приложения в режиме реального времени позволяют отправлять содержимое на стороне сервера в подключенные клиенты в режиме реального времени. Для разработчиков ASP.NET ASP.NET SignalR — это библиотека для добавления веб-функций в режиме реального времени в свои приложения. Он использует преимущества нескольких транспортных средств, автоматически выбирая наилучший доступный транспорт с учетом наилучшего доступного транспорта клиента и сервера. Он использует преимущества WebSocket, API HTML5, который обеспечивает двунаправленную связь между браузером и сервером.
SignalR также предоставляет простой высокоуровневый API для выполнения RPC сервера с клиентом (вызов функций JavaScript в браузерах клиентов из кода .NET на стороне сервера) в приложении ASP.NET, а также добавление полезных обработчиков для управления подключениями, таких как события подключения и отключения, группирование подключений и авторизация.
SignalR — это абстракция некоторых видов транспорта, необходимых для работы в режиме реального времени между клиентом и сервером. Подключение SignalR начинается по протоколу HTTP, а затем повышается до подключения WebSocket , если оно доступно. WebSocket является идеальным транспортом для SignalR, так как он обеспечивает наиболее эффективное использование памяти сервера, имеет наименьшую задержку и имеет большинство базовых функций (таких как полнодуплексная связь между клиентом и сервером), но он также имеет самые строгие требования: WebSocket требует, чтобы сервер использовал Windows Server 2012 или Windows 8. вместе с платформа .NET Framework 4.5. Если эти требования не выполняются, SignalR попытается использовать другие транспорты для подключения (например , длинный опрос Ajax).
API SignalR содержит две модели взаимодействия между клиентами и серверами: постоянные подключения и концентраторы. Подключение представляет простую конечную точку для отправки сообщений с одним получателем, сгруппированных или широковещательных сообщений. Концентратор — это более высокоуровневый конвейер, созданный на основе API подключения, который позволяет клиенту и серверу напрямую вызывать методы друг у друга.
Все примеры кода и фрагменты кода включены в комплект для обучения веб-лагерей, выпуск за октябрь 2015 г., доступный по адресу https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. Обратите внимание, что ссылка установщика на этой странице больше не работает. Вместо этого используйте одну из ссылок в разделе Активы.
Общие сведения
Задачи
В этом практическом задании вы узнаете, как:
- Отправка уведомлений от сервера клиенту с помощью SignalR.
- Scale Out приложение SignalR с помощью SQL Server.
Предварительные требования
Для прохождения этого практического задания необходимо следующее:
- Visual Studio Express 2013 для Web или более поздней версии
Настройка
Чтобы выполнить упражнения в этом практическом задании, сначала необходимо настроить среду.
- Откройте окно Windows Обозреватель и перейдите в папку Source лаборатории.
- Щелкните правой кнопкой мыши Setup.cmd и выберите Запуск от имени администратора , чтобы запустить процесс установки, который настроит среду и установит фрагменты кода Visual Studio для этой лаборатории.
- Если отображается диалоговое окно Контроль учетных записей, подтвердите действие, чтобы продолжить.
Примечание
Перед запуском установки убедитесь, что вы проверили все зависимости для этой лаборатории.
Использование фрагментов кода
В документе лаборатории вам будет предложено вставить блоки кода. Для удобства большая часть этого кода предоставляется в виде фрагментов Visual Studio Code, к которым можно получить доступ из Visual Studio 2013, чтобы избежать необходимости добавлять его вручную.
Примечание
Каждое упражнение сопровождается начальным решением, расположенным в папке Begin упражнения, которое позволяет выполнять каждое упражнение независимо от других. Имейте в виду, что фрагменты кода, добавленные во время упражнения, отсутствуют в этих начальных решениях и могут не работать, пока вы не завершите упражнение. В исходном коде упражнения вы также найдете папку End , содержащую решение Visual Studio с кодом, полученным в результате выполнения действий в соответствующем упражнении. Эти решения можно использовать в качестве руководства, если вам нужна дополнительная помощь при работе с этим практическим занятием.
Упражнения
Это практическое занятие включает в себя следующие упражнения:
Предполагаемое время выполнения этого задания: 60 минут
Примечание
При первом запуске Visual Studio необходимо выбрать одну из стандартных коллекций параметров. Каждая предопределенная коллекция соответствует определенному стилю разработки и определяет макеты окон, поведение редактора, фрагменты кода IntelliSense и параметры диалогового окна. Процедуры в этом задании описывают действия, необходимые для выполнения определенной задачи в Visual Studio при использовании коллекции Общих параметров разработки . Если выбрать другую коллекцию параметров для среды разработки, возможны различия в действиях, которые следует учитывать.
Упражнение 1. Работа с данными Real-Time с помощью SignalR
Хотя чат часто используется в качестве примера, вы можете сделать гораздо больше с помощью веб-функций в режиме реального времени. Каждый раз, когда пользователь обновляет веб-страницу, чтобы увидеть новые данные, или когда страница реализует длинный опрос Ajax для получения новых данных, вы можете использовать SignalR.
SignalR поддерживает функцию отправки или трансляции сервера; он автоматически обрабатывает управление подключениями. В классических HTTP-подключениях для обмена данными между клиентом и сервером подключение повторно устанавливается для каждого запроса, но SignalR обеспечивает постоянное подключение между клиентом и сервером. В SignalR серверный код вызывает клиентский код в браузере с помощью удаленных вызовов процедур (RPC), а не модели "запрос-ответ", которую мы знаем сегодня.
В этом упражнении вы настроите приложение Geek Quiz для использования SignalR для отображения панели мониторинга статистики с обновленными метриками без необходимости обновлять всю страницу.
Задача 1. Изучение страницы статистики теста Geek
В этой задаче вы изучите приложение и проверьте, как отображается страница статистики и как можно улучшить способ обновления информации.
Откройте Visual Studio Express 2013 для Web и откройте решение GeekQuiz.sln, расположенное в папке Source\Ex1-WorkingWithRealTimeData\Begin.
Чтобы запустить решение, нажмите клавишу F5. В браузере должна появиться страница Вход .
Запуск решения
Щелкните Зарегистрировать в правом верхнем углу страницы, чтобы создать нового пользователя в приложении.
Ссылка на регистрацию
На странице Регистрация введите имя пользователя и пароль, а затем нажмите кнопку Зарегистрировать.
Регистрация пользователя
Приложение регистрирует новую учетную запись, а пользователь проходит проверку подлинности и перенаправляется обратно на домашнюю страницу с первым вопросом теста.
Откройте страницу Статистика в новом окне и разместите страницы Главная и Статистика рядом.
Параллельные окна
На домашней странице ответьте на вопрос, щелкнув один из вариантов.
Ответ на вопрос
После нажатия одной из кнопок должен появиться ответ.
Правильный ответ на вопрос
Обратите внимание, что сведения, предоставленные на странице Статистика, устарели. Обновите страницу, чтобы просмотреть обновленные результаты.
Страница "Статистика"
Назад в Visual Studio и остановите отладку.
Задача 2. Добавление SignalR в тест Geek для отображения интерактивных диаграмм
В этой задаче вы добавите SignalR в решение и автоматически отправляете обновления клиентам при отправке нового ответа на сервер.
В меню Сервис в Visual Studio выберите Диспетчер пакетов NuGet, а затем щелкните Консоль диспетчера пакетов.
В окне Консоль диспетчера пакетов выполните следующую команду:
Install-Package Microsoft.AspNet.SignalR
Установка пакета SignalR
Примечание
При установке пакетов NuGet SignalR версии 2.0.2 из нового приложения MVC 5 необходимо вручную обновить пакеты OWIN до версии 2.0.1 (или более поздней) перед установкой SignalR. Для этого можно выполнить следующий скрипт в консоли диспетчера пакетов:
get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
В следующем выпуске SignalR зависимости OWIN будут обновлены автоматически.
В Обозреватель решений разверните папку Scripts и обратите внимание, что js-файлы SignalR были добавлены в решение.
Ссылки на SignalR на JavaScript
В Обозреватель решений щелкните правой кнопкой мыши проект GeekQuiz, выберите Добавить | новую папку и назовите его Hubs.
Щелкните правой кнопкой мыши папку Hubs и выберите Добавить | Новый элемент.
Добавление нового элемента
В диалоговом окне Добавление нового элемента выберите Visual C# | Интернет | Узел SignalR в левой области выберите Класс концентратора SignalR (версия 2) в центральной области, присвойте файлу имя StatisticsHub.cs и нажмите кнопку Добавить.
диалоговое
Диалоговое окно "Добавление нового элемента"
Замените код в классе StatisticsHub следующим кодом.
(Фрагмент кода — RealTimeSignalR — Ex1 — StatisticsHubClass)
namespace GeekQuiz.Hubs { using Microsoft.AspNet.SignalR; public class StatisticsHub : Hub { } }
Откройте файл Startup.cs и добавьте следующую строку в конец метода Configuration .
(Фрагмент кода — RealTimeSignalR — Ex1 — MapSignalR)
public void Configuration(IAppBuilder app) { this.ConfigureAuth(app); app.MapSignalR(); }
Откройте страницу StatisticsService.cs в папке Services и добавьте следующие директивы using.
(Фрагмент кода — RealTimeSignalR — Ex1 — UsingDirectives)
using Microsoft.AspNet.SignalR; using GeekQuiz.Hubs;
Чтобы уведомить подключенных клиентов об обновлениях, сначала извлекается объект Context для текущего подключения. Объект Hub содержит методы для отправки сообщений одному клиенту или для широковещательной передачи всем подключенным клиентам. Добавьте следующий метод в класс StatisticsService для трансляции статистических данных.
(Фрагмент кода — RealTimeSignalR — Ex1 — NotifyUpdatesMethod)
public async Task NotifyUpdates() { var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>(); if (hubContext != null) { var stats = await this.GenerateStatistics(); hubContext.Clients.All.updateStatistics(stats); } }
Примечание
В приведенном выше коде вы используете произвольное имя метода для вызова функции на клиенте (т. е. updateStatistics). Указанное имя метода интерпретируется как динамический объект, что означает отсутствие intelliSense или проверки во время компиляции. Выражение вычисляется во время выполнения. При выполнении вызова метода SignalR отправляет клиенту имя метода и значения параметров. Если у клиента есть метод, соответствующий имени, вызывается этот метод и ему передаются значения параметров. Если на клиенте не найден соответствующий метод, ошибка не возникает. Дополнительные сведения см. в руководстве по API центров SignalR ASP.NET.
Откройте страницу TriviaController.cs в папке Контроллеры и добавьте следующие директивы using.
using GeekQuiz.Services;
Добавьте следующий выделенный код в метод действия Post .
(Фрагмент кода — RealTimeSignalR — Ex1 — NotifyUpdatesCall)
public async Task<IHttpActionResult> Post(TriviaAnswer answer) { if (!ModelState.IsValid) { return this.BadRequest(this.ModelState); } answer.UserId = User.Identity.Name; var isCorrect = await this.StoreAsync(answer); var statisticsService = new StatisticsService(this.db); await statisticsService.NotifyUpdates(); return this.Ok<bool>(isCorrect); }
Откройте страницу Statistics.cshtml в представлении | Домашняя папка. Найдите раздел Скрипты и добавьте следующие ссылки на скрипты в начале раздела.
(Фрагмент кода — RealTimeSignalR — Ex1 — SignalRScriptReferences)
@section Scripts { @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js"); @Scripts.Render("~/signalr/hubs"); ... }
Примечание
При добавлении SignalR и других библиотек сценариев в проект Visual Studio диспетчер пакетов может установить версию файла скрипта SignalR, которая является более поздней, чем версия, показанная в этом разделе. Убедитесь, что ссылка на скрипт в коде соответствует версии библиотеки сценариев, установленной в проекте.
Добавьте следующий выделенный код, чтобы подключить клиент к концентратору SignalR и обновить статистические данные при получении нового сообщения от концентратора.
(Фрагмент кода — RealTimeSignalR — Ex1 — SignalRClientCode)
@section Scripts { ... <script> ... var connection = $.hubConnection(); var hub = connection.createHubProxy("StatisticsHub"); hub.on("updateStatistics", function (statistics) { statisticsData = statistics; $("#correctAnswersCounter").text(statistics.CorrectAnswers); $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers); showCharts(statisticsData); }); connection.start(); </script> }
В этом коде вы создаете прокси-сервер концентратора и регистрируете обработчик событий для прослушивания сообщений, отправленных сервером. В этом случае вы прослушиваете сообщения, отправленные с помощью метода updateStatistics .
Задача 3. Запуск решения
В этой задаче вы запустите решение, чтобы убедиться, что представление статистики обновляется автоматически с помощью SignalR после ответа на новый вопрос.
Чтобы запустить решение, нажмите клавишу F5.
Примечание
Если вы еще не вошли в приложение, войдите с помощью пользователя, созданного в задаче 1.
Откройте страницу Статистика в новом окне и поместите страницы Главная и Статистика рядом, как в задаче 1.
На домашней странице ответьте на вопрос, щелкнув один из вариантов.
Ответ на другой вопрос
После нажатия одной из кнопок должен появиться ответ. Обратите внимание, что статистика на странице обновляется автоматически после ответа на вопрос с обновленными сведениями без необходимости обновления всей страницы.
Страница статистики обновлена после ответа
Упражнение 2. Горизонтальное масштабирование с помощью SQL Server
При масштабировании веб-приложения, как правило, можно выбрать варианты масштабирования и увеличения масштаба . Увеличение масштаба означает использование сервера большего размера с большим количеством ресурсов (ЦП, ОЗУ и т. д.), а горизонтальное масштабирование означает добавление дополнительных серверов для обработки нагрузки. Проблема последнего заключается в том, что клиенты могут быть перенаправлены на разные серверы. Клиент, подключенный к одному серверу, не будет получать сообщения, отправленные с другого сервера.
Эти проблемы можно решить с помощью компонента с именем backplane для пересылки сообщений между серверами. При включенной объединителю каждый экземпляр приложения отправляет сообщения обратной панели, а объединителю перенаправит их другим экземплярам приложения.
В настоящее время существует три типа объедините средств для SignalR:
- Windows Служебная шина Azure. Служебная шина — это инфраструктура обмена сообщениями, которая позволяет компонентам отправлять слабо связанные сообщения.
- SQL Server. Объединитедняя панель SQL Server записывает сообщения в таблицы SQL. Для эффективного обмена сообщениями в объединителе используется Компонент Service Broker. Однако он также работает, если компонент Service Broker не включен.
- Редис. Redis — это хранилище ключей и значений в памяти. Redis поддерживает шаблон публикации и подписки ("публикация/подписка") для отправки сообщений.
Каждое сообщение отправляется через шину сообщений. Шина сообщений реализует интерфейс IMessageBus , который предоставляет абстракцию публикации и подписки. Для работы объединителенных плоскостей вместо IMessageBus по умолчанию используется шина, предназначенная для этой задней панели.
Каждый экземпляр сервера подключается к задней плате через шину. При отправке сообщения оно передается на объединителю, а объединителю отправляет его на каждый сервер. Когда сервер получает сообщение от задней платы, он сохраняет сообщение в своем локальном кэше. Затем сервер доставляет сообщения клиентам из локального кэша.
Дополнительные сведения о том, как работает обратная панель SignalR, см. в этой статье.
Примечание
Существует несколько сценариев, в которых объединительная панель может стать узким местом. Ниже приведены некоторые типичные сценарии SignalR.
- Широковещательная трансляция сервера (например, stock ticker). В этом сценарии хорошо работают обратные платы, так как сервер управляет скоростью отправки сообщений.
- Клиент-клиент (например, чат). В этом сценарии объединительная панель может быть узким местом, если количество сообщений масштабируется с количеством клиентов; то есть, если скорость сообщений увеличивается пропорционально по мере присоединения большего числа клиентов.
- Высокочастотный режим реального времени (например, игры в режиме реального времени). В этом сценарии не рекомендуется использовать обратную плоскость.
В этом упражнении вы будете использовать SQL Server для распространения сообщений в приложении Geek Quiz. Эти задачи будут выполняться на одном тестовом компьютере, чтобы узнать, как настроить конфигурацию, но для получения полного эффекта необходимо развернуть приложение SignalR на двух или более серверах. Также необходимо установить SQL Server на одном из серверов или на отдельном выделенном сервере.
Задача 1. Общие сведения о сценарии
В этой задаче вы запустите 2 экземпляра Geek Quiz , имитирующие несколько экземпляров IIS на локальном компьютере. В этом сценарии при ответе на вопросы в одном приложении обновление не будет получать уведомления на странице статистики второго экземпляра. Это моделирование напоминает среду, в которой приложение развертывается на нескольких экземплярах и использует подсистему балансировки нагрузки для взаимодействия с ними.
Откройте решение Begin.sln , расположенное в папке Source/Ex2-ScalingOutWithSQLServer/Begin . После загрузки на серверной Обозреватель вы заметите, что решение имеет два проекта с одинаковыми структурами, но разными именами. Это позволит имитировать выполнение двух экземпляров одного приложения на локальном компьютере.
Начало решения, имитирующего 2 экземпляра Geek Quiz
Откройте страницу свойств решения, щелкнув правой кнопкой мыши узел решения и выбрав Свойства. В разделе Запуск проекта выберите Несколько запускаемых проектов и измените значение действия для обоих проектов на Запуск.
Запуск нескольких проектов
Чтобы запустить решение, нажмите клавишу F5. Приложение запустит два экземпляра Geek Quiz в разных портах, имитируя несколько экземпляров одного приложения. Закрепите один из браузеров слева, а другой — в правой части экрана. Войдите с помощью учетных данных или зарегистрируйте нового пользователя. После входа сохраните страницу Trivia слева и перейдите на страницу Статистика в браузере справа.
Джик Викторина бок о бок
Geek Quiz в разных портах
Начните отвечать на вопросы в левом браузере, и вы увидите, что страница статистика в правом браузере не обновляется. Это связано с тем, что SignalR использует локальный кэш для распространения сообщений между своими клиентами, и этот сценарий имитирует несколько экземпляров, поэтому кэш не используется совместно между ними. Вы можете убедиться, что SignalR работает, протестируя те же действия, но с помощью одного приложения. В следующих задачах вы настроите обратную планку для репликации сообщений между экземплярами.
Назад в Visual Studio и остановите отладку.
Задача 2. Создание внутренней панели SQL Server
В этой задаче вы создадите базу данных, которая будет служить в качестве серверной панели для приложения Geek Quiz . Вы будете использовать SQL Server обозреватель объектов для просмотра сервера и инициализации базы данных. Кроме того, вы включите компонент Service Broker.
В Visual Studio откройте меню Вид и выберите SQL Server обозреватель объектов.
Подключитесь к экземпляру LocalDB, щелкнув правой кнопкой мыши узел SQL Server и выбрав добавить SQL Server....
Добавление экземпляра SQL Server в SQL Server обозреватель объектов
Задайте имя сервера(localdb)\v11.0 и оставьте режим проверки подлинности Windows в качестве режима проверки подлинности. Чтобы продолжить, щелкните Подключить .
Подключение к LocalDB
Теперь, когда вы подключены к экземпляру LocalDB, необходимо создать базу данных, которая будет представлять SQL Server для SignalR. Для этого щелкните правой кнопкой мыши узел Базы данных и выберите Добавить новую базу данных.
Добавление новой базы данных
Задайте имя базы данных SignalR и нажмите кнопку ОК , чтобы создать базу данных.
Создание базы данных SignalR
Примечание
Для базы данных можно выбрать любое имя.
Для более эффективного получения обновлений из внутренней панели рекомендуется включить компонент Service Broker для базы данных. Компонент Service Broker обеспечивает встроенную поддержку обмена сообщениями и постановки в очередь в SQL Server. Обратная панель также работает без компонента Service Broker. Откройте новый запрос, щелкнув правой кнопкой мыши базу данных, и выберите Создать запрос.
Открытие нового запроса
Чтобы проверка, включен ли компонент Service Broker, запросите столбец is_broker_enabled в представлении каталога sys.databases. Выполните следующий скрипт в недавно открывшемся окне запроса.
SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
Запрос состояния компонента Service Broker
Если значение столбца is_broker_enabled в базе данных равно "0", используйте следующую команду, чтобы включить его. Замените <YOUR-DATABASE> именем, заданным при создании базы данных (например, SignalR).
ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
Включение компонента Service Broker
Примечание
Если этот запрос представляется взаимоблокировкой, убедитесь, что к базе данных нет приложений, подключенных к базе данных.
Задача 3. Настройка приложения SignalR
В этой задаче вы настроите Geek Quiz для подключения к SQL Server задней панели. Сначала добавьте пакет NuGet SignalR.SqlServer и настроите строку подключения к базе данных внутренней панели.
Откройте консоль диспетчера пакетов из раздела Сервис>Диспетчер пакетов NuGet. Убедитесь, что проект GeekQuiz выбран в раскрывающемся списке Проект по умолчанию . Введите следующую команду, чтобы установить пакет NuGet Microsoft.AspNet.SignalR.SqlServer .
Install-Package Microsoft.AspNet.SignalR.SqlServer
Повторите предыдущий шаг, но на этот раз для проекта GeekQuiz2.
Чтобы настроить SQL Server задней панели, откройте файл Startup.cs проекта GeekQuiz и добавьте следующий код в метод Configure. Замените <YOUR-DATABASE> именем базы данных, используемой при создании SQL Server серверной панели. Повторите этот шаг для проекта GeekQuiz2 .
(Фрагмент кода — RealTimeSignalR — Ex2 — StartupConfiguration)
public class Startup { public void Configuration(IAppBuilder app) { var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;"; GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); this.ConfigureAuth(app); app.MapSignalR(); } }
Теперь, когда оба проекта настроены для использования SQL Server задней панели, нажмите клавишу F5, чтобы запустить их одновременно.
Опять же, Visual Studio запустит два экземпляра Geek Quiz в разных портах. Закрепите один из браузеров слева, а другой в правой части экрана и войдите в систему, используя свои учетные данные. Оставьте страницу Trivia слева и перейдите на страницу Статистика в правом браузере.
Начните отвечать на вопросы в левом браузере. На этот раз страница Статистика обновляется благодаря задней панели. Переключитесь между приложениями (статистика теперь находится слева, а Trivia — справа) и повторите тест, чтобы убедиться, что он работает для обоих экземпляров. Серверная панель служит общим кэшем сообщений для каждого подключенного сервера, и каждый сервер будет хранить сообщения в своем локальном кэше для распространения между подключенными клиентами.
Назад в Visual Studio и остановите отладку.
Компонент SQL Server серверной панели автоматически создает необходимые таблицы в указанной базе данных. На панели SQL Server обозреватель объектов откройте базу данных, созданную для серверной панели (например, SignalR), и разверните ее таблицы. Вы должны увидеть следующие таблицы:
Таблицы, созданные в обратной плоскости
Щелкните правой кнопкой мыши таблицу SignalR.Messages_0 и выберите Просмотреть данные.
Просмотр таблицы сообщений обратной плоскости SignalR
Вы можете просмотреть различные сообщения, отправляемые в центр , при ответе на вопросы, касающиеся мелочей. Обратная панель распространяет эти сообщения на любой подключенный экземпляр.
Таблица сообщений обратной плоскости
Итоги
В этом практическом задании вы узнали, как добавить SignalR в приложение и отправлять уведомления с сервера подключенным клиентам с помощью Центров. Кроме того, вы узнали, как масштабировать приложение с помощью компонента внутренней плоскости при развертывании приложения в нескольких экземплярах IIS.