Реализация чата на ASP.NET с использованием Long Polling
Бродя по просторам интернета, на одном из сайтов я увидел простой чат. Просмотрев страницу в FireBug я понял, что никакими апплетами там и не пахнет, а значит чат реализован на простом JavaScript.
Я подключился к нему из нескольких браузеров и удивился, что второй браузер реагирует на сообщения первого практически мгновенно, что напрочь исключало возможность работы этого чата при помощи периодического опроса сервера скриптом на клиентской странице. Ну, или частота этого опроса должна быть настолько высокой, что любой сервер бы просто захлебнулся в этих запросах.
И встал передо мной вопрос – как они это сделали? Как они обеспечили такую высокую скорость отдачи свежих данных? Ведь веб-сервер на то и сервер, что может лишь отвечать на запросы пользователя, но уж никак не самостоятельно инициировать запросы.
Непродолжительный поиск по интернетам дал мне ответ. И ответ этот “Long Polling“, а встречается еще и другое название технологии – Comet.
Итак, как же это работает?
По сути, это все тот же старый добрый AJAX, и использование объекта XmlHttpRequest. С одной большой разницей, заключенной на серверной стороне. Разница состоит вот в чем. Клиент посылает XHR-запрос и длительное время ожидает ответа сервера. А “длительное время” отклика обеспечивает сам сервер, который не сразу отдает данные клиенту, а лишь только тогда, когда у него в очереди появляются свежие данные, то есть когда ему действительно есть что сказать.
Клиент, дождавшись ответа, обрабатывает его (например, отображает сообщение на странице), а затем, без промедления, снова запрашивает сервер. И снова ждет.
Если же подав запрос клиент так и не дождался ответа из-за таймаута, то он снова запрашивает сервер. А откуда этот таймаут? А просто серверу нам нечего ответить, вот он и не отдает клиенту результат запроса. Ждет. Но не дождавшись, разрывает соединение по таймауту. Такая вот несложная схема.
Это и называется Long Polling, то есть – длительный опрос.
Но от слов к делу. Сейчас мы изготовим серверную и клиентскую часть простого интернет-чата, построенного на описанной технологии. Мы подробно рассмотрим работу всего серверного и клиентского кода и даже в конце статьи получим ссылку на вполне работоспособный продукт. Сразу скажу, у него есть некоторые ограничения. Вы, например, не сможете его использовать в режиме сильной нагрузки, то есть наличии одновременно большого количества клиентов. В нем нет схемы очистки “потерянных” соединений. Это лишь работоспособный учебный пример. Все недостающие аспекты кода предлагаю вам на самостоятельную доработку.
Итак… Без особых размышлений приведу здесь листинг кода и объясню принцип его действия.
using System;
using System.Collections.Generic;
// Класс описывающий одно сообщение от клиента и
// метод его сериализации
public class CometMessage
{
public string UserName;
public string Message;
public string Serialize()
{
return "{'user': '" + UserName + "', 'message': '" + Message + "'}";
}
}
// Собственно, серверная часть
public static class CometServer
{
// вспомогательный объект для блокировки ресурсов
// многопоточного приложения
private static Object _lock = new Object();
// Список, хранящий состояние всех подключенных клиентов
private static List<CometAsyncState> _clientStateList =
new List<CometAsyncState>();
// Возвращаем сообщение каждому подключенному клиенту
public static void PushMessage(CometMessage message)
{
lock (_lock)
{
// Пробегаем по списку всех подключенных клиентов
foreach (CometAsyncState clientState in _clientStateList)
{
if (clientState.CurrentContext.Session != null)
{
// И пишем в выходной поток текущее сообщение
clientState.CurrentContext.Response.Write(message.Serialize());
// После чего завершаем запрос - вот именно после этого результаты
// запроса пойдут ко всем подключенным клиентам
clientState.CompleteRequest();
}
}
}
}
// Срабатывает кажды раз при запуске клиентом запроса Long poll
// так как при этом HttpContext клиента изменяется, то надо обновить
// все изменившиеся данные клиента в списке, идентифицируемом по
// гуиду, который у клиента в течение работы остается постоянным
public static void UpdateClient(CometAsyncState state, String guid)
{
lock (_lock)
{
// ищем клиента в списке по его гуиду
CometAsyncState clientState = _clientStateList.Find(s => s.ClientGuid
== guid);
if (clientState != null)
{
// и если он нашелся, то обновляем все его параметры
clientState.CurrentContext = state.CurrentContext;
clientState.ExtraData = state.ExtraData;
clientState.AsyncCallback = state.AsyncCallback;
}
}
}
// Регистрация клиента
public static void RegicterClient(CometAsyncState state)
{
lock (_lock)
{
// Присваиваем гуид и добавляем в список
state.ClientGuid = Guid.NewGuid().ToString("N");
_clientStateList.Add(state);
}
}
// Разрегистрация клиента
public static void UnregisterClient(CometAsyncState state)
{
lock (_lock)
{
// Просто удаляем его из списка
_clientStateList.Remove(state);
}
}
}
Итак:
6-14 строки – инкапсулируют класс сообщения от пользователя, как видим, там еще есть метод, преобразующий объект в JSON-строку. Вообще, по-хорошему, здесь надо пользоваться нормальным JSON-сериализатором, а не городить строку вручную.
Далее идет описание класса CometServer в котором и живет вся серверная логика LongPolling-технологии.
Заметим, что в переменной _clientStateList (строка 24) хранятся все подключенные на данный момент к серверу клиенты.
Метод PushMessage (строка 24) пробегает по всему списку клиентов и пишет в выходной поток каждого переданное ему в качестве аргумента сообщение, естественно, предварительно сериализовав его. После чего для каждого клиента в обязательном порядке вызывается метод CompleteRequest(), который завершает асинхронный запрос, передавая его результаты клиенту.
Метод UpdateClient (строка 51) по полученному им гуиду клиента, находит клиента в списке clientStateList и обновляет все его параметры, такие как HttpContext-например. Этим мы обеспечиваем всегда актуальное состояние списка клиентов, после каждого их реконнекта.
Метод RegicterClient (строка 69) /опечатка вышла в его имени, сами исправите при необходимости:)/ добавляет нового клиента в очередь.
Метод UnregisterClient (строка 80) соответственно – удаляет клиента из очереди. Что вполне законно. Зачем уведомлять клиента о новых сообщениях в чате, если он давно покинул чат?
Дальше идет описание класса CometAsyncState. Зачем мы его создали? Да чтобы хранить такие параметры клиента, как CurrentContext, AsyncCallback и ClientGuid. Ну то есть, чтобы отдельный поток, порожденный в пуле потоков и отвечающий за одного клиента, мог собственно функционировать и взаимодействовать с клиентом. Этот класс, по большому счету, всего лишь набор заглушек для методов интерфейса IAsyncResult плюс метод CompleteRequest(), который вызывает callback-функцию при завершении потока.
using System;
using System.Threading;
using System.Web;
public class CometAsyncState : IAsyncResult
{
// Чтобы было где хранить все это и был создан
// класс-наследник от IAsyncResult
public HttpContext CurrentContext;
public AsyncCallback AsyncCallback;
public object ExtraData;
public string ClientGuid;
private Boolean _isCompleted;
// Конструктор
public CometAsyncState(HttpContext context,
AsyncCallback callback, object data)
{
CurrentContext = context;
AsyncCallback = callback;
ExtraData = data;
_isCompleted = false;
}
// Завершим запрос
public void CompleteRequest()
{
// При завершении запроса просто выставим флаг
// что он завершен
// и вызовем callback
_isCompleted = true;
if (AsyncCallback != null)
{
AsyncCallback(this);
}
}
#region IAsyncResult Members
// И снова видим набор заглушек для интерфейса IAsyncResult
public Boolean CompletedSynchronously
{
get
{
return false;
}
}
public bool IsCompleted
{
get
{
return _isCompleted;
}
}
public object AsyncState
{
get
{
return ExtraData;
}
}
public WaitHandle AsyncWaitHandle
{
get
{
return new ManualResetEvent(false);
}
}
#endregion
}
Осталась малость – клиентский JavaScript. Ниже я приведу его с моими подробными комментариями в самом коде и не буду его так детально разжевывать. Потому что весь он разжеван в начале статьи, где я описывал принцип работы LongPolling.
var clientGuid
$(document).ready(function() {
// Подключаемся после загрузки страницы,
// запускаем первый long polling
Connect();
});
$(window).unload(function() {
// При выгрузке страницы - запрашиваем сервер об отключении
// клиента для экономии ресурсов
Disconnect();
});
// Посылает lonp poll - запрос серверу
function SendRequest() {
var url = './comet.ashx?guid=' + clientGuid;
$.ajax({
type: "POST",
url: url,
// Если запрос завершился успехом, значит сервер сообщил
// о новых событиях - обрабатываем их
success: ProcessResponse,
// При ошибке (например таймауте), снова рекурсивно
// посылаем запрос обеспечивая тем самым непрерывный
// процесс прослушки серверных событий
error: SendRequest
});
}
// Регистрируемся на сервере
function Connect() {
var url = './comet.ashx?cmd=register';
$.ajax({
type: "POST",
url: url,
success: OnConnected,
error: ConnectionRefused
});
}
// Разрегистрируемся на сервере
function Disconnect() {
var url = './comet.ashx?cmd=unregister';
$.ajax({
type: "POST",
url: url
});
}
// Обработка сообщений, принятых с сервера
function ProcessResponse(transport) {
eval('var d=' + transport + ';');
document.getElementById("content").innerHTML +=
' <strong>' + d.user + '</strong> : "' + d.message + '"<br/>';
// После отображения результатов запроса -
// снова циклично делаем запрос.
SendRequest();
}
// После регистрации на сервере сохраняем наш guid и
// посылаем первый long poll запрос на сервер
function OnConnected(transport) {
clientGuid = transport;
SendRequest();
}
// Если подключиться не удалось, то ждем три мекунды
// и опять пробуем подключиться
function ConnectionRefused() {
$("#content").html("не удалось подключиться к серверу.
Попробуем через 3 секунды...");
setTimeout(Connect(), 3000);
}
// Отправка сообщения на сервер
function clickSendMessage() {
var userName = document.getElementById("userName").value;
var message = document.getElementById("message").value;
var url = './comet.ashx?cmd=send&message=' + message + '&user=' + userName;
$.ajax({
type: "POST",
url: url
});
}
Ну и разумеется, код серверного хэндлера comet.ashx, который обрабатывает команды клиентского скрипта. Скажу сразу, хэндлер этот асинхронный, а потому унаследован не от IHttpHandler, а от IHttpAsyncHandler
< %@ WebHandler Language="C#" Class="CometAsyncHandler" %>
using System;
using System.Web;
using System.Threading;
public class CometAsyncHandler : IHttpAsyncHandler,
System.Web.SessionState.IRequiresSessionState
{
#region IHttpAsyncHandler Members
public IAsyncResult BeginProcessRequest(HttpContext ctx,
AsyncCallback cb, Object obj)
{
// Готовим объект для передачи его в QueueUserWorkItem
CometAsyncState currentAsyncState =
new CometAsyncState(ctx, cb, obj);
// Добавляем в тредпул новый ждущий поток
ThreadPool.QueueUserWorkItem(new WaitCallback(RequestWorker),
currentAsyncState);
return currentAsyncState;
}
public void EndProcessRequest(IAsyncResult ar)
{
}
#endregion
#region IHttpHandler Members
// IHttpHandler Members - просто пустые заглушки,
// так как нам не требуется реализация синхронных методов
public bool IsReusable
{
get
{
return true;
}
}
public void ProcessRequest(HttpContext context)
{
}
#endregion
// Основная функция рабочего потока
private void RequestWorker(Object obj)
{
// obj - второй параметр
// при вызове ThreadPool.QueueUserWorkItem()
CometAsyncState state = obj as CometAsyncState;
string command =
state.CurrentContext.Request.QueryString["cmd"];
string guid =
state.CurrentContext.Request.QueryString["guid"];
switch (command)
{
case "register":
// Регистрируем клиента в очереди сообщений
CometServer.RegicterClient(state);
state.CurrentContext.Response.Write(
state.ClientGuid.ToString());
state.CompleteRequest();
break;
case "unregister":
// Удаляем клиента из очереди сообщений
CometServer.UnregisterClient(state);
state.CompleteRequest();
break;
case "send":
// Отсылка сообщения
string message =
state.CurrentContext.Request.QueryString["message"];
string userName =
state.CurrentContext.Request.QueryString["user"];
CometServer.PushMessage(new CometMessage() {
Message = message, UserName = userName });
state.CompleteRequest();
break;
default:
// При реконнекте клиента
if (guid != null)
{
CometServer.UpdateClient(state, guid);
}
break;
}
}
}
Основная логика программы кроется в методе RequestWorker (строки 51-95), который в зависимости от полученной с клиента команды, выполняет либо регистрацию/разрегистрацию клиента, либо отправку сообщения. Либо обновление данных о клиенте при его реконнекте.
Здесь вы можете скачать готовый работающий проект чата. Для того, чтобы его протестировать, просто запустите его в двух страницах браузера и попробуйте в одном окошке отправить сообщение. Наблюдайте при этом за вторым окошком.
Вот и все. Надеюсь, что статья оказалось полезной для вас.
Прочтите еще: