Live on Thinkit

During the influx of “habra users”, thinkit.ru was asked several times to tell how the “live broadcast” was implemented (it was called chat, but this was not exactly chat - we didn’t have a goal to do chat, and generally consider chat to be a useless idea). In fact, the implementation is simple to the point of insanity, so it will be interesting only for novice developers.

So, what is a “live broadcast”?

The “live broadcast” is three lines of text, and the “place” to which you can write, the text being added shifts the text up one line, which was, i.e. the topmost line is lost when adding a new one. Why exactly this way - initially, the line was one, and we just allowed to write arbitrary text in the header of the site, then we noticed that they started using this line for communication - they did not replace what was in it, but added it. Therefore, a little expanded opportunities. Those. “Live broadcast” is an opportunity to talk with people who are right now on the site, the opportunity to tell them something (for example, that a new series of House MD has been released :)
')


The implementation itself consists of two parts - the server part, implemented in PHP, and the client part, implemented in JavaScript, using Prototype. Both parts are utterly simple.

Client part

From the point of view of layout, “live” is the three divs, under which the input is located. The input borders have been removed and a picture with “clouds” is put in the background. For divs, a different text color is set to give the impression that the text “melts” or “fades away” as it goes up.

From the point of view of JavaScript, everything is also extremely simple. We listen to the “keypress” event for our input, check that we pressed return / enter, and if so, then execute the AJAX request to the server, with the contents of the input as a parameter. After successful completion of the request, the data that returned the server replaces the contents of three divs with text. In addition, to update the text if nothing is sent, we create a PeriodicalExecuter, which sends a request to the server every 15 seconds and receives the text of the broadcast.

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});


Server part

Too simple and ordinary.

$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: ""}');

To store the data, it was decided to use the file (it was necessary to have a quick solution, I did not want to create a separate one in the table, well, that is, ordinary laziness). If there is no file, or it was not possible to restore an array from it (unserialize), then we consider that we have default content (the array specified at the top of the code).

If the page is requested by the POST method, then we remove the first element from the array, and add to the end of the array what we received, having first converted the special. HTML characters in HTML entities, stripslashes are needed because we know that magic_quotes_gpc (quotation escaping) is enabled on our particular server, i.e. we remove the screening (for portability of this code, it is necessary to check whether these magic quotes are included). Then save the serialized array representation to a file.

Regardless of how the page is requested, we output in JSON-form (so that it is convenient to use this from JavaScript, literally writing eval and receiving an object) the current content of our “ether”.

This is how everything is simple. We hope that this article will help someone to add interactivity to the page.