Azi sarbatorim 1 zi de nastere.
Comet Push - alternativa mai buna pentru Ajax
O parte dintre noi folosesc de mult Ajax ca unealtă primară pentru transferul de date asincron între client side şi server side. Motivul pentru care această tehnologie a devenit atât de populară este evident. Avantajul tehnologiilor asincrone este evident - putem executa operaţii logice, putem efectua transferuri de date în acelaşi timp cu alte operaţii - fără a bloca browserul, fără a deranja derularea codului efectiv, s.a.m.d.
Avantajele sunt evidenţiate extrem de bine când construim un chat ce actualizează mesajele în timp real. În urmă cu ceva vreme am scris un tutorial despre cât de uşor este să faci un chat "fără refresh" folosind Ajax.
Care este dezavantajul folosirii Ajax?
Ok, poate întrebarea e cam dură însă, deşi Ajax e un standard în domeniul asincroniei, acesta are unele dezavantaje în anumite situaţii. Să luăm chiar cazul prezentat în urmă cu ceva vreme - chatul realtime folosind ajax. Din punct de vedere teoretic, acesta se actualizează la un interval de timp regulat, făcând o nouă cerere de reâncărcare a paginii de fiecare dată. Ok, o încărcare pe secundă nu e mare problemă, dar dacă ne raportăm la câteva sute de utilizatori care fac câte o încărcare pe secundă …. nu sună prea bine.
Practic, au loc multe cereri folosind ajax care mai mult ca sigur nu vor returna nimic pentru că într-o perioadă de x secunde, nimeni nu a mai publicat nimic. Oare nu ar fi ok dacă o tehnologie ar anunţa exact momentul când trebuie să citim date?
Comet push
Comet push reprezintă o tehnologie ce abordează un alt mod al tehnologiilor asincrone (ajax). Pe scurt, să definim utilizatorii ajax ca fiind abonaţi ai un server. Abonaţii ajax sunt nevoiţi să întrebe extrem de des dacă avem articole noi pe server, în vreme ce abonaţii comet push nu se vor stresa cu întrebări pentru că serverul îi va anunţa exact în momentul în care au apărut articole noi (push). Mai jos aveţi diagrama acestei idei. Ciudat este că în România nu prea e mediatizată această tehnologie extrem de utilă. Comet Push a apărut prin 2006 sub această denumire, deşi tehnologia era folosită de ceva vreme.
Mai jos am ataşat o prezentare (destul de mare, ~70 de slideuri) foarte interesantă legată de acest subiect.
Cine foloseşte Comet Push?
În ziua de azi, întrebarea corectă cred că este - cine nu foloseşte Comet Push? Practic tot ce ţine de realtime gen Twitter, Facebook, Google, Meebo, s.a.m.d au integrate diverse protocoale (frameworkuri) ce folosesc principiile comet push.
Totuşi, ce vom studia în acest articol?
Dacă veţi citi puţin despre Comet Push pe wikipedia, veţi intra probabil în ceaţă pentru că acolo sunt prezentate diverse abordări ale acestei idei. Trebuie să menţionăm că, deşi nesuportată încă, Comet Push varianta Streaming este o metodă ce va fi preferată în viitor de mulţi deoarece foloseşte Comet Push varianta node.js şi V8. Mai jos, o altă prezentare tratează acest subiect extrem de bine şi vă explică de ce WebSockets din HTML 5 sunt cele mai rapide, mai scalabile şi mai eficiente aplicaţii tehnologice. Trebuie precizat totuşi că WebSockets sunt suportaţi de Chrome 4, Safari 5 şi Mozilla Firefox 4. Din păcate, acest articol nu va studia încă node.js şi V8, noi rezumându-ne la abordările populare ale acestei tehnologii.
De ce avem nevoie pentru a folosi Comet Push?
Există o grămadă de frameworkuri extrem de bine puse la punct, una mai bună ca cealaltă. Vă recomand să le studiaţi pe toate înainte de a decide ce şi cum să folosiţi. De preferat este să studiaţi şi frameworkurile ce vă oferă posibilitatea creării unui server pentru astfel de evenimente.
Câteva alternative
APE Framework, are şi o listă de aplicaţii făcute în acest framework.
Stream-Hub
PubNub
Cum să faci un chat realtime (fără refresh) folosind Comet Push?
PubNub dispune de un API ce îl pune la dispoziţie pentru crearea fluxurilor de Comet Push. Are câteva funcţii foarte simple:
Subscribe (abonare la fluxul Comet Push)
COD:
// PUBNUB.subscribe( options, callback )
PUBNUB.subscribe({
channel : 'canalul_worldit'
}, function(message) {
//Arata mesajul
console.log(message);
} );
Publish (publica date in canal)
COD:
// PUBNUB.publish( options, callback )
PUBNUB.publish({
channel : 'canalul_worldit',
message : { 'var' : 'date' }
});
UnSubscribe (dezabonare de fluxul de date)
COD:
// PUBNUB.unsubscribe(options)
PUBNUB.unsubscribe({ channel : 'canalul_worldit' });
Trebuie subliniat că PubNub are nevoie de jQuery inclus înainte. Mai multe detalii despre restul funcţiilor (API-ul) PubNub găsiţi aici.
Un chat demo realtime făcut cu PubNub.
Un chat folosind Comet Push şi PubNub aveţi în imaginea de mai jos.
1. Avem nevoie de o cheie ce este generată de PubNub.
Accesaţi site-ul PubNub.com şi căutaţi "Download API". Copiaţi codul generat în footerul paginii. Mai exact, intraţi în index.php şi înlocuiţi linia 91 cu codul oferit de PubNub.
2. Partea server side - fişierul chat.php
COD:
<?php
include_once('config.php');
header ("Content-Type:text/xml");
if(isset($_GET['page']) && $_GET['page'] == 'send') {
$success = '0';
if(isset($_POST['id'], $_POST['username'], $_POST['room'], $_POST['msg'])) {
//parsam valorile
$_POST = clear($_POST);//satinizam variabilele
$time = time();
$success = '1';
$username = $_POST['username'];
$msg = $_POST['msg'];
$id = rand(1,999999999);
include_once('pubnub.php'); //includem clasa pub-nub
//initializam clasa pub nub api-keyurile aferente
$pubnub = new Pubnub( 'pub-key', 'sub-key' );
//publicam
$pubnub->publish(array(
'channel' => $_POST['room'].'_'.$_POST['id'],
'message' => array( 'msg' => '<?xml version="1.0" encoding="ISO-8859-1" ?>
<root timestamp="'.$time.'">
<nmsg>
<id>'.$id.'</id>
<time>'.gmdate('M d Y H:i:s',$time).'</time>
<msg>'.$msg.'</msg>
<author>'.$username.'</author>
</nmsg>
</root>')
));
}
}
?>
Aici are loc mecanismul server side. Practic, noi vom intercepta mesajele prin POST şi le vom publica în canalul PubNub. Acestea vor fi citite de abonaţii la acest canal. Trebuie remarcat că noi nu vom stoca în nici o bază de date comentariile respective. Acest fişier necesită o mică modificare.
Căutaţi linia :
$pubnub = new Pubnub( 'pub-key', 'sub-key' );
şi înlocuiţi cu pub-key şi sub-key cu valorile aferente ce le găsiţi în codul descărcat la pasul 1.
3. Partea client side - formularul
COD:
<div id="chat">
<div id="messages">
</div>
<div id="form_msg">
<span id="success"></span>
<span id="error"></span>
<form name="new_msg_form">
<label for="name">Numele tau: </label><br />
<input type="text" id="name" /><br />
<label for="new_msg">Mesaj :</label><br />
<textarea id="new_msg" cols="50" rows="5"></textarea><br />
<input type="submit" id="submit" value="Trimite mesaj" />
</form>
</div>
</div>
4. Partea client side - PubNub & jquery
COD:
var timestamp = 0;
var room = 'worldit'; //poti edita numele camerei
var channel_id = 1; //poti edita id-ul canalului
$(document).ready(function() {
//inainte de a inchide documentul (reincarca) ne dezabon de la canal
$(window).bind('beforeunload', function() {
unsubscribe();
});
//ne abonam la canal
function subscribe() {
PUBNUB.subscribe({
channel : room+'_'+channel_id
}, function(data) {
//cand primim mesaje procesam
data = data.msg;
timestamp = $(data).find('root').attr('timestamp');
//pentru fiecare mesaj
$(data).find('nmsg').each(function() {
//adaugam mesajul
$('<div class="msg"
id="nmsg_'+$(this).find('id').text()+'">
<img style="float:left; padding:0 5px 5px 5px;" width="50" height="50"
src="resurse/avatar_blank.jpg" />
<span style="display:none;position:absolute;margin-left:5px;">
<a href="">Mersi!</a></span><div
id="msg_author">'+$(this).find('author').text()+',
<small>'+$(this).find('time').text()+'</small>
</div><div id="msg_content">'+$(this).find('msg').text()+'</div>
</div>').appendTo('div#messages');
});
});
}
//functia de dezabonare de la canal
function unsubscribe() {
PUBNUB.unsubscribe({ channel : room+'_'+channel_id });
}
//in momentul in care apasam pe butonul de trimitere a mesajului
$('#form_msg #submit').click(function() {
$('#form_msg #success,#form_msg #error').text('');
//trimitem prin ajax comentariul nou
$.post('chat.php?page=send', {
'id':channel_id, 'username':$('#form_msg #name').
val(), 'msg': $('#form_msg #new_msg').
val(), 'room':room},function(data) {
//daca ni se confirma ca mesajul a fost salvat cu succes anuntam asta
if($(data).find('success').text() == '1') {
$('#form_msg #success').text('Mesajul a fost salvat.');
}
else {
//daca nu, nu
$('#form_msg #error').text('Mesajul nu a fost salvat.');
}
});
//eliminam mesajul scris din textarea
$('#form_msg #new_msg').val('');
return false; //returnam false pentru ca nu dorim
});
//ne abonam efectiv cand se incarca pagina
subscribe();
});
5. Puteţi descărca un chat demo de aici.
Acesta include şi clasa pubnub pentru PHP.
Concluzii
Am ajuns la sfârşitul unui articol destul de interesant şi care merită tratat cu foarte mare atenţie de către voi. Pe parcursul proiectului v-am introdus conceptul Comet Push şi am comparat Ajax, o tehnologie foarte populară, în raport cu principalul candidat - Comet Push. Spre sfârşitul articolului am oferit câteva alternative ce tratează noua tehnologie şi ne-am folosit de una din ele (cam cea mai simplă) pentru a face un chat. Chatul foloşte, ca tehnologii HTML, CSS, PHP, JQuery, Ajax şi Comet Push. Acesta este un demo simplificat la maxim. Informaţiile nu sunt stocate în tabele, nu există un sistem de tratare a userilor. Am considerat că acest lucru nu este necesar într-un articol ce prezintă tehnologia.
Articol preluat de la www.worldit.info
Exista 12 articole asemanatoare, apasati aici pentru lista.
- AJAX cu JSON
- Chat folosind numai PHP & HTML
- Incarcarea imaginilor pe server si afisarea lor folosind Ajax
- Trimitere de date prin GET si POST simultan
- Utilizare Ajax cu date preluate din formulare
- Utilizare Ajax cu POST si PHP
- Utilizare Ajax cu GET si PHP
- Obiectul XMLHttpRequest
- Cum sa faci un chat fara refresh ( folosind PHP si Ajax) ?
- Tips & Tricks Ajax
- Introducere in Ajax
- Exemplu de incarcare a continutului unei pagini prin AJAX
| Nu exista comentarii la acest articol. Fii primul care isi spune parerea. |
