úterý 10. července 2007

Tvoříme chat v AJAXu

Do módy proniká tzv. "web 2.0" a s ním i rošíření technologie AJAX. Podíváme se jak s ním pracovat.

Tvoříme chat
Nejdříve si projdeme seznam věcí které budete potřebovat. Zapisovat budeme do těchto tří souborů: index.html (formulář pro odeslání, zobrazení všech příspěvků), ajax.js (veškeré kódy v JS), uloz_prispevek.php (odeslání nového příspěvku do databáze).
Pak je tu samozřejmě už zmíněná databáze. Potřebovat budete tabulku se třemi sloupci: ID, prispevek, nick. Můžete si samozřejmě přidat další sloupce, jako např. datum, ale toto pro pochopení stačí.

Index.html
Jako první musíte načíst soubor s javaskriptem:

<script type="text/javascript" src="ajax.js"></script>
Pak přidejte funkci do tagu BODY:
<body onload="zobraz()">
Co funkce dělá vysvětlím až se k ní dopracujeme.
Pak už stačí přidat formulář pro odeslání nového příspěvku a prázdný span:
<div>
<form action="javascript:get(document.getElementById('chat'));" name="chat" id="chat"> Váš nick: <input type="text" id="nick"/><br />
Vaše zpráva: <input type="text" id="text"/>
<input type="submit" value="Odeslat" />
</form>

<span name="prispecky" id="prispevky">
</span>
</div>
Tím jsme se souborem indes skončili.

Uloz_prispevek.php
Tento soubor obsahuje akorát uložení příspěvku do databáze a výpis všech příspěvků.
<?php
# Pripojeni k databazi
$link = mysql_pconnect('server', 'user', 'password');
$db = mysql_select_db('ajaxchat');
mysql_query("SET NAMES utf8");

# Pokud uzivatel odeslat nejaky text ulozi se prispevek do databaze
if($text != ''){
$uloz = "insert into prispevky
values('', '$text', '$nick')";
$uloz_result = mysql_query($uloz, $link);
}

# Nacteni 10 nejnovejsich zprav
$zobraz_query = "select * from prispevky order by ID desc limit 10";
$zobraz_result = mysql_query($zobraz_query, $link);

# Zobrazeni
while ($zobraz = mysql_fetch_array($zobraz_result)) {
echo
"<p><b>".$zobraz[nick]."</b>
- ".$zobraz[prispevek]."</p>";
}
?>
Ajax.js
Teď se dostáváme k tomu nejdůležitějšímu, k použití AJAXu. Rozebereme si ho po jednodtlivých funkcích.
ms=0;
stav=0;
function zobraz() {
setTimeout("zobraz();",10);


if (stav==0) {
stav=1;
then=new
Date();

then.setTime(then.getTime()-ms);
}else{
stav=0;
now=new
Date();

ms=now.getTime()-then.getTime();
}


// Po kolika sekundach se obnovi vypis prispevku
max_s = 0.5;
s = Math.round(ms / 1000);

if(s > max_s) {
var poststr =
"";

// Obnoveni prispevku
makePOSTRequest('uloz_prispevek.php', poststr);

ms = 0;
}
}
Jednoduchá funkce, která zařídí aby se příspěvky znovunačetli po určitém časovém intervale.
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new
ActiveXObject("Msxml2.XMLHTTP");
} catch
(e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}
}
}
if (!http_request) {
alert('Nepovedlo se navazat spojeni');
return false;
}

http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);

http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http_request.setRequestHeader("Content-length", parameters.length);

http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;

document.getElementById('prispevky').innerHTML = result;
} else {
alert('Pri odeslani zpravy vznikl problem');
}
}
}
Všechny funkce budou použity pro navázání spojení s námi vybraném souboru. To zajišťuje tato funkce:
function get(obj) {

var poststr = "text=" +
encodeURI( document.getElementById("text").value ) +





"&nick=" + encodeURI( document.getElementById("nick").value );

makePOSTRequest('uloz_prispevek.php', poststr);

document.chat.text.value="";

}
Všechny soubory můžete stahovat zde.

Autor: yetty v 7:54

Tagy: , , , , , ,

Žádné komentáře:

Okomentovat

Sponzorované odkazy