Практическое занятие. веб-приложения в режиме реального времени с помощью SignalRHands On Lab: Real-Time Web Applications with SignalR

по веб-Camp командамby Web Camps Team

Warning

Эта документация не относится к последней версии SignalR.This documentation isn't for the latest version of SignalR. Ознакомьтесь с ASP.NET Core SignalR.Take a look at ASP.NET Core SignalR.

Скачайте комплект обучающих материалов по Web Camp, выпуск за Октябрь 2015Download Web Camps Training Kit, October 2015 Release

Веб-приложения в режиме реального времени позволяют отправлять содержимое на стороне сервера в подключенные клиенты, как это происходит в режиме реального времени.Real-time Web applications feature the ability to push server-side content to the connected clients as it happens, in real-time. Для разработчиков ASP.NET ASP.NET SignalR — это библиотека для добавления в приложения веб-функций в режиме реального времени.For ASP.NET developers, ASP.NET SignalR is a library to add real-time web functionality to their applications. Она использует преимущества нескольких транспортов, автоматически выбирая оптимальную доступную транспортную передачу, используя оптимальный доступный транспорт клиента и сервера.It takes advantage of several transports, automatically selecting the best available transport given the client and server's best available transport. Он использует преимущества WebSocket, API HTML5, который обеспечивает двунаправленный обмен данными между браузером и сервером.It takes advantage of WebSocket, an HTML5 API that enables bi-directional communication between the browser and server.

SignalR также предоставляет простой, высокоуровневый API для выполнения СЕРВЕРной RPC-службы (вызов функций JavaScript в браузерах клиентов из серверного кода .NET) в приложении ASP.NET, а также добавление полезных обработчиков для управления подключениями, таких как события подключения и отключения, группирование соединений и авторизация.SignalR also provides a simple, high-level API for doing server to client RPC (call JavaScript functions in your clients' browsers from server-side .NET code) in your ASP.NET application, as well as adding useful hooks for connection management, such as connect/disconnect events, grouping connections, and authorization.

SignalR является абстракцией для некоторых транспортов, необходимых для работы в режиме реального времени между клиентом и сервером.SignalR is an abstraction over some of the transports that are required to do real-time work between client and server. Подключение SignalR запускается как HTTP, а затем передается в подключение WebSocket , если оно доступно.A SignalR connection starts as HTTP, and is then promoted to a WebSocket connection if available. WebSocket — это идеальный транспорт для SignalR, так как он обеспечивает наиболее эффективное использование памяти сервера, имеет наименьшую задержку и обладает самыми основными функциями (например, полным дуплексным обменом данными между клиентом и сервером), но обладает самыми строгими требованиями: для WebSocket требуется, чтобы сервер использовал Windows Server 2012 или Windows 8, а также .NET Framework 4,5.WebSocket is the ideal transport for SignalR, since it makes the most efficient use of server memory, has the lowest latency, and has the most underlying features (such as full duplex communication between client and server), but it also has the most stringent requirements: WebSocket requires the server to be using Windows Server 2012 or Windows 8, along with .NET Framework 4.5. Если эти требования не выполняются, то SignalR попытается использовать другие транспорты для подключения (например, длительный опрос Ajax).If these requirements are not met, SignalR will attempt to use other transports to make its connections (like Ajax long polling).

API SignalR содержит две модели взаимодействия между клиентами и серверами: постоянные подключения и концентраторы.The SignalR API contains two models for communicating between clients and servers: Persistent Connections and Hubs. Соединение представляет собой простую конечную точку для отправки сообщений одного получателя, сгруппированных или широковещательных.A Connection represents a simple endpoint for sending single-recipient, grouped, or broadcast messages. Концентратор — это высокоуровневый конвейер, построенный на основе API подключения, который позволяет клиенту и серверу вызывать методы напрямую.A Hub is a more high-level pipeline built upon the Connection API that allows your client and server to call methods on each other directly.

Архитектура SignalR

Все примеры кода и фрагментов включены в набор средств для обучения Web Camp, https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13bвыпущенный в октябре 2015.All sample code and snippets are included in the Web Camps Training Kit, October 2015 Release, available at https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. Обратите внимание, что ссылка на этот установщик на этой странице больше не работает; Вместо этого используйте одну из ссылок в разделе активы.Please note that the Installer link on that page no longer works; use one of the links under the Assets section instead.

ОбзорOverview

ЦелиObjectives

В этой практической лабораторной работе вы узнаете, как выполнять следующие задачи:In this hands-on lab, you will learn how to:

  • Отправка уведомлений с сервера на клиент с помощью SignalR.Send notifications from server to client using SignalR.
  • Scale Out приложение SignalR с помощью SQL Server.Scale Out your SignalR application using SQL Server.

предварительные требованияPrerequisites

Для выполнения этой практической лабораторной работы требуется следующее:The following is required to complete this hands-on lab:

НастройкаSetup

Чтобы выполнить упражнения в этой практической лабораторной работе, сначала необходимо настроить среду.In order to run the exercises in this hands-on lab, you will need to set up your environment first.

  1. Откройте окно проводника Windows и перейдите к исходной папке лаборатории.Open a Windows Explorer window and browse to the lab's Source folder.
  2. Щелкните правой кнопкой мыши Setup. cmd и выберите Запуск от имени администратора , чтобы запустить процесс установки, который будет настраивать среду и установить фрагменты кода Visual Studio для этой лабораторной работы.Right-click Setup.cmd and select Run as administrator to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab.
  3. Если отображается диалоговое окно Контроль учетных записей пользователей, подтвердите действие для продолжения.If the User Account Control dialog box is shown, confirm the action to proceed.

Note

Убедитесь, что проверены все зависимости для этой лабораторной работы перед запуском программы установки.Make sure you have checked all the dependencies for this lab before running the setup.

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

На протяжении всего лабораторного документа вы получите инструкции по вставке блоков кода.Throughout the lab document, you will be instructed to insert code blocks. Для удобства большая часть этого кода предоставляется как Visual Studio Code фрагменты, к которым можно получить доступ из Visual Studio 2013, чтобы не добавлять их вручную.For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2013 to avoid having to add it manually.

Note

Каждое упражнение сопровождается начальным решением, расположенным в начальной папке упражнения, которое позволяет выполнять каждое упражнение независимо от других.Each exercise is accompanied by a starting solution located in the Begin folder of the exercise that allows you to follow each exercise independently of the others. Имейте в виду, что фрагменты кода, добавленные во время упражнения, отсутствуют в этих начальных решениях и могут не работать, пока вы не завершите упражнение.Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and may not work until you have completed the exercise. В исходном коде для упражнения также будет найдена Конечная папка, содержащая решение Visual Studio с кодом, полученным в результате выполнения шагов в соответствующем упражнении.Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the code that results from completing the steps in the corresponding exercise. Эти решения можно использовать в качестве руководства, если вам нужна дополнительная помощь во время работы с этой практической лабораторной работой.You can use these solutions as guidance if you need additional help as you work through this hands-on lab.


ПолнятExercises

Эта практическая лабораторная работа включает в себя следующие упражнения:This hands-on lab includes the following exercises:

  1. Работа с данными в режиме реального времени с помощью SignalRWorking with Real-Time Data Using SignalR
  2. Горизонтальное масштабирование с помощью SQL ServerScaling Out Using SQL Server

Предполагаемое время выполнения этой лабораторной работы: 60 минутEstimated time to complete this lab: 60 minutes

Note

При первом запуске Visual Studio необходимо выбрать одну из предварительно определенных коллекций параметров.When you first start Visual Studio, you must select one of the predefined settings collections. Каждая предопределенная коллекция разработана для соответствия определенному стилю разработки и определяет макеты окон, поведение редактора, фрагменты кода IntelliSense и параметры диалоговых окон.Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. Процедуры в этом лабораторном занятии описывают действия, необходимые для выполнения данной задачи в Visual Studio при использовании коллекции общих параметров разработки .The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. При выборе другой коллекции параметров для среды разработки могут возникнуть различия в действиях, которые необходимо учитывать.If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account.

Упражнение 1. Работа с данными в режиме реального времени с помощью SignalRExercise 1: Working with Real-Time Data Using SignalR

Хотя беседа часто используется в качестве примера, вы можете сделать многое больше с помощью веб-функций в режиме реального времени.While chat is often used as an example, you can do a whole lot more with real-time Web functionality. Каждый раз, когда пользователь обновляет веб-страницу для просмотра новых данных, или страница реализует длительный опрос Ajax для получения новых данных, вы можете использовать SignalR.Any time a user refreshes a web page to see new data or the page implements Ajax long polling to retrieve new data, you can use SignalR.

SignalR поддерживает функцию принудительной или широковещательной передачи сервера; он автоматически обрабатывает управление подключениями.SignalR supports server push or broadcasting functionality; it handles connection management automatically. В классических HTTP-подключениях для обмена данными между клиентом и сервером устанавливается соединение повторно для каждого запроса, но SignalR обеспечивает постоянное подключение между клиентом и сервером.In classic HTTP connections for client-server communication, connection is re-established for each request, but SignalR provides persistent connection between the client and server. В SignalR серверный код вызывает клиентский код в браузере с помощью удаленных вызовов процедур (RPC), а не модели «запрос-ответ», которая уже известна.In SignalR the server code calls out to a client code in the browser using Remote Procedure Calls (RPC), rather than the request-response model we know today.

В этом упражнении вы настроите приложение " Викторина ", которое будет использовать SignalR для вывода панели мониторинга статистики с обновленными метриками без необходимости обновлять всю страницу.In this exercise, you will configure the Geek Quiz application to use SignalR to display the Statistics dashboard with the updated metrics without the need to refresh the entire page.

Задача 1. Обзор страницы "Статистика головоломки"Task 1 – Exploring the Geek Quiz Statistics Page

В этой задаче вы просматриваете приложение и проверите, как отображается страница статистики, и как можно улучшить способ обновления информации.In this task, you will go through the application and verify how the statistics page is shown and how you can improve the way the information is updated.

  1. Откройте Visual Studio Express 2013 для Web и откройте решение жееккуиз. sln , расположенное в папке Source\Ex1-WorkingWithRealTimeData\Begin .Open Visual Studio Express 2013 for Web and open the GeekQuiz.sln solution located in the Source\Ex1-WorkingWithRealTimeData\Begin folder.

  2. Чтобы запустить решение, нажмите клавишу F5.Press F5 to run the solution. Страница входа должна появиться в браузере.The Log in page should appear in the browser.

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

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

  3. Нажмите кнопку зарегистрировать в правом верхнем углу страницы, чтобы создать нового пользователя в приложении.Click Register in the upper-right corner of the page to create a new user in the application.

    Ссылка для регистрацииRegister link

    Ссылка для регистрацииRegister link

  4. На странице Регистрация введите имя пользователя и пароль, а затем нажмите кнопку зарегистрировать.In the Register page, enter a User name and Password, and then click Register.

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

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

  5. Приложение регистрирует новую учетную запись, и пользователь проходит проверку подлинности и перенаправляется обратно на домашнюю страницу, где отображается первый контрольный вопрос.The application registers the new account and the user is authenticated and redirected back to the home page showing the first quiz question.

  6. Откройте страницу Статистика в новом окне и разместите страницу Домашняя страница и Статистика параллельно.Open the Statistics page in a new window and put the Home page and Statistics page side-by-side.

    Параллельные окнаSide-by-side windows

    Параллельные окнаSide-by-side windows

  7. На домашней странице ответьте на вопрос, щелкнув один из вариантов.In the Home page, answer the question by clicking one of the options.

    Ответ на вопросAnswering a question

    Ответ на вопросAnswering a question

  8. После нажатия одной из кнопок появится ответ.After clicking one of the buttons, the answer should appear.

    Правильный ответ на вопросQuestion answered correct

    Ответ на вопрос правильноQuestion answered correctly

  9. Обратите внимание, что сведения, приведенные на странице Статистика, устарели.Notice that the information provided in the Statistics page is outdated. Обновите страницу, чтобы просмотреть обновленные результаты.Refresh the page in order to see the updated results.

    Страница «Статистика»Statistics page

    Страница «Статистика»Statistics page

  10. Вернитесь в Visual Studio и завершите отладку.Go back to Visual Studio and stop debugging.

Задача 2. Добавление SignalR в головоломку для отображения в сети диаграммTask 2 – Adding SignalR to Geek Quiz to Show Online Charts

В этой задаче вы добавите в решение SignalR и автоматически отправите обновления клиентам при отправке на сервер нового ответа.In this task, you will add SignalR to the solution and send updates to the clients automatically when a new answer is sent to the server.

  1. В меню Сервис в Visual Studio выберите Диспетчер пакетов NuGet, а затем щелкните консоль диспетчера пакетов.From the Tools menu in Visual Studio, select NuGet Package Manager, and then click Package Manager Console.

  2. В окне консоли диспетчера пакетов выполните следующую команду:In the Package Manager Console window, execute the following command:

    Install-Package Microsoft.AspNet.SignalR
    

    Установка пакета SignalRSignalR package installation

    Установка пакета SignalRSignalR package installation

    Note

    При установке пакетов NuGet SignalR версии 2.0.2 из нового приложения MVC 5 необходимо вручную обновить пакеты OWIN до версии 2.0.1 (или выше) перед установкой SignalR.When installing SignalR NuGet packages version 2.0.2 from a brand new MVC 5 application, you will need to manually update OWIN packages to version 2.0.1 (or higher) before installing SignalR. Для этого можно выполнить следующий скрипт в консоли диспетчера пакетов:To do this, you can execute the following script in the Package Manager Console:

    get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
    

    В будущих выпусках SignalR зависимости OWIN будут автоматически обновлены.In a future release of SignalR, OWIN dependencies will be automatically updated.

  3. В Обозреватель решенийразверните папку « скрипты » и обратите внимание, что файлы SignalR. JS добавлены в решение.In Solution Explorer, expand the Scripts folder and notice that the SignalR js files were added to the solution.

    Ссылки на JavaScript SignalRSignalR JavaScript references

    Ссылки на JavaScript SignalRSignalR JavaScript references

  4. В Обозреватель решенийщелкните правой кнопкой мыши проект Жееккуиз , выберите добавить | создать папкуи назовите ее центры.In Solution Explorer, right-click the GeekQuiz project, select Add | New Folder, and name it Hubs.

  5. Щелкните правой кнопкой мыши папку концентраторы и выберите Добавить | Новый элемент.Right-click the Hubs folder and select Add | New Item.

    Добавить новый элементAdd new item

    Добавить новый элементAdd new item

  6. В диалоговом окне " Добавление нового элемента " выберите C# визуальный элемент | Интернет | Узел SignalR в левой области выберите класс концентратора SignalR (v2) в центральной области, назовите файл StatisticsHub.CS и нажмите кнопку Добавить.In the Add New Item dialog box, select the Visual C# | Web | SignalR node in the left pane, select SignalR Hub Class (v2) from the center pane, name the file StatisticsHub.cs and click Add.

    ![Диалоговое окно "Добавление нового элемента"](real-time-web-applications-with-signalr/_static/image12.png "Диалоговое окно "Добавление нового элемента"")Add new item dialog box

    Диалоговое окно "Добавление нового элемента"Add new item dialog box

  7. Замените код в классе статистикшуб следующим кодом.Replace the code in the StatisticsHub class with the following code.

    (Фрагмент кода — реалтимесигналр-EX1-статистикшубкласс)(Code Snippet - RealTimeSignalR - Ex1 - StatisticsHubClass)

    namespace GeekQuiz.Hubs
    {
        using Microsoft.AspNet.SignalR;
    
        public class StatisticsHub : Hub
        {
        }
    }
    
  8. Откройте Startup.CS и добавьте следующую строку в конец метода конфигурации .Open Startup.cs and add the following line at the end of the Configuration method.

    (Фрагмент кода — реалтимесигналр-EX1-мапсигналр)(Code Snippet - RealTimeSignalR - Ex1 - MapSignalR)

    public void Configuration(IAppBuilder app)
    {
        this.ConfigureAuth(app);
        app.MapSignalR();
    }
    
  9. Откройте страницу StatisticsService.CS в папке Services и добавьте следующие директивы using.Open the StatisticsService.cs page inside the Services folder and add the following using directives.

    (Фрагмент кода — реалтимесигналр-EX1-усингдирективес)(Code Snippet - RealTimeSignalR - Ex1 - UsingDirectives)

    using Microsoft.AspNet.SignalR;
    using GeekQuiz.Hubs;
    
  10. Чтобы уведомить подключенных клиентов об обновлениях, сначала необходимо получить объект контекста для текущего соединения.To notify connected clients of updates, you first retrieve a Context object for the current connection. Объект Hub содержит методы для отправки сообщений одному клиенту или вещания всем подключенным клиентам.The Hub object contains methods to send messages to a single client or broadcast to all connected clients. Добавьте следующий метод в класс статистикссервице для передачи статистических данных.Add the following method to the StatisticsService class to broadcast the statistics data.

    (Фрагмент кода — реалтимесигналр-EX1-нотифюпдатесмесод)(Code Snippet - 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);
        }
    }
    

    Note

    В приведенном выше коде вы используете произвольное имя метода для вызова функции на клиенте (т. е. updateStatistics).In the code above, you are using an arbitrary method name to call a function on the client (i.e.: updateStatistics). Указанное имя метода интерпретируется как динамический объект, что означает отсутствие в нем IntelliSense или проверку во время компиляции.The method name that you specify is interpreted as a dynamic object, which means there is no IntelliSense or compile-time validation for it. Выражение вычисляется во время выполнения.The expression is evaluated at run time. При выполнении вызова метода SignalR отправляет клиенту имя метода и значения параметров.When the method call executes, SignalR sends the method name and the parameter values to the client. Если клиент имеет метод, совпадающий с именем, вызывается этот метод и ему передаются значения параметров.If the client has a method that matches the name, that method is called and the parameter values are passed to it. Если на клиенте не найден соответствующий метод, ошибка не возникает.If no matching method is found on the client, no error is raised. Дополнительные сведения см. в руководстве по API концентраторов signalr ASP.NET.For more information, refer to ASP.NET SignalR Hubs API Guide.

  11. Откройте страницу TriviaController.CS в папке Controllers и добавьте следующие директивы using.Open the TriviaController.cs page inside the Controllers folder and add the following using directives.

    using GeekQuiz.Services;
    
  12. Добавьте следующий выделенный код в метод действия POST .Add the following highlighted code to the Post action method.

    (Фрагмент кода — реалтимесигналр-EX1-нотифюпдатескалл)(Code Snippet - 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 внутри представлений | Домашняя папка.Open the Statistics.cshtml page inside the Views | Home folder. Откройте раздел Scripts и добавьте следующие ссылки на скрипты в начале раздела.Locate the Scripts section and add the following script references at the beginning of the section.

    (Фрагмент кода — реалтимесигналр-EX1-сигналрскриптреференцес)(Code Snippet - RealTimeSignalR - Ex1 - SignalRScriptReferences)

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

    Note

    При добавлении в проект Visual Studio SignalR и других библиотек сценариев диспетчер пакетов может установить версию файла сценария SignalR, более позднюю по сравнению с версией, приведенной в этом разделе.When you add SignalR and other script libraries to your Visual Studio project, the Package Manager might install a version of the SignalR script file that is more recent than the version shown in this topic. Убедитесь, что ссылка на скрипт в коде совпадает с версией библиотеки скриптов, установленной в проекте.Make sure that the script reference in your code matches the version of the script library installed in your project.

  14. Добавьте выделенный ниже код, чтобы подключить клиент к концентратору SignalR и обновить данные статистики при получении нового сообщения от концентратора.Add the following highlighted code to connect the client to the SignalR hub and update the statistics data when a new message is received from the hub.

    (Фрагмент кода — реалтимесигналр-EX1-сигналрклиенткоде)(Code Snippet - 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>
    }
    

    В этом коде вы создаете прокси-сервер концентратора и регистрируете обработчик событий для прослушивания сообщений, отправленных сервером.In this code, you are creating a Hub Proxy and registering an event handler to listen for messages sent by the server. В этом случае Вы прослушиваете сообщения, отправленные с помощью метода updateStatistics .In this case, you listen for messages sent through the updateStatistics method.

Задача 3. Запуск решенияTask 3 – Running the Solution

В этой задаче будет запущено решение, чтобы убедиться, что представление статистики автоматически обновляется с помощью SignalR после ответа на новый вопрос.In this task, you will run the solution to verify that the statistics view is updated automatically using SignalR after answering a new question.

  1. Чтобы запустить решение, нажмите клавишу F5.Press F5 to run the solution.

    Note

    Если вы еще не вошли в приложение, войдите в систему с учетной записью пользователя, созданного в задаче 1.If not already logged in to the application, log in with the user you created in Task 1.

  2. Откройте страницу Статистика в новом окне и разместите страницу Домашняя страница и Статистика параллельно, как показано в задаче 1.Open the Statistics page in a new window and put the Home page and Statistics page side-by-side as you did in Task 1.

  3. На домашней странице ответьте на вопрос, щелкнув один из вариантов.In the Home page, answer the question by clicking one of the options.

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

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

  4. После нажатия одной из кнопок появится ответ.After clicking one of the buttons, the answer should appear. Обратите внимание, что статистические данные на странице обновляются автоматически после ответа на вопрос с обновленной информацией без необходимости обновления всей страницы.Notice that the Statistics information on the page is updated automatically after answering the question with the updated information without the need to refresh the entire page.

    Страница статистики обновлена после ответаStatistics page refreshed after answer

    Страница статистики обновлена после ответаStatistics page refreshed after answer

Упражнение 2. масштабирование с помощью SQL ServerExercise 2: Scaling Out Using SQL Server

При масштабировании веб-приложения обычно можно выбирать между возможностями масштабирования и масштабирования.When scaling a web application, you can generally choose between scaling up and scaling out options. Увеличение масштаба означает использование более крупного сервера с большим количеством ресурсов (ЦП, ОЗУ и т. д.), а масштабирование означает добавление дополнительных серверов для работы с нагрузкой.Scale up means using a larger server, with more resources (CPU, RAM, etc.) while scale out means adding more servers to handle the load. Проблема в последнем заключается в том, что клиенты могут перенаправляться на разные серверы.The problem with the latter is that the clients can get routed to different servers. Клиент, подключенный к одному серверу, не будет принимать сообщения, отправленные с другого сервера.A client that is connected to one server will not receive messages sent from another server.

Эти проблемы можно решить с помощью компонента, называемого объединительной платой, для пересылки сообщений между серверами.You can solve these issues by using a component called backplane, to forward messages between servers. После включения объединительной платы каждый экземпляр приложения отправляет сообщения в объединительную плату, а Объединительная плата перенаправляет их в другие экземпляры приложения.With a backplane enabled, each application instance sends messages to the backplane, and the backplane forwards them to the other application instances.

В настоящее время существует три типа объединительных плат для SignalR:There are currently three types of backplanes for SignalR:

  • Служебная шина Windows Azure.Windows Azure Service Bus. Служебная шина — это инфраструктура обмена сообщениями, позволяющая компонентам обмениваться слабо связанными сообщениями.Service Bus is a messaging infrastructure that allows components to send loosely coupled messages.
  • SQL Server.SQL Server. SQL Serverная Объединительная плата записывает сообщения в таблицы SQL.The SQL Server backplane writes messages to SQL tables. Объединительная плата использует Service Broker для эффективного обмена сообщениями.The backplane uses Service Broker for efficient messaging. Однако он также работает, если Service Broker не включена.However, it also works if Service Broker is not enabled.
  • Redis.Redis. Redis — это хранилище "ключ — значение" в памяти.Redis is an in-memory key-value store. Redis поддерживает шаблон публикации/подписки ("Pub/resubscribe") для отправки сообщений.Redis supports a publish/subscribe ("pub/sub") pattern for sending messages.

Каждое сообщение отправляется через шину сообщений.Every message is sent through a message bus. Шина сообщений реализует интерфейс имессажебус , который предоставляет абстракцию публикации и подписки.A message bus implements the IMessageBus interface, which provides a publish/subscribe abstraction. Объединительные платы работают, заменяя имессажебус по умолчанию на шину, предназначенную для этой объединительной платы.The backplanes work by replacing the default IMessageBus with a bus designed for that backplane.

Каждый экземпляр сервера подключается к объединительной плате через шину.Each server instance connects to the backplane through the bus. При отправке сообщения он переходит на объединительную плату, а Объединительная плата отправляет его на каждый сервер.When a message is sent, it goes to the backplane, and the backplane sends it to every server. Когда сервер получает сообщение от объединительной платы, он сохраняет сообщение в его локальном кэше.When a server receives a message from the backplane, it stores the message in its local cache. Затем сервер доставляет сообщения клиентам из своего локального кэша.The server then delivers messages to clients from its local cache.

Дополнительные сведения о работе объединительной платы SignalR см. в этой статье.For more information about how the SignalR backplane works, read this article.

Note

Существует несколько сценариев, в которых Объединительная плата может стать узким местом.There are some scenarios where a backplane can become a bottleneck. Ниже приведены некоторые типичные сценарии SignalR.Here are some typical SignalR scenarios:

  • Широковещательная рассылка сервера (например, биржевая тикер). в этом сценарии хорошо работает Объединительная плата, поскольку сервер управляет скоростью отправки сообщений.Server broadcast (e.g., stock ticker): Backplanes work well for this scenario, because the server controls the rate at which messages are sent.
  • Клиент-клиент (например, чат). в этом сценарии Объединительная плата может стать узким местом, если количество сообщений масштабируется с учетом количества клиентов; то есть, если скорость передачи сообщений пропорционально увеличению числа клиентов, присоединяемых к нему.Client-to-client (e.g., chat): In this scenario, the backplane might be a bottleneck if the number of messages scales with the number of clients; that is, if the rate of messages grows proportionally as more clients join.
  • Высокая частота (например, игры в реальном времени). в этом сценарии не рекомендуется использовать объединительную плату.High-frequency realtime (e.g., real-time games): A backplane is not recommended for this scenario.

В этом упражнении вы будете использовать SQL Server для распространения сообщений в приложении для головоломки .In this exercise, you will use SQL Server to distribute messages across the Geek Quiz application. Эти задачи будут выполняться на одном тестовом компьютере, чтобы узнать, как настроить конфигурацию, но для получения полного результата потребуется развернуть приложение SignalR на двух или более серверах.You will run these tasks on a single test machine to learn how to set up the configuration, but in order to get the full effect, you will need to deploy the SignalR application to two or more servers. Необходимо также установить SQL Server на одном из серверов или на отдельном выделенном сервере.You must also install SQL Server on one of the servers, or on a separate dedicated server.

Scale Out с помощью схемы SQL Server

Задача 1. Основные сведения о сценарииTask 1 - Understanding the Scenario

В этой задаче будут запущены 2 экземпляра класса " головоломка ", моделирующие несколько экземпляров IIS на локальном компьютере.In this task, you will run 2 instances of Geek Quiz simulating multiple IIS instances on your local machine. В этом сценарии при ответе на вопросы Trivia в одном приложении обновление не будет уведомлено на странице статистики второго экземпляра.In this scenario, when answering trivia questions on one application, update won't be notified on the statistics page of the second instance. Такое моделирование напоминает среду, в которой приложение развертывается на нескольких экземплярах и использует подсистему балансировки нагрузки для взаимодействия с ними.This simulation resembles an environment where your application is deployed on multiple instances and using a load balancer to communicate with them.

  1. Откройте решение Begin. sln , расположенное в папке Source/EX2-скалингаутвиссклсервер/Begin .Open the Begin.sln solution located in the Source/Ex2-ScalingOutWithSQLServer/Begin folder. После загрузки вы обратите внимание на Обозреватель сервера , что решение имеет два проекта с идентичными структурами, но разными именами.Once loaded, you will notice on the Server Explorer that the solution has two projects with identical structures but different names. Это позволит имитировать выполнение двух экземпляров одного приложения на локальном компьютере.This will simulate running two instances of the same application on your local machine.

    ![Начало решения для имитации 2 экземпляров "высоко" головоломка](real-time-web-applications-with-signalr/_static/image16.png "Начало решения для имитации 2 экземпляров "высоко" головоломка")Begin Solution Simulating 2 Instances of Geek Quiz

    Начало решения для имитации 2 экземпляров "высоко" головоломкаBegin Solution Simulating 2 Instances of Geek Quiz

  2. Откройте страницу свойств решения, щелкнув правой кнопкой мыши узел решения и выбрав пункт Свойства.Open the properties page of the solution by right-clicking the solution node and selecting Properties. В разделе запускаемый проектвыберите Несколько запускаемых проектов и измените значение параметра действие для обоих проектов на Запуск.Under Startup Project, select Multiple startup projects and change the Action value for both projects to Start.

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

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

  3. Чтобы запустить решение, нажмите клавишу F5.Press F5 to run the solution. Приложение запустит два экземпляра класса "высокообъектный тест " на разных портах, имитируя несколько экземпляров одного приложения.The application will launch two instances of Geek Quiz in different ports, simulating multiple instances of the same application. Закрепите один из браузеров слева, а другой — справа от экрана.Pin one of the browsers on left and the other on the right of your screen. Выполните вход с использованием учетных данных или Зарегистрируйте нового пользователя.Log in with your credentials or register a new user. После входа в систему откройте страницу Trivia слева и перейдите на страницу Статистика в браузере справа.Once logged in, keep the Trivia page on the left and go to the Statistics page in the browser on the right.

    Параллельный контрольный опрос

    Параллельный контрольный опросGeek Quiz Side by Side

    Головоломка в разных портах

    Головоломка в разных портахGeek Quiz in Different Ports

  4. Начните отвечать на вопросы в браузере слева, и вы увидите, что страница статистики в правильном браузере не обновляется.Start answering questions in the left browser and you will notice that the Statistics page in the right browser is not being updated. Это обусловлено тем, что SignalR использует локальный кэш для распределения сообщений между клиентами, и этот сценарий имитирует несколько экземпляров, поэтому кэш не используется совместно.This is because SignalR uses a local cache to distribute messages across their clients and this scenario is simulating multiple instances, therefore the cache is not shared between them. Можно проверить работоспособность SignalR , проверив те же действия, но используя одно приложение.You can verify that SignalR is working by testing the same steps but using a single app. В следующих задачах будет настроена Объединительная плата для репликации сообщений между экземплярами.In the following tasks you will configure a backplane to replicate the messages across instances.

  5. Вернитесь в Visual Studio и завершите отладку.Go back to Visual Studio and stop debugging.

Задача 2. Создание объединительной платы SQL ServerTask 2 – Creating the SQL Server Backplane

В этой задаче вы создадите базу данных, которая будет использоваться в качестве объединительной платы для приложения для головоломки .In this task, you will create a database that will serve as a backplane for the Geek Quiz application. Для просмотра сервера и инициализации базы данных будет использоваться Обозреватель объектов SQL Server .You will use SQL Server Object Explorer to browse your server and initialize the database. Кроме того, будет включен Service Broker.Additionally, you will enable the Service Broker.

  1. В Visual Studioоткройте представление меню и выберите Обозреватель объектов SQL Server.In Visual Studio, open menu View and select SQL Server Object Explorer.

  2. Подключитесь к экземпляру LocalDB, щелкнув правой кнопкой мыши узел SQL Server и выбрав пункт Добавить SQL Server... .Connect to your LocalDB instance by right-clicking the SQL Server node and selecting Add SQL Server... option.

    Добавление SQL Server экземпляраAdding a SQL Server Instance

    Добавление SQL Server экземпляра в обозреватель объектов SQL ServerAdding a SQL Server instance to SQL Server Object Explorer

  3. Задайте имя сервера (LocalDB) \V11.0 и оставьте проверку подлинности Windows в качестве режима проверки подлинности.Set the server name to (localdb)\v11.0 and leave Windows Authentication as your authentication mode. Чтобы продолжить, щелкните Подключить .Click Connect to continue.

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

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

  4. Теперь, когда вы подключены к экземпляру LocalDB, необходимо создать базу данных, которая будет представлять SQL Serverную объединительную плату для SignalR.Now that you are connected to your LocalDB instance, you will need to create a database that will represent the SQL Server backplane for SignalR. Для этого щелкните правой кнопкой мыши узел базы данных и выберите команду Добавить новую базу данных.To do this, right-click the Databases node and select Add New Database.

    Добавление новой базы данныхAdding a new database

    Добавление новой базы данныхAdding a new database

  5. Задайте для базы данных имя SignalR и нажмите кнопку ОК , чтобы создать его.Set the database name to SignalR and click OK to create it.

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

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

    Note

    Можно выбрать любое имя для базы данных.You can choose any name for the database.

  6. Для более эффективного получения обновлений от объединительной платы рекомендуется включить Service Broker для базы данных.To receive updates more efficiently from the backplane, it is recommended to enable Service Broker for the database. Service Broker обеспечивает собственную поддержку обмена сообщениями и очередей в SQL Server.Service Broker provides native support for messaging and queuing in SQL Server. Задняя панель также работает без Service Broker.The backplane also works without Service Broker. Откройте новый запрос, щелкнув правой кнопкой мыши базу данных и выбрав пункт создать запрос.Open a new query by right-clicking the database and select New Query.

    Открытие нового запросаOpening a New Query

    Открытие нового запросаOpening a New Query

  7. Чтобы проверить, включена ли Service Broker, запросите столбец _Broker_включен в представлении каталога sys. databases .To check whether Service Broker is enabled, query the is_broker_enabled column in the sys.databases catalog view. Выполните следующий скрипт в недавно открытом окне запроса.Execute the following script in the recently opened query window.

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

    Запрос состояния Service BrokerQuerying the Service Broker Status

    Запрос состояния Service BrokerQuerying the Service Broker Status

  8. Если значение столбца _broker_Enabled в базе данных равно "0", используйте следующую команду, чтобы включить ее.If the value of the is_broker_enabled column in your database is "0", use the following command to enable it. Замените <>базы данных именем, заданным при создании базы данных (например, SignalR).Replace <YOUR-DATABASE> with the name you set when creating the database (e.g.: SignalR).

    ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
    

    Включение Service BrokerEnabling Service Broker

    Включение Service BrokerEnabling Service Broker

    Note

    Если этот запрос выглядит как взаимоблокировка, убедитесь, что к базе данных не подключено ни одного приложения.If this query appears to deadlock, make sure there are no applications connected to the DB.

Задача 3. Настройка приложения SignalRTask 3 – Configuring the SignalR Application

В этой задаче вы настроите свой высокодоступный тест для подключения к объединительной плате SQL Server.In this task, you will configure Geek Quiz to connect to the SQL Server backplane. Сначала необходимо добавить пакет NuGet SignalR. SqlServer и задать строку подключения для базы данных объединительной платы.You will first add the SignalR.SqlServer NuGet package and set the connection string to your backplane database.

  1. Откройте консоль диспетчера пакетов из меню Инструменты > Диспетчер пакетов NuGet.Open the Package Manager Console from Tools > NuGet Package Manager. Убедитесь, что в раскрывающемся списке проект по умолчанию выбран проект жееккуиз .Make sure that GeekQuiz project is selected in the Default project drop-down list. Введите следующую команду, чтобы установить пакет NuGet Microsoft. AspNet. SignalR. SqlServer .Type the following command to install the Microsoft.AspNet.SignalR.SqlServer NuGet package.

    Install-Package Microsoft.AspNet.SignalR.SqlServer
    
  2. Повторите предыдущий шаг, но на этот раз для проекта GeekQuiz2.Repeat the previous step but this time for project GeekQuiz2.

  3. Чтобы настроить SQL Serverную объединительную плату, откройте файл Startup.CS проекта жееккуиз и добавьте следующий код в метод Configure .To configure the SQL Server backplane, open the Startup.cs file of the GeekQuiz project and add the following code to the Configure method. Замените <>базы данных именем базы данных, которое использовалось при создании SQL Server объединительной платы.Replace <YOUR-DATABASE> with your database name you used when creating the SQL Server backplane. Повторите этот шаг для проекта GeekQuiz2 .Repeat this step for the GeekQuiz2 project.

    (Фрагмент кода — реалтимесигналр-EX2-стартупконфигуратион)(Code Snippet - 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 , чтобы запустить их одновременно.Now that both projects are configured to use the SQL Server backplane, press F5 to run them simultaneously.

  5. Опять же, Visual Studio запустит два экземпляра класса « визуальный опрос » на разных портах.Again, Visual Studio will launch two instances of Geek Quiz in different ports. Закрепите один из браузеров слева, а другой — справа от экрана и войдите с помощью своих учетных данных.Pin one of the browsers on the left and the other on the right of your screen and log in with your credentials. Не задерживайте страницу Trivia слева и перейдите к странице статистики в правильном браузере.Keep the Trivia page on the left and go to Statistics pagein the right browser.

  6. Начните отвечать на вопросы в браузере слева.Start answering questions in the left browser. На этот раз страница статистики обновляется благодаря объединительной плате.This time, the Statistics page is updated thanks to the backplane. Переключайтесь между приложениями (Статистика отображается слева, а Trivia — справа) и повторите проверку, чтобы убедиться, что она работает для обоих экземпляров.Switch between applications (Statistics is now on the left, and Trivia is on the right) and repeat the test to validate that it is working for both instances. Задняя панель выступает в качестве общего кэша сообщений для каждого подключенного сервера, и каждый сервер хранит сообщения в собственном локальном кэше для распространения подключенным клиентам.The backplane serves as a shared cache of messages for each connected server, and each server will store the messages in their own local cache to distribute to connected clients.

  7. Вернитесь в Visual Studio и завершите отладку.Go back to Visual Studio and stop debugging.

  8. Компонент объединительной платы SQL Server автоматически создает необходимые таблицы в указанной базе данных.The SQL Server backplane component automatically generates the necessary tables on the specified database. На панели Обозреватель объектов SQL Server откройте базу данных, созданную для объединительной платы (например, SignalR), и разверните ее таблицы.In the SQL Server Object Explorer panel, open the database you created for the backplane (e.g.: SignalR) and expand its tables. Должны отобразиться следующие таблицы:You should see the following tables:

    Таблицы, созданные в объединительной плате

    Таблицы, созданные в объединительной платеBackplane Generated Tables

  9. Щелкните правой кнопкой мыши элемент SignalR. messages_0 Table и выберите Просмотреть данные.Right-click the SignalR.Messages_0 table and select View Data.

    Просмотр таблицы сообщений о объединительной плате SignalR

    Просмотр таблицы сообщений о объединительной плате SignalRView SignalR Backplane Messages Table

  10. При ответе на вопросы Trivia можно увидеть различные сообщения, отправляемые в центр .You can see the different messages sent to the Hub when answering the trivia questions. Объединительная плата распространяет эти сообщения на любой подключенный экземпляр.The backplane distributes these messages to any connected instance.

    Таблица сообщений о объединительной плате

    Таблица сообщений о объединительной платеBackplane Messages Table


СводкаSummary

В этой практической лабораторной работе вы узнали, как добавить SignalR в приложение и отправлять уведомления с сервера на подключенные клиенты с помощью концентраторов.In this hands-on lab, you have learned how to add SignalR to your application and send notifications from the server to your connected clients using Hubs. Кроме того, вы узнали, как масштабировать приложение с помощью компонента объединительной платы при развертывании приложения в нескольких ЭКЗЕМПЛЯРАХ служб IIS.Additionally, you learned how to scale out your application by using a backplane component when your application is deployed in multiple IIS instances.