Практическая работа: Веб-приложения в реальном времени с использованием SignalR

Команда Web Camps

Скачать комплект обучения Web Camps, выпуск за октябрь 2015 г.

Веб-приложения в режиме реального времени позволяют отправлять содержимое на стороне сервера подключенным клиентам в режиме реального времени. Для разработчиков ASP.NET ASP.NET SignalR — это библиотека для добавления веб-функций в режиме реального времени в свои приложения. Он использует несколько протоколов, автоматически выбирая лучший доступный вариант, исходя из лучших доступных протоколов клиента и сервера. Он использует преимущества WebSocket, API HTML5, который обеспечивает двунаправленное взаимодействие между браузером и сервером.

SignalR также предоставляет простой высокоуровневый API для выполнения RPC от сервера к клиенту (вызов функций JavaScript в браузерах клиентов из кода .NET на стороне сервера) в приложении ASP.NET, как и полезные перехватчики для управления подключениями, таких как события подключения/отключения, группирование подключений и авторизация.

SignalR — это абстракция над некоторыми протоколами передачи, необходимыми для выполнения работы в режиме реального времени между клиентом и сервером. Подключение SignalR начинается как HTTP и затем преобразуется в подключение WebSocket, если 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.
• Горизонтальное масштабирование приложения SignalR с помощью SQL Server.

Необходимые условия

Для выполнения этой практической работы требуется следующее:

• Visual Studio Express 2013 для Интернета или более поздней версии

Setup

Чтобы выполнить упражнения в этой практической лаборатории, необходимо сначала настроить среду.

1. Откройте окно Проводника Windows и перейдите к папке Источник лаборатории.
2. Щелкните правой кнопкой мыши Setup.cmd и выберите "Запуск от имени администратора ", чтобы запустить процесс установки, который настроит среду и установит фрагменты кода Visual Studio для этой лаборатории.
3. Если отображается диалоговое окно "Контроль учетных записей пользователей", подтвердите действие, чтобы продолжить.

Использование фрагментов кода

На протяжении всего документа лабораторной работы вам будет предложено вставлять блоки кода. Для удобства большая часть этого кода предоставляется как фрагменты кода Visual Studio Code, к которым можно получить доступ в Visual Studio 2013, чтобы избежать необходимости добавлять его вручную.

Упражнения

Эта практическая лаборатория включает в себя следующие упражнения:

1. Работа с данными Real-Time с помощью SignalR
2. Масштабирование с помощью SQL Server

Предполагаемое время выполнения этого практического занятия: 60 минут

Упражнение 1. Работа с данными Real-Time с помощью SignalR

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

SignalR поддерживает функции сервера push-сообщений или трансляции; он автоматически управляет управлением подключениями. В классических HTTP-подключениях для обмена данными с клиентским сервером подключение повторно устанавливается для каждого запроса, но SignalR обеспечивает постоянное подключение между клиентом и сервером. В SignalR код сервера вызывает клиентский код в браузере с помощью удаленных вызовов процедур (RPC), а не модели ответа на запросы, которую мы знаем сегодня.

В этом упражнении вы настроите приложение Geek Quiz для использования SignalR, чтобы отображать панель статистики с обновленными метриками без необходимости перезагрузить всю страницу.

Задача 1. Изучение страницы статистики geek quiz

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

1. Откройте Visual Studio Express 2013 для Интернета и откройте решение GeekQuiz.sln , расположенное в папке Source\Ex1-WorkingWithRealTimeData\Begin .

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

   

   Запуск решения

3. Нажмите кнопку "Зарегистрировать " в правом верхнем углу страницы, чтобы создать нового пользователя в приложении.

   

   Регистрация ссылки

4. На странице "Регистрация" введите имя пользователя и пароль, а затем нажмите кнопку "Зарегистрировать".

   

   Регистрация пользователя

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

6. Откройте страницу статистики в новом окне и разместите домашнюю страницу и страницу статистики параллельно.

   

   Параллельные окна

7. На домашней странице ответьте на вопрос, щелкнув один из вариантов.

   

   Ответ на вопрос

8. После нажатия одной из кнопок ответ должен появиться.

   

   Вопрос отвечен правильно

9. Обратите внимание, что информация, указанная на странице статистики, устарела. Обновите страницу, чтобы просмотреть обновленные результаты.

   

   Страница статистики

10. Вернитесь в Visual Studio и остановите отладку.

Задача 2. Добавление SignalR в Geek Quiz для отображения онлайн-диаграмм

В этой задаче вы добавите SignalR в решение и автоматически отправляете обновления клиентам при отправке нового ответа на сервер.

1. В меню "Сервис" в Visual Studio выберите Диспетчер пакетов NuGet и выберите консоль диспетчера пакетов.

2. В окне консоли диспетчера пакетов выполните следующую команду:

   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 будут автоматически обновлены.

3. В обозревателе решений разверните папку "Скрипты" и обратите внимание, что файлы SignalR js были добавлены в решение.

   

   Ссылки на JavaScript SignalR

4. В обозревателе решений щелкните правой кнопкой мыши проект GeekQuiz , выберите "Добавить | новую папку" и назовите ее Центрами.

5. Щелкните правой кнопкой мыши папку "Центры" и выберите "Добавить" | Новый элемент.

   

   Добавление нового элемента

6. В диалоговом окне "Добавление нового элемента" выберите Visual C# | Интернет | Узел SignalR в левой области выберите класс SignalR Hub (v2) в центральной области, назовите файл StatisticsHub.cs и нажмите кнопку "Добавить".

   

   Диалоговое окно "Добавление нового элемента"

7. Замените код в классе StatisticsHub следующим кодом.

   (Фрагмент кода — RealTimeSignalR — Ex1 — StatisticsHubClass)

   namespace GeekQuiz.Hubs
   {
       using Microsoft.AspNet.SignalR;
   
       public class StatisticsHub : Hub
       {
       }
   }
   

8. Откройте Startup.cs и добавьте следующую строку в конце метода Configuration .

   (Фрагмент кода — RealTimeSignalR — Ex1 — MapSignalR)

   public void Configuration(IAppBuilder app)
   {
       this.ConfigureAuth(app);
       app.MapSignalR();
   }
   

9. Откройте страницу StatisticsService.cs в папке Службы и добавьте следующие директивы using.

   (Фрагмент кода — RealTimeSignalR — Ex1 — UsingDirectives)

   using Microsoft.AspNet.SignalR;
   using GeekQuiz.Hubs;
   

10. Чтобы уведомить подключенные клиенты об обновлениях, сначала извлекается объект 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.

11. Откройте страницу TriviaController.cs в папке Controllers и добавьте следующие директивы using.

    using GeekQuiz.Services;
    

12. Добавьте следующий выделенный код в метод действия 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);
    }
    

13. Откройте страницу Statistics.cshtml в папке Views | Home. Найдите раздел "Скрипты" и добавьте следующие ссылки на скрипты в начале раздела.

    (Фрагмент кода — RealTimeSignalR — Ex1 — SignalRScriptReferences)

    @section Scripts {
        @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
        @Scripts.Render("~/signalr/hubs");
        ...
    }
    

    Замечание

    При добавлении SignalR и других библиотек скриптов в проект Visual Studio диспетчер пакетов может установить версию файла скрипта SignalR, который более поздний, чем версия, показанная в этом разделе. Убедитесь, что ссылка на скрипт в коде соответствует версии библиотеки скриптов, установленной в проекте.

14. Добавьте следующий выделенный код, чтобы подключить клиента к центру 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 после ответа на новый вопрос.

1. Нажмите клавишу F5 , чтобы запустить решение.

   Замечание

   Если вы еще не вошли в приложение, войдите с помощью пользователя, созданного в задаче 1.

2. Откройте страницу статистики в новом окне и поместите домашнюю страницу и страницу статистики параллельно, как и в задаче 1.

3. На домашней странице ответьте на вопрос, щелкнув один из вариантов.

   

   Ответ на другой вопрос

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

   

   Страница статистики обновлена после ответа

Упражнение 2. Масштабирование с помощью SQL Server

При масштабировании веб-приложения вы можете выбрать между вертикальным масштабированием и горизонтальным масштабированием. Увеличение масштаба означает использование более крупного сервера с дополнительными ресурсами (ЦП, ОЗУ и т. д.), а горизонтальное масштабирование означает добавление дополнительных серверов для обработки нагрузки. Проблема с последним заключается в том, что клиенты могут направляться на разные серверы. Клиент, подключенный к одному серверу, не будет получать сообщения, отправленные с другого сервера.

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

В настоящее время существует три типа обратных планов для SignalR:

• Служебная шина Windows Azure. Служебная шина — это инфраструктура обмена сообщениями, которая позволяет компонентам отправлять слабо связанные сообщения.
• SQL Server. Подложка SQL Server записывает сообщения в таблицы SQL. Backplane использует Service Broker для эффективного обмена сообщениями. Однако он также работает, если компонент Service Broker не включен.
• Redis. Redis — это хранилище ключей-значений в памяти. Redis поддерживает шаблон публикации и подписки (pub/sub) для отправки сообщений.

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

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

Дополнительные сведения о работе заднего плана SignalR см. в этой статье.

В этом упражнении вы будете использовать SQL Server для распространения сообщений в приложении Geek Quiz . Эти задачи будут выполняться на одном тестовом компьютере, чтобы узнать, как настроить конфигурацию, но чтобы получить полный эффект, необходимо развернуть приложение SignalR на двух или более серверах. Необходимо также установить SQL Server на одном из серверов или на отдельном выделенном сервере.

Задача 1. Понимание сценария

В этой задаче вы будете запускать 2 экземпляра Geek Quiz, симулируя работу нескольких экземпляров IIS на своем локальном компьютере. В этом сценарии при ответе на вопросы викторины в одном приложении обновление не отобразится на странице со статистикой второй версии. Это моделирование напоминает среду, в которой приложение развертывается на нескольких экземплярах и использует подсистему балансировки нагрузки для взаимодействия с ними.

1. Откройте решение Begin.sln , расположенное в папке Source/Ex2-ScalingOutWithSQLServer/Begin . После загрузки вы заметите в обозревателе серверов , что решение имеет два проекта с одинаковыми структурами, но различными именами. Это имитирует выполнение двух экземпляров одного и того же приложения на локальном компьютере.

   

   Начало решения, имитация 2 экземпляров теста Geek

2. Откройте страницу свойств решения, щелкнув правой кнопкой мыши узел решения и выбрав "Свойства". В разделе "Запуск проекта" выберите несколько запускаемых проектов и измените значение действия для обоих проектов на "Пуск".

   

   Запуск нескольких проектов

3. Нажмите клавишу F5 , чтобы запустить решение. Приложение запустит два экземпляра Geek Quiz в разных портах, имитируя несколько экземпляров одного приложения. Закрепите один из браузеров слева, а другой справа от экрана. Войдите с помощью учетных данных или зарегистрируйте нового пользователя. После входа сохраните страницу Trivia слева и перейдите на страницу статистики в браузере справа.

   

   Geek Quiz бок о бок

   

   Geek Quiz в разных портах

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

5. Вернитесь в Visual Studio и остановите отладку.

Задача 2 – Создание шины SQL Server

В этом задании вы создадите базу данных, которая будет служить поддерживающей инфраструктурой для приложения Geek Quiz. Обозреватель объектов SQL Server будет использоваться для просмотра сервера и инициализации базы данных. Кроме того, вы включите Service Broker.

1. В Visual Studio откройте представление меню и выберите обозреватель объектов SQL Server.

2. Подключитесь к экземпляру LocalDB, щелкнув правой кнопкой мыши узел SQL Server и выбрав опцию Добавить SQL Server...

   

   Добавление экземпляра SQL Server в обозреватель объектов SQL Server

3. Задайте имя сервера на (localdb)\v11.0 и оставьте Windows Authentication в качестве режима. Нажмите кнопку "Подключиться ", чтобы продолжить.

   

   Подключение к LocalDB

4. Теперь, когда вы подключены к экземпляру LocalDB, необходимо создать базу данных, которая будет представлять среду SQL Server для SignalR. Для этого щелкните правой кнопкой мыши узел "Базы данных " и выберите "Добавить новую базу данных".

   

   Добавление новой базы данных

5. Задайте для имени базы данных значение SignalR и нажмите кнопку "ОК ", чтобы создать ее.

   

   Создание базы данных SignalR

   Замечание

   Вы можете выбрать любое имя базы данных.

6. Чтобы получать обновления более эффективно из серверной части, рекомендуется включить Service Broker для базы данных. Service Broker обеспечивает встроенную поддержку обмена сообщениями и очередей в SQL Server. Бекплейн также работает без компонента Service Broker. Откройте новый запрос, щелкнув базу данных правой кнопкой мыши и выбрав "Создать запрос".

   

   Открытие нового запроса

7. Чтобы проверить, включен ли Компонент Service Broker, запросите столбец is_broker_enabled в представлении каталога sys.database . Выполните следующий скрипт в недавно открывшемся окне запроса.

   SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
   

   

   Запрос состояния компонента Service Broker

8. Если значение столбца 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 и задайте строку подключения в базу данных backplane.

1. Откройте консоль диспетчера пакетов из Инструменты>Диспетчер пакетов NuGet. Убедитесь, что проект GeekQuiz выбран в раскрывающемся списке проекта по умолчанию . Введите следующую команду, чтобы установить пакет NuGet Microsoft.AspNet.SignalR.SqlServer .

   Install-Package Microsoft.AspNet.SignalR.SqlServer
   

2. Повторите предыдущий шаг, но на этот раз для проекта GeekQuiz2.

3. Чтобы настроить сервер 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();
       }
   }
   

4. Теперь, когда оба проекта настроены для использования серверной части SQL Server, нажмите клавишу F5 , чтобы запустить их одновременно.

5. Опять же, Visual Studio запустит два экземпляра Geek Quiz в разных портах. Закрепите один из браузеров слева и в правой части экрана и войдите в систему с помощью учетных данных. Сохраните страницу Trivia слева и перейдите на страницу статистики в правом браузере.

6. Начните отвечать на вопросы в левом браузере. В этот раз страница статистики обновлена благодаря бекплейну. Переключайтесь между приложениями (Статистика теперь находится слева, и Trivia справа) и повторите тест, чтобы проверить работоспособность обоих экземпляров. Серверная планка служит общим кэшом сообщений для каждого подключенного сервера, и каждый сервер будет хранить сообщения в собственном локальном кэше для распространения между подключенными клиентами.

7. Вернитесь в Visual Studio и остановите отладку.

8. Компонент серверной части SQL Server автоматически создает необходимые таблицы в указанной базе данных. На панели обозревателя объектов SQL Server откройте базу данных, созданную для серверной части (например, SignalR) и разверните ее таблицы. Вы увидите следующие таблицы:

   

   Созданные таблицы заднего плана

9. Щелкните правой кнопкой мыши таблицу SignalR.Messages_0 и выберите "Просмотреть данные".

   

   Просмотр таблицы сообщений Backplane SignalR

10. При ответах на вопросы викторины вы увидите различные сообщения, которые отправляются в Центр. Обратный план распределяет эти сообщения в любой подключенный экземпляр.

    

    Таблица сообщений бэкплейна

Сводка

В этой практической лаборатории вы узнали, как добавить SignalR в приложение и отправлять уведомления с сервера на подключенные клиенты с помощью Центров. Кроме того, вы узнали, как масштабировать приложение с помощью компонента backplane при развертывании приложения в нескольких экземплярах IIS.