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

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

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

Обзор

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

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

SignalR упрощает процесс создания приложений в режиме реального времени. Он включает в себя ASP.NET серверную библиотеку и клиентскую библиотеку JavaScript, чтобы упростить управление подключениями к клиентскому серверу и отправлять обновления содержимого клиентам. Библиотеку SignalR можно добавить в существующее приложение ASP.NET для получения функциональных возможностей в режиме реального времени.

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

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

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

Разделы:

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

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

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

Prerequisites:

• Visual Studio 2010 с пакетом обновления 1 (SP1) или 2012. Если у вас нет Visual Studio, ознакомьтесь со страницей загрузок ASP.NET, чтобы получить бесплатный инструмент разработки Visual Studio 2012 Express.
• Microsoft ASP.NET и веб-инструменты 2012.2. Для Visual Studio 2012 этот установщик добавляет новые функции ASP.NET, включая шаблоны SignalR в Visual Studio. Для Visual Studio 2010 с пакетом обновления 1 (SP1) установщик недоступен, но вы можете выполнить руководство, установив пакет NuGet SignalR, как описано в шагах установки.

Следующие действия используют Visual Studio 2012 для создания ASP.NET пустого веб-приложения и добавления библиотеки SignalR:

1. В Visual Studio создайте ASP.NET пустое веб-приложение.

   

2. Откройте консоль диспетчера пакетов , выбрав "Сервис" | Диспетчер пакетов NuGet | Консоль диспетчера пакетов. Введите следующую команду в окно консоли:

   Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

   Эта команда устанавливает последнюю версию SignalR 1.x.

3. В обозревателе решений щелкните проект правой кнопкой мыши, выберите "Добавить |" Класс. Назовите новый класс ChatHub.

4. В обозревателе решений разверните узел "Скрипты". Библиотеки скриптов для jQuery и SignalR отображаются в проекте.

   

5. Замените код в классе 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 broadcastMessage method to update clients.
               Clients.All.broadcastMessage(name, message);
           }
       }
   }
   

6. В обозревателе решений щелкните проект правой кнопкой мыши и нажмите кнопку "Добавить |" Новый элемент. В диалоговом окне "Добавить новый элемент" выберите глобальный класс приложения и нажмите кнопку "Добавить".

   

7. Добавьте следующие using инструкции после предоставленных using инструкций в классе Global.asax.cs.

   using System.Web.Routing;
   using Microsoft.AspNet.SignalR;
   

8. Добавьте следующую строку кода в Application_Start метод Глобального класса, чтобы зарегистрировать маршрут по умолчанию для центров SignalR.

   // Register the default hubs route: ~/signalr/hubs
   RouteTable.Routes.MapHubs();
   

9. В обозревателе решений щелкните проект правой кнопкой мыши и нажмите кнопку "Добавить |" Новый элемент. В диалоговом окне "Добавить новый элемент" выберите html-страницу и нажмите кнопку "Добавить".

10. В обозревателе решений щелкните правой кнопкой мыши только что созданную HTML-страницу и нажмите кнопку "Задать как начальную страницу".

11. Замените код по умолчанию на HTML-странице следующим кодом.

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR Simple Chat</title>
        <style type="text/css">
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <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>
        <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="/Scripts/jquery-1.6.4.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="/Scripts/jquery.signalR-1.1.4.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="/signalr/hubs"></script>
        <!--Add script to update the page and send messages.--> 
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub. 
                var chat = $.connection.chatHub;
                // Create a function that the hub can call to broadcast messages.
                chat.client.broadcastMessage = function (name, message) {
                    // Html encode display name and message. 
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + encodedName
                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</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();
                    });
                });
            });
        </script>
    </body>
    </html>
    

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

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

1. Нажмите клавишу F5, чтобы запустить проект в режиме отладки. HTML-страница загружается в экземпляре браузера и запрашивает имя пользователя.

   

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

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

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

   Замечание

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

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

   

5. В обозревателе решений проверьте узел "Документы скриптов " для работающего приложения. Существует файл скрипта с именем hubs, который библиотека SignalR динамически создает в процессе выполнения. Этот файл управляет взаимодействием между скриптом jQuery и серверным кодом.

   

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

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

Хабы SignalR

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

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

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

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

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

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

  public class ChatHub : Hub
  {
      public void Send(string name, string message)
      {
          // Call the broadcastMessage method to update clients.
          Clients.All.broadcastMessage(name, message);
      }
  }
  

SignalR и jQuery

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

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

var chat = $.connection.chatHub;

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

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

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

$.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 в интернете, развернув их у поставщика услуг хостинга. Корпорация Майкрософт предлагает бесплатный веб-хостинг для до 10 веб-сайтов в бесплатной пробной учетной записи Windows Azure. Пошаговое руководство по развертыванию примера приложения SignalR см. в статье "Публикация примера запуска SignalR в качестве веб-сайта Windows Azure". Подробные сведения о развертывании веб-проекта Visual Studio на веб-сайте Windows Azure см. в статье "Развертывание приложения ASP.NET на веб-сайте Windows Azure". (Примечание. Транспорт WebSocket в настоящее время не поддерживается для веб-сайтов Windows Azure. Если транспорт WebSocket недоступен, SignalR использует другие доступные транспорты, как описано в разделе "Транспорты" раздела "Введение в SignalR".)

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

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