Smitka development

Jednoduchý chat s pomocí AJAXu

Po dvou teoretických úvodech (Využití technologie AJAX a AJAX podruhé)si dnes předvedeme AJAX v praxi. Bude to jednoduchý chat. Jednoduchý ale názorný ;-). Při jeho tvorbě využijeme AJAX+PHP+MySQL. Nejprve se zamyslíme co od něj očekáváme:
  • Bude ukládat jméno, ip, datum a text zprávy
  • Přejeme si aby stahoval pouze nové zprávy
  • Chceme však aby bylo zobrazeno i několik předchozích příspěvků
Nejpre navrhneme tabulku v databázi, zhruba takto:
Návrh tabulky
Nyní k serverovým skriptům. Požadujeme 2 operace - výběr příspěvků a zápis. Zápis je jednoduchý jedná se pouze o vložení záznamu do databáze. Výpis příspěvků již bude o malinko složitější. Musíme rozlišit, zda je nutno vypsat větší i starší příspěvky nebo nové. Aktuální příspěvky můžeme odlišit podle času zadání, nebo podle id, což považuji za lepší. Při každém aktualizování zpráv si tedy uchováme id číslo nejnovějšího příspěvku a při dalším aktualizování si načteme pouze příspvěvky s větším id. Pokud si vyžádáme příspěvek s id=0 načte se jen požadovaný počet nejnovějších zpráv. Skript bude pro jednoduchost generovat přímo HTML kód do stránky.
Náš PHP skript jménem například chat.php může vypadat: /* připojení k databázi */ //získání id, defaultně 0 $lastid=isset($_GET["id"])?$_GET["id"]:0; //zjištění akce (aktualizovat/poslat), defaultně aktualizovat $action=isset($_GET["action"])?$_GET["action"]:"aktualizovat"; switch($action){ case "aktualizovat": //pokud id=0 tak se vybere z databáze 30 nejnovějších příspěvků if ($lastid<=0) $result = mysql_query("SELECT id, ip, name, timestamp, text FROM chat ORDER BY timestamp desc limit 30"); //jinak příspěvky s id větším než zadaným else $result = mysql_query("SELECT id, ip, name, timestamp, text FROM chat WHERE chat.id > {$_GET['id']} ORDER BY timestamp desc"); //pro každý příspěvek se vygeneruje HTML kód while ($zaznam = mysql_fetch_array($result)){ echo "<div title=\"{$zaznam['ip']}\" class=\"styl informací\">".date("d.m H:i:s",$zaznam['timestamp'])." - <strong>{$zaznam['name']}</strong> napsal(a):</div><div class=\"styl příspěvku\">{$zaznam['text']}</div>"; //do proměnné lastid se bude ukládat nejvyšší id $lastid=($lastid>$zaznam['id'])?$lastid:$zaznam['id']; } //na konec je vypsáno nejvyšší aktuální id za oddělovačem, šlo by to samozřejmě udělat i jiným způsobem... echo "|id=$lastid"; break; case "poslat": //pokud jsou vloženy potřebné údaje, je příspěvek vložen do databáze if (isset($_POST["text"]) and isset($_POST["name"]) and $_POST["text"]!=''){ if (mysql_query("INSERT INTO chat VALUES(0,'". $_SERVER["REMOTE_ADDR"]."','".$_POST["name"]."',".strtotime("now").", '".nl2br(htmlspecialchars($_POST["text"]))."')" )) //odpověď pokud se zápis do databáze povedl echo "ok"; } break; } Tak a serverová strana je hotova, můžeme se podívat na klienta a konečně začít s AJAXem ;-).
Budeme potřebovat 2 AJAXové objekty, aby se nehádaly. První pro získávání příspěvků a druhý pro jejich zápis.
Čtecí objekt bude používat metodu GET a bude posílat pouze ID posledního příspěvku, při prvním zavolání se id=0. Ve stránce bude DIV s id=chtext, do něj budeme vkládat příspěvky. Ajax1 (ve funkci zpravy())získá odpověď serveru na požadavek aktualizování příspěvků, rozdělí ho podle oddělovače |id= na 2 části - text příspěvku a id nejnovějšího příspěvku. Text jako HTML přidá do DIVu chtext. ID si uloží pro další volání.
Zapisovací objekt ajax2 metodou POST pošle PHP skriptu obsah nového příspěvku a čeká na odpověď "ok". Po úspěšném uložení aktualizuje příspěvky.
Aktualizování řídí TimeOut ve funkci aktualizovat, který po uplynutí časového intervalu opět zavolá svou funkci a začíná opět odpočítávat.
Podoba AJAXového JavaScriptu: <script type="text/javascript"> //id příspěvku var id=0; //čas obnovování var timer=5000; //čtecí a zapisovací objekt var ajax1 = (window.XMLHttpRequest ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : false)); var ajax2 = (window.XMLHttpRequest ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : false)); //čtení zpráv function zpravy(){ if(!ajax1){ alert("Tady AJAX neběží..."); return true; } ajax1.onreadystatechange= function () {text(); } ; //požadavek na čtené nových příspěvků ajax1.open("GET", "chat.php?action=aktualizovat&id="+id, true); ajax1.send(null); return false; } //zápis zpráv function posli(){ if(!ajax2){ alert("Tady AJAX neběží..."); return true; } ajax2.onreadystatechange= function () {poslano(); } ; ajax2.open("POST", "chat.php?action=poslat", true); ajax2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //poslání hodnot z formuláře ajax2.send("text="+document.form0.text.value+"&name="+document.form0.name.value); return false; } //úkony po poslání zprávy function poslano(){ if (ajax2.readyState == 4){ if(ajax2.status == 200 || ajax2.status==0){ //pokud se zpráva uložila, dojde k vymazání prvku se zprávou if(ajax2.responseText=="ok"){ document.form0.text.value=""; zpravy(); } else alert("Bohužel se nepodařilo zprávu odeslat :-("); } else alert("Chyba: "+ ajax2.status +":"+ ajax2.statusText); } } //vypsání získaných příspěvků function text(){ var txt; var param= new Array(); if (ajax1.readyState == 4){ if(ajax1.status == 200 || ajax1.status==0){ //rozdělení textového řetězce na text a id param=ajax1.responseText.split("|id="); //výpis do DIVu chtext document.getElementById("chtext").innerHTML = param[0] + document.getElementById("chtext").innerHTML; //uložení id nejaktuálnějšího příspěvku id=param[param.length-1]; } else alert("Chyba: "+ ajax1.status +":"+ ajax1.statusText); } } //aktualizace příspěvků function aktualizovat(){ window.setTimeout("aktualizovat()", timer); zpravy(); } </script> Nyní už jen stačí po načtení stránky zavolat funkci aktualizace(), aby náš chat začal fungovat. Ukázka následuje - vypisuje 10 nejnovějších příspěvků, aktualizace probíhá po 30 vteřinách.



Možnosti rozšíření:
  • Propojení s databází uživatelů
  • Změna rychlosti obnovování podle počtu uživatelů
  • Možnost nechat si zobrazit větší historii chatu
  • Nahrazování smajlíků a odkazů, nejlépe na straně serveru

linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development