May 18, 2009 at Thinkit Live
During the influx of “Habrauser users” on thinkit.ru several times a request was made to tell how the “live broadcast” was implemented (it was called chat, but it’s not really a chat - we didn’t have a goal to make a chat, and in general we consider chat a useless venture). In fact, the implementation is simple to the point of frenzy, therefore, it will be interesting only to novice developers.
“Live” - these are three lines of text, and the “place” where you can write, the added text shifts the text that was, that is, one line up. the top line is lost when adding a new one. Why is it so, - initially, the line was one, and we just allowed us to write arbitrary text in the header of the site, then we noticed that we started using this line for communication, - we did not replace what was in it, but added it. Therefore, a little expanded opportunities. Those. “Live broadcast” is an opportunity to chat with people who are right now on the site, an opportunity to tell them something (for example, that the new House MD series 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 simple to the point.
From the point of view of layout, “live broadcast” represents three divs under which input is located. Borders are removed from the input, and a picture with “clouds” is put on the background. For divas, a different color of the text is set to give the impression that the text "melts" or "fades away" going 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 press return / enter, and if so, we execute an AJAX request to the server, with the contents of the input as a parameter. After successful execution of the request, the data returned by the server replaces the contents of three divs with text. In addition, so that the text is updated if nothing is sent, we create a PeriodicalExecuter, which sends a request to the server every 15 seconds and receives the text “broadcast”.
It is also simple and ordinary. It was decided to use a file for data storage (a quick solution was needed, I did not want to create a separate one in the table, well, that is, ordinary laziness). If the file does not exist, or it was not possible to restore the array from it (unserialize), then we assume that we have the 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 what we got to the end of the array, having previously turned the special. HTML characters in HTML entities, stripslashes are needed because we know that magic_quotes_gpc (quotes escaping) is enabled on our particular server, i.e. we remove the escaping (for portability of this code, you need to check if these magic quotes are included). Then save the serialized representation of the array to a file.
Regardless of how the page is requested, we print out in JSON form (to make it convenient to use this from JavaScript, by literally writing eval and receiving the object) the current contents of our "ether".
This is how simple it is. We hope that this article will help someone add interactivity to the page.
So, what is “live broadcast” in general?
“Live” - these are three lines of text, and the “place” where you can write, the added text shifts the text that was, that is, one line up. the top line is lost when adding a new one. Why is it so, - initially, the line was one, and we just allowed us to write arbitrary text in the header of the site, then we noticed that we started using this line for communication, - we did not replace what was in it, but added it. Therefore, a little expanded opportunities. Those. “Live broadcast” is an opportunity to chat with people who are right now on the site, an opportunity to tell them something (for example, that the new House MD series 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 simple to the point.
Client part
From the point of view of layout, “live broadcast” represents three divs under which input is located. Borders are removed from the input, and a picture with “clouds” is put on the background. For divas, a different color of the text is set to give the impression that the text "melts" or "fades away" going 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 press return / enter, and if so, we execute an AJAX request to the server, with the contents of the input as a parameter. After successful execution of the request, the data returned by the server replaces the contents of three divs with text. In addition, so that the text is updated if nothing is sent, we create a PeriodicalExecuter, which sends a request to the server every 15 seconds and receives the text “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 side
It is also simple and ordinary. It was decided to use a file for data storage (a quick solution was needed, I did not want to create a separate one in the table, well, that is, ordinary laziness). If the file does not exist, or it was not possible to restore the array from it (unserialize), then we assume that we have the 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 what we got to the end of the array, having previously turned the special. HTML characters in HTML entities, stripslashes are needed because we know that magic_quotes_gpc (quotes escaping) is enabled on our particular server, i.e. we remove the escaping (for portability of this code, you need to check if these magic quotes are included). Then save the serialized representation of the array to a file.
$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: ""}');Regardless of how the page is requested, we print out in JSON form (to make it convenient to use this from JavaScript, by literally writing eval and receiving the object) the current contents of our "ether".
This is how simple it is. We hope that this article will help someone add interactivity to the page.