ASP.NET Push notifications с помощью SignalR

В качестве примера будем писать примитивный чат с мгновенным уведомлением всех клиентов с помощъю библиотеки SignalR

подготовка

Для этого в Visual Studio создадим пустой проект ASP.NET Empty Web Application

Сама библиотека SignalR добавляется в одну строку через NuGet:

Install-Package SignalR
это добавит в проект скрипты jQuery и SignalR а также reference-ссылку на dll SignalR и другие dll необходимые для её работы.

пишем серверный код

Добавляем произвольный класс — я назову его Chat, он должен наследовать из класса Hub, определенного в SignalR.Hubs

public class Chat : Hub
{
    public void Send(dynamic message)
    {
      Clients.AddChatMessage(message);
    }
}

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

в нашем случае определяем простетький Send, и для удобства патаметр будет dynamic.

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

пишем клиентский код

добавляем в проект html документ — chat.html, с простенькой разметкой

<input type="text" id="msg" />
<input type="button" id="broadcast" value="broadcast" />

<ul id="messages">
</ul>

добавляем ссылки на необходимые JS скрипты, при этом /signalr/hubs должен быть добавлен после signalr.js, так ка зависит от него.

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.signalR.min.js" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>

далее собственно сам клиенский скрипт:

<script type="text/javascript">
  $(function () {
    //получаем прокси объект чат
    var chat = $.connection.chat;

    //определяем метод, вызываемый с серверной част,
    //параметры естественно должы совпадать
    chat.AddChatMessage = function (msg) {
      $("#messages").append("<li>" + msg.name + " : " + msg.text + "</li>");
    };

    //обработчик клика - вызывает метод прокси объекта определенного на сервере
    $("#broadcast").click(function () {
      var msg = {
        'name': $.browser.version,
        'text': $('#msg').val()
      };
      chat.send(msg);
    });

    //стартуем все хабы
    $.connection.hub.start();
  });
</script>

в качестве имени каждого клиента я использовал версию браузера.

в результате

все клиенты получают push-style уведомления одновременно, как видно на видео:

вместо заключения

получить примеры использования SignalR можно набрав
Install-Package SignalR.Sample

скачать исходники рассмотренного в статье и в видео примера — здесь

с Новым 2012 Годом!