Прямой эфир по версии Thinkit

Во время наплыва «хабрапользователей» на thinkit.ru несколько раз прозвучала просьба рассказать как реализован «прямой эфир» (его называли чатом, но это не совсем чат — у нас не было цели делать чат, да и вообще считаем чат бесполезной затеей). На самом деле реализация проста до безумия, поэтому интересна будет разве что начинающим разработчикам.

Итак, что вообще представляет собой «прямой эфир»

«Прямой эфир» — это три строчки текста, и «место», куда можно писать, добавляемый текст смещает на одну строку вверх текст, который был, т.е. самая верхняя строка теряется при добавлении новой. Почему именно так, — изначально, строка была одна, и мы просто позволяли написать произвольный текст в шапке сайта, потом мы обратили внимание что этой строкой начали пользоваться для общения, — не заменяли то что в ней было, а дописывали. Поэтому немного расширили возможности. Т.е. «прямой эфир» это возможность пообщаться с людьми которые прямо сейчас находятся на сайте, возможность сообщить им что-нибудь (например, что вышла новая серия House M.D. :)



Собственно реализация состоит из двух частей — серверной части, реализованной на PHP, и клиентской части, реализованной на JavaScript, при помощи Prototype. Обе части просты донельзя.

Клиентская часть

С точки зрения верстки, «прямой эфир» представляет собой три div-а, под которыми расположен input. У input-а убраны границы а на фон положена картинка с «облачками». Для дивов задан разный цвет текста, чтобы создавалось впечатление что текст «тает» или «угасает» уходя вверх.

С точки зрения JavaScript все тоже чрезвычайно просто. Слушаем событие “keypress” для нашего input-а, проверяем что нажали return/enter, и если это так, то выполняем AJAX запрос серверу, с содержимым input-а в качестве параметра. После успешного выполнения запроса, данные которые вернул сервер замещают содержимое трех div-ов с текстом. Кроме того, чтобы текст обновлялся если ничего не отсылают, создаем PeriodicalExecuter, который каждые 15 секунд отправляет на сервер запрос и получает текст «эфира».

function update_live(t)
{
var r=eval('('+t.responseText+')');
$('message0').update(r.m0);
$('message1').update(r.m1);
$('message2').update(r.m2);
}
Event.observe($('message'), 'keypress', function(event) {
if (event.keyCode == Event.KEY_RETURN)
{
new Ajax.Request("/admin/message.php",{
method: 'post',
parameters: {msg: $('message').value},
onSuccess: update_live
});
$('message').value='';
}});
new PeriodicalExecuter(function()
{
new Ajax.Request("/admin/message.php",{
method: 'get',
parameters: {t: (new Date()).getTime()} ,
onSuccess: update_live
})
},15);
new Ajax.Request("/admin/message.php",{method: 'get',parameters: {t: (new Date()).getTime()} ,onSuccess: update_live});


Серверная часть

Тоже проста и обыденна.

$m=@file_get_contents(PATH_TO_FILE);
if( ($o=@unserialize($m))===FALSE )
$o=Array('Первый IT-портал города','Прямой эфир','Люди говорят...');

if($_SERVER['REQUEST_METHOD']=='POST')
{
$_POST['msg']=trim($_POST['msg']);
if(empty($_POST['msg']))
exit();
array_shift($o);
array_push($o, htmlspecialchars(stripslashes($_POST['msg'])));
file_put_contents($_SERVER['DOCUMENT_ROOT'].'/message.txt',serialize($o));
}
echo('{');
for($i=0;$i<3;$i++)
echo('m'.$i.': "'.addcslashes($o[$i], '"').'", ');
echo('m: ""}');

Для хранения данных было решено использовать файл (нужно было быстрое решение, создавать отдельную в таблицу не хотелось, ну т.е. обычная лень). Если файла нет, или не получилось восстановить из него массив (unserialize), то считаем что у нас содержимое по-умолчанию (массив, заданный вверху кода).

Если страница запрошена методом POST, то убираем из массива первый элемент, а в конец массива добавляем то что получили, предварительно превратив спец. символы HTML в HTML-сущности (entities), stripslashes нужно т.к. знаем что на нашем конкретном сервере включены magic_quotes_gpc (экранирование кавычек), т.е. мы убираем экранирование (для портируемости этого кода, нужно проверять включены ли эти самые magic quotes). Затем сохраняем сериализованное представление массива в файл.

Независимо от того, каким способом страница запрошена, выводим в JSON-форме (чтобы было удобно пользоваться этим из JavaScript, буквально написав eval и получив объект) текущее содержимое нашего «эфира».

Вот так вот всё просто. Надеемся, что кому-то эта статья поможет добавить интерактива на страничку.