Ajax ile Basit Sohbet Sayfası
27 Ocak 2006 tarihli, Ajax, Programlama köşesine ait yazı.
Bu aralar pek moda Ajax kullanmak. Çok sevdiğim mad4milk grubunun da Ajax için bir class yazdığını öğrendiğimde, ayrıca sayın Onur Köse’nin sitesini gezdikten ve Ajax yazısını okuduktan sonra daha bir heveslenip ilk denememi yaptım.
Neler Gerekli?
- Prototype .js kodu - burada
- moo.ajax kodu - burada
- Biraz mysql bilgisi (tablo yaratabilecek, php kodu içinde sorgulayabilecek kadar-daha ne kaldı?!)
- Ajax’ın ne olduğu hakkında bilgi (girişteki bağlantıyı kullanabilirsiniz)
- Denemek için apache, php ve mysql yüklü bilgisayar
Veritabanımızı Kuralım
Tabii önce neler yapmak istediğimizi bir düşünmemiz lazım. Basitçe sistemimiz kullanıcı ilk giriş yaptığında ismini alıp bir users tablosuna eklemesi lazım. Farklı kullanıcıların aynı isimle ve/veya IP adresiyle giriş yapabilecek olup olmamasını şimdilik önemsemiyoruz. Onun için bize lazım olan kullanıcı adı (name) ve birazdan kullanacağımız bilgileri son aldığı tarih (lastcheck). Şu şekilde veritabanımızı ve users tablomuzu oluşturabiliriz:
CREATE TABLE users (
name tinytext NOT NULL,
lastcheck int(10) unsigned NOT NULL default ‘0′,
PRIMARY KEY (name)
)
Bunun yanında kullanıcılardan gelen mesajları tutacağımız başka bir tablomuz olması lazım. Mesajın içeriği (text), kimden geldiği (from) ve ne zaman geldiği (date) gerekli özellikler.
msgid int(10) unsigned NOT NULL auto_increment,
`text` text NOT NULL,
`date` int(15) NOT NULL default ‘0′,
`from` tinytext NOT NULL,
PRIMARY KEY (msgid)
)
Veritabanımızı sorunsuz yarattıysak biraz Ajax işlerine bakalım…
moo.ajax Nesnesi
Prototype veya prototype.lite nesnelerine bağımlı çalışan moo.ajax nesnesi bizim için çoğu işi kolaylaştırıyor. Bir ajax isteği oluşturmak için tek yapmamız gereken javascript kodumuza
eklemek. Biraz açıklamak gerekirse:
- url: İsteği yapacağımız dosya, muhtemelen bir .php dosyası
- postBody: options içinde tanımlanır, istek dosyasına göndereceğimiz parametreleri belirtir. Örnek ‘isim=Onur&status=2′
- method: post ya da get olarak tanımlanabilir. Varsayılan posttur.
- onComplete: İstek tamamlandığında çağırılacak javascript fonksiyonudur. Dönen değer fonksiyona
requestparametresiyle yollanır. - update: Dönen değerin bir DOM nesnesine atanmasını sağlayabilirsiniz.
Veritabanı bağlantısı
Veritabanı bağlantısını db.php dosyasında yapıp kullanacağımız yerlere include("db.php"); ekliyoruz. Dosyanın içeriği şöyle:
$dbhost=’localhost’;
$dbuser=’root’;
$dbpass=”;
$dbname=’msgdb’;
$connection = @mysql_connect($dbhost, $dbuser, $dbpass)
or die (”DB Error”);
$db = @mysql_select_db($dbname, $connection)
or die (”DB Error”);
?>
Giriş sayfası - index.php
index.php sayfasında yalnızca kullanıcının ismini sorup login.php sayfasına yönlendiriyoruz:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>Mesaj Sayfası</title>
</head>
<body>
Lütfen isminizi girin:<br />
<form method=”get” action=”login.php”>
<input type=”text” name=”isim” id=”isim” size=”30″ />
</form>
</body>
</html>
send.php
send.php olarak kaydedeceğimiz sayfayı her mesaj gönderdiğimizde Ajax yardımıyla çağıracağız.
include(”db.php”);
$user=$HTTP_POST_VARS[’user’];
$msg=$HTTP_POST_VARS[’msg’];
mysql_query(”INSERT INTO msgs VALUES (”,’$msg’,'”.time().”‘,’$user’)”);
?>
online.php
Programımızın, verilen zaman kadar bekleyip çevrimiçi kullanıcıları sohbet sayfamıza bildiren kısmıdır. Kullanıcılar listenin elemanları olarak gönderilirler.
sleep($HTTP_POST_VARS[’sleep’]);
include(”db.php”);
$msg_query = mysql_query(”SELECT * FROM users”);
$retval = “”;
if(mysql_numrows($msg_query)>0) {
while($msg = mysql_fetch_array($msg_query)){
$retval .= “<li><strong>”.$msg[’name’].”</strong></li>\n”;
}
}
echo $retval;
?>
check.php
Yeni bir mesaj var mı diye kontrol ettiğimiz dosyadır. Girişte çevrimdışı olan kullanıcıları ve üzerinden 2dk geçmiş mesajları tablolardan temizler. Sonra kullanıcının en son ne zaman mesajları kontrol ettiğini öğrenir. Bu zamandan sonraki mesajları seçip yine liste elemanları şeklinde gönderir.
sleep($HTTP_POST_VARS[’sleep’]);
include(”db.php”);
$user=$HTTP_POST_VARS[’user’];
$timeout = time() - 30; // 30 saniyede timeout
$delete = mysql_query(”DELETE FROM users WHERE lastcheck<$timeout”);
$timeout -= 90; // 2 dakika önce gönderilen mesajları temizle
$delete = mysql_query(”DELETE FROM msgs WHERE date<$timeout”);
$lastcheck_query = mysql_query(”SELECT lastcheck FROM users WHERE name=’$user’”);
$lastcheck = mysql_fetch_array($lastcheck_query);
$lastcheck = $lastcheck[’lastcheck’];
mysql_query(”UPDATE users SET lastcheck=’”.time().”‘ WHERE name=’$user’”);
$msg_query = mysql_query(”SELECT * FROM msgs WHERE date>$lastcheck ORDER BY date ASC”);
$retval = “”;
if(mysql_numrows($msg_query)>0) {
while($msg = mysql_fetch_array($msg_query)){
$retval .= “<li><strong>$msg[from]:</strong> $msg[text]</li>\n”;
$lastcheck=$msg[’date’];
}
mysql_query(”UPDATE users SET lastcheck=’$lastcheck’ WHERE name=’$user’”);
}
echo $retval;
?>
login.php
Bu sayfa giriş sayfasından sonra yüklenir ve tüm mesajlaşma olaylarını kontrol eder. Bölüm bölüm gitmek gerekirse, öncelikle veritabanı bağlantısını yapıp giriş yapan kullanıcıyı users tablosuna eklememiz gerekiyor:
$user=$HTTP_GET_VARS[’isim’];
$insert = mysql_query(”INSERT INTO users VALUES (’$user’,'”.time().”‘)”);
?>
Daha sonra sayfa header’ını ve stilleri tanımlamamız, .js dosyalarını eklememiz ve Ajax kodlarını yazmamız gerekiyor.
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>Mesaj Sayfası > <?=$user?></title>
/* Javascript Tanımlamaları */
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”moo.ajax.js”></script>
/* Kullanacağımız Ajax fonksiyonları */
<script type=”text/javascript”>
function parse(request){
new Insertion.Bottom(’msglist’, request.responseText);
new ajax(’check.php’, {postBody: ’sleep=5&user=<?=$user?>’, onComplete: parse});
}
function online(request){
Element.update(’onlineusers’, request.responseText);
new ajax(’online.php’, {postBody: ’sleep=10′, onComplete: online});
}
window.onload = function(){
new ajax(’send.php’, {postBody: ‘user=AcikBilgi&msg=<?=$user?> odaya giris yapti’, onComplete: clear});
new ajax(’check.php’, {postBody: ’sleep=0&user=<?=$user?>’, onComplete: parse});
new ajax(’online.php’, {postBody: ’sleep=0′, onComplete: online});
Element.hide(’statusContainer’);
}
function send(){
$(’statusMsg’).innerHTML = “Gönderiliyor…”;
Element.show(’statusContainer’);
new ajax(’send.php’, {postBody: ‘user=<?=$user?>&msg=’+$F(’msg’), onComplete: clear});
}
function clear(){
Element.hide(’statusContainer’);
Field.clear(’msg’);
}
</script>
/* Stil tanımlamaları */
<style type=”text/css” media=”screen”>
#page {
width: 600px;
margin: 0 auto 0 auto;
position: relative;
border: 1px solid #EAEAEA;
font-family: Verdana, Arial, sans;
font-size: 0.8em;
}
#online {
background-color: #eeeeee;
width: 150px;
padding: 0px 10px 10px 10px;
float:right;
}
#online h2 {
font-size: 12px;
}
.statusContainer {
background-color: #ffd363;
width: 100px;
}
span.statusMsg {
font-family: Verdana;
font-size: 11px;
font-weight: bold;
margin: 2px 6px;
}
ul {
list-style: none;
}
</style>
</head>
Dosyanın geri kalan kısmında ise dokümanın body’si var. Dikkat ederseniz listelerin içleri boş.
<div id=”page”>
<div id=”online”>
<h2>Online Kişiler</h2>
<ul id=”onlineusers”>
</ul>
</div>
<ul id=”msglist”>
</ul>
<br />
<form name=”msgform” id=”msgform” method=”get” action=”" onsubmit=”javascript:send(); return false;”>
<input type=”text” name=”msg” id=”msg” size=”60″ />
</form>
<div id=”statusContainer” class=”statusContainer”>
<span class=”statusMsg” id=”statusMsg”>Yükleniyor…</span>
</div>
</div>
</body>
</html>
Sonuç?
Çok basit, çok üstünkörü bir Ajax uygulaması yapmış oldum. Farklı sekmelerde kendi kendime yaptığım sohbetten bir görüntüyü koymayı ihmal etmiyorum.
Kaynaklar
Yorumlar - Başa Dön
3 Şubat 2006
Eline sağlık, güzel bir örnek oldu. delicious’daki hesabıma bu sayfayı ekledim. :^D Birde çalışan halini görebilseydik güzel olacaktı.
3 Şubat 2006
Ya güzel olurdu tabii ki ama maalesef çoğu host gibi benimki de rails çalıştırmama izin vermiyor. Kodu direkt kopyalarsanız çalışır, demek isterim ama garanti veremem, hem tavsiye de etmem. Mantığını anlayıp kendiniz basit ToDoList veya Blog tarzı uygulamalar geliştirirseniz çok daha yararlı olacaktır.
7 Şubat 2006
çok iti bir sohbet aği hep böyle anması tileğiyle
7 Mart 2006
üstad, elinize sağlık. çok hoş bir makale. onurun yazısından sonra php ile ilintili bir yazı çok iyi oldu. tebrik ediyorum.
19 Haziran 2006
selam
Benim html de sohbet sayfası yapmam lazım.acilen bunu yapmak zorundayım okulu bıtırebılmem için ama bu konuda hiç bir bilgim yok sizin yardımlarınızı beklıyorum.tşk.
3 Temmuz 2006
selam
Benim html veya php de sohbet sayfası yapmam lazım.acilen bunu yapmak zorundayım okulu bıtırebılmem için ama bu konuda hiç bir bilgim yok sizin yardımlarınızı beklıyorum.tşk.
3 Temmuz 2006
Sanırım okulu bitirebilmeniz için bunları öğrenip kendi uygulamanızı yazmanız en iyi yöntem olacaktır. Size yol göstermesi açısından php ve js ile çalışan, database’e ihtiyaç duymayan, çok basit bir shoutbox önerebilirim: YShout. Kolaylıklar…
5 Kasım 2006
merhaba
yeni yeni ajax öğreniyorum ve örneğinize ihtiyacım var yapmayı denedim olmadı bana yapılmış olarak bu örneği gönderebilirseniz yada biryere link olarak verebilirseniz çok sevinirim
teşekkürler
10 Kasım 2006
Bende örneği denedim. Eğer direkt olarak copy-paste yaptıysan tırnaklar işaretleri sorun çıkartıyor bunları düzeltmen lazım. Ayrıca veri tabanınıda kodla değil elle yapmanı öneririm
21 Aralık 2006
merhaba arkadaşlar. tamamını ajax ile yaptığım siteye bir de chat sayfası koymak istiyordum. buradaki örneği incelemeye çalıştım. acak hatalarla karşılaştım. sanırım sorun tırnaklarda. ama tek tek baktım. bi türlü kağnağını bulamadım. sizden bi ricam olacak. bana bu scriptın tırları düzeltilmiş bir biçimde(:D) emrekayit@yahoo.com adresine gönderirseniz sevinirim. şimdiden teşekkürler.
6 Ekim 2007
çok sağolun demek isterdim ama gerçekden çalışmıyor hep ” ve ‘ karakterlerinin yanlış süzülmesi yüzünden olmuş onları ben düzelttim ama yinede çalışmadı … çalışan örneği mailime atarsanız sevinirim… qhostemre@hotmail.com
18 Kasım 2007
merhaba diğer arkadaşlarla yanı kanıdayım baya düzeltme yaptım amam kod yinede
çalışmada bencede düzelttikten sonra site upload edip o şekilde örnek kodlar yayınlarsan seviniriz
tekrar teşk.
14 Ocak 2008
selam
bu yazdığınız uygulamanın tek kişiyle yani anlatayım.üye girişi yaptıktan sonra üyeleri aratıp buluyorum.istediğim üyenin sayfasındaki bir butona tıklayınca sadece onunla sohbet etmek istiyorum.siberalem.com da var.bu istediğim tarzda sohbet yazılımı varmı?
22 Haziran 2008
innerHTML ile yazdıramıyorum. div alanında tıkladıgımda gönderiliyor yazmıyor.