Руководство. Начало работы с SignalR 1.x и MVC 4

Патрик Флетчер, Тим Teebken

В этом руководстве показано, как использовать ASP.NET SignalR для создания приложения чата в режиме реального времени. Вы добавите SignalR в приложение MVC 4 и создадите представление чата для отправки и отображения сообщений.

Обзор

В этом руководстве описывается разработка веб-приложений в режиме реального времени с ASP.NET SignalR и ASP.NET MVC 4. В этом руководстве используется тот же код приложения чата, что и учебник по началу работы SignalR, но показано, как добавить его в приложение MVC 4 на основе шаблона Интернета.

В этом разделе описаны следующие задачи разработки SignalR:

• Добавление библиотеки SignalR в приложение MVC 4.
• Создание класса концентратора для отправки содержимого клиентам.
• Использование библиотеки SignalR jQuery на веб-странице для отправки сообщений и отображения обновлений из концентратора.

На следующем снимке экрана показано готовое приложение чата, работающее в браузере.

Разделы:

• Настройка проекта
• Запуск примера
• Проверка кода
• Дальнейшие действия

Настройка проекта

Prerequisites:

• Visual Studio 2010 с пакетом обновления 1 (SP1), Visual Studio 2012 или Visual Studio 2012 Express. Если у вас нет Visual Studio, ознакомьтесь со страницей загрузок ASP.NET, чтобы получить бесплатный инструмент разработки Visual Studio 2012 Express.
• Для Visual Studio 2010 установите ASP.NET MVC 4.

В этом разделе показано, как создать приложение ASP.NET MVC 4, добавить библиотеку SignalR и создать приложение чата.

1. 1. В Visual Studio создайте приложение ASP.NET MVC 4, назовите его SignalRChat и нажмите кнопку "ОК".

      Замечание

      В VS 2010 выберите .NET Framework 4 в раскрывающемся списке версий Платформы. Код SignalR выполняется в .NET Framework версии 4 и 4.5.

      2. Выберите шаблон приложения Интернета, снимите флажок "Создать проект модульного теста" и нажмите кнопку "ОК".

      3. Откройте консоль диспетчера > пакетов NuGet Tools > и выполните следующую команду. Этот шаг добавляет в проект набор файлов скриптов и ссылок на сборки, которые обеспечивают функциональные возможности SignalR.

      install-package Microsoft.AspNet.SignalR -Version 1.1.3 4. В обозревателе решений разверните папку "Скрипты". Обратите внимание, что библиотеки скриптов для SignalR добавлены в проект.

      5. В обозревателе решений щелкните проект правой кнопкой мыши и выберите команду "Добавить | Новая папка и добавление новой папки с именем Hubs. 6. Щелкните правой кнопкой мыши папку "Центры" , нажмите кнопку "Добавить" | Класс и создание нового класса C# с именем ChatHub.cs. Этот класс будет использоваться в качестве концентратора сервера SignalR, который отправляет сообщения всем клиентам.

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

   using System;
   using System.Web;
   using Microsoft.AspNet.SignalR;
   
   namespace SignalRChat
   {
       public class ChatHub : Hub
       {
           public void Send(string name, string message)
           {
               // Call the addNewMessageToPage method to update clients.
               Clients.All.addNewMessageToPage(name, message);
           }
       }
   }
   

2. Откройте файл Global.asax для проекта и добавьте вызов метода RouteTable.Routes.MapHubs(); в качестве первой строки кода в методе Application_Start . Этот код регистрирует маршрут по умолчанию для центров SignalR и должен вызываться перед регистрацией других маршрутов. Завершенный Application_Start метод выглядит следующим образом.

   protected void Application_Start()
   {
       RouteTable.Routes.MapHubs();
       AreaRegistration.RegisterAllAreas();
   
       WebApiConfig.Register(GlobalConfiguration.Configuration);
       FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
       RouteConfig.RegisterRoutes(RouteTable.Routes);
       BundleConfig.RegisterBundles(BundleTable.Bundles);
       AuthConfig.RegisterAuth();
   }
   

3. Измените класс, найденный HomeController в Controllers/HomeController.cs , и добавьте следующий метод в класс. Этот метод возвращает представление чата , которое вы создадите на следующем шаге.

   public ActionResult Chat()
   {
       return View();
   }
   

4. Щелкните правой кнопкой мыши в созданном Chat методе и нажмите кнопку "Добавить представление ", чтобы создать файл представления.

5. В диалоговом окне "Добавить представление " установите флажок для использования макета или главной страницы (снимите другие флажки), а затем нажмите кнопку "Добавить".

   

6. Измените новый файл представления с именем Chat.cshtml. После тега <h2> вставьте следующий <раздел div> и @section scripts блок кода на страницу. Этот скрипт позволяет странице отправлять сообщения чата и отображать сообщения с сервера. Полный код представления чата отображается в следующем блоке кода.

   Это важно

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

   @{
       ViewBag.Title = "Chat";
   }
   
   <h2>Chat</h2>
   
   <div class="container">
       <input type="text" id="message" />
       <input type="button" id="sendmessage" value="Send" />
       <input type="hidden" id="displayname" />
       <ul id="discussion">
       </ul>
   </div>
   
   @section scripts {
       <!--Script references. -->
       <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
       <!--Reference the SignalR library. -->
       <script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
       <!--Reference the autogenerated SignalR hub script. -->
       <script src="~/signalr/hubs"></script>
       <!--SignalR script to update the chat page and send messages.--> 
       <script>
           $(function () {
               // Reference the auto-generated proxy for the hub.  
               var chat = $.connection.chatHub;
               // Create a function that the hub can call back to display messages.
               chat.client.addNewMessageToPage = function (name, message) {
                   // Add the message to the page. 
                   $('#discussion').append('<li><strong>' + htmlEncode(name) 
                       + '</strong>: ' + htmlEncode(message) + '</li>');
               };
               // Get the user name and store it to prepend to messages.
               $('#displayname').val(prompt('Enter your name:', ''));
               // Set initial focus to message input box.  
               $('#message').focus();
               // Start the connection.
               $.connection.hub.start().done(function () {
                   $('#sendmessage').click(function () {
                       // Call the Send method on the hub. 
                       chat.server.send($('#displayname').val(), $('#message').val());
                       // Clear text box and reset focus for next comment. 
                       $('#message').val('').focus();
                   });
               });
           });
           // This optional function html-encodes messages for display in the page.
           function htmlEncode(value) {
               var encodedValue = $('<div />').text(value).html();
               return encodedValue;
           }
       </script>
   }
   

7. Сохраните все для проекта.

Запустите пример

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

2. В адресной строке браузера добавьте /home/chat к URL-адресу страницы по умолчанию для проекта. Страница чата загружается в экземпляре браузера и запрашивает имя пользователя.

   

3. Введите имя пользователя.

4. Скопируйте URL-адрес из адресной строки браузера и используйте его для открытия двух дополнительных экземпляров браузера. В каждом экземпляре браузера введите уникальное имя пользователя.

5. В каждом экземпляре браузера добавьте комментарий и нажмите кнопку "Отправить". Комментарии должны отображаться во всех сеансах браузера.

   Замечание

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

6. На следующем снимке экрана показано приложение чата, работающее в браузере.

   

7. В обозревателе решений проверьте узел "Документы скриптов " для работающего приложения. Этот узел отображается в режиме отладки, если вы используете Internet Explorer в качестве браузера. Существует файл скрипта с именем hubs, который библиотека SignalR динамически создает в процессе выполнения. Этот файл управляет взаимодействием между скриптом jQuery и серверным кодом. Если вы используете браузер, отличный от Internet Explorer, вы также можете получить доступ к файлу динамических хабов, перейдя к нему напрямую, например, http://mywebsite/signalr/hubs..

   

Проверка кода

Приложение чата SignalR демонстрирует две основные задачи разработки SignalR: создание концентратора в качестве основного объекта координации на сервере и использование библиотеки SignalR jQuery для отправки и получения сообщений.

Хабы SignalR

В примере кода класс ChatHub является производным от класса Microsoft.AspNet.SignalR.Hub . Производный от класса Hub — это полезный способ создания приложения SignalR. Вы можете создать общедоступные методы в классе концентратора, а затем получить доступ к этим методам, вызвав их из скриптов jQuery на веб-странице.

В коде чата клиенты вызывают метод ChatHub.Send для отправки нового сообщения. Центр, в свою очередь, отправляет сообщение всем клиентам путем вызова Client.All.addNewMessageToPage.

Метод Send демонстрирует несколько основных понятий:

• Объявите открытые методы в хабе, чтобы клиенты могли их использовать.

• Используйте свойство Microsoft.AspNet.SignalR.Hub.Clients для доступа ко всем клиентам, подключенным к этому концентратору.

• Вызовите функцию jQuery на клиенте (например, функцию addNewMessageToPage ), чтобы обновить клиенты.

  public class ChatHub : Hub
  {
      public void Send(string name, string message)
      {
          Clients.All.addNewMessageToPage(name, message);
      }
  }
  

SignalR и jQuery

Файл представления Chat.cshtml в примере кода показывает, как использовать библиотеку SignalR jQuery для взаимодействия с концентратором SignalR. Основные задачи в коде создают ссылку на автоматически созданный прокси-сервер для концентратора, объявляя функцию, которую сервер может вызывать для отправки содержимого клиентам и начинает подключение для отправки сообщений в концентратор.

Следующий код объявляет прокси для хаба.

var chat = $.connection.chatHub;

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

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

В следующем коде показано, как открыть подключение к концентратору. Код запускает подключение, а затем передает его функцию для обработки события нажатия кнопки "Отправить " на странице чата.

$.connection.hub.start().done(function () {
    $('#sendmessage').click(function () {
        // Call the Send method on the hub. 
        chat.server.send($('#displayname').val(), $('#message').val());
        // Clear text box and reset focus for next comment. 
        $('#message').val('').focus();
    });
});

Дальнейшие шаги

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

Чтобы узнать более сложные концепции разработки SignalR, посетите следующие сайты для исходного кода и ресурсов SignalR:

• Проект SignalR
• SignalR Github и Samples
• Вики-сайт SignalR