[تطبيق أجاكس] دردشة باستخدام الاجاكس

سعد السيد احمد · 08-10-2008, 02:03 PM

التطبيق الثاني : دردشة باستخدام الأجاكس
بعد ما عملنا قبل عدة أيام تطبيق التصويت باستخدام الأجاكس اليوم رح نكمل المشوار في سلسلة التطبيقات
و أنصح يلي ما شاف التطبيق السابق وحابب يشوف هذا التطبيق يشوفه التطبيق الأول لان الأوامر اللي شرحتها فيه مارح أرجع أشرحها هنا حتى ما أضيع وقت فيها
وبالنسبة للسكربت يلي رح نعمله الأن حاولت أني اخليه خفيف قدر الإمكان دون أي تعقيدات بحيث نعمل أبسط سكربت دردشة يعتمد يعتمد كلياً على الاجاكس
والحمد لله مارح أعتمد على أي مكتبة جافا سكربت في هذا التطبيقات (ولا التطبيقات القادمة بإذن الله)

بسم الله نبدأ يأساسيات السكربت:
الملفات التي نحتاج إلى إنشائها :
1-display.php (الملف الرئيسية والذي يتضمن الملفات الأساسية الأخرى)
2-display.js (ملف الجافا سكربت الخاص بdisplay.php)
3-chatbox.php (الملف الذي سوف يقوم بعرض المحادثة داخل الدردشة)
4-chatbox.js (ملف الجافا سكربت الخاص بchatbox.php)
5-online.php (الملف الذي سيقوم بعرض المستخدمين المتصلين حالياً)
6-online.js (ماف الجافا سكربت الخاص بonline.php)
7-config.php (الملف الذي سوف يحتوي على معلومات الإتصال بقاعدة البيانات)

أولا نحتاج إلى إنشاء الجدولين التاليين في قاعدة البيانات :

كود:

 
CREATE TABLE `ajax_chat` (
  `id` int(255) NOT NULL auto_increment,
  `name` varchar(255) collate latin1_general_ci NOT NULL default '',
  `chattext` varchar(255) collate latin1_general_ci NOT NULL default '',
  `time` int(10) NOT NULL,  
PRIMARY KEY  (`id`)
) ENGINE=MyISAM;
CREATE TABLE `ajax_online` (
  `id` int(255) NOT NULL auto_increment,
  `name` varchar(255) collate latin1_general_ci NOT NULL default '',
  `time` int(10) NOT NULL,  
PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

الأول لحفظ المحادثات و الثاتي لحفظ المستخدمين المتصلين
نبدأ الأن بالملف الأصغر config.php :

كود PHP:

  <?

$host="localhost"; 

$dbname="ajax";

$dbuser="almaster";   

$dbpass=""; 

$con=mysql_connect($host,$dbuser,$dbpass)

or die("CONNECTION FAILED");

mysql_select_db($dbname,$con)

or die("can't connect to DB");

  $time = time();

?>

عليك ان تقوم بتعديل معلومات الإتصال بما يتناسب مع قاعدتك (بالنسبة للمتغير time فسوف أحتاجه في العديد من الملفات لذلك فضلت وضعه هنا على ان اقوم بتكراره

)
نتوجه الان إلى ملف display.php نضيف أولاً الهيدر و سوف نحتاج في هذا السكربت إلى استخدام الجلسات (session) لذلك نضيف بدايته أيضاً ولا ننسى تتضمين ملف config.php و display.js :

كود بلغة HTML:

<?
session_start();
 
 include"config.php";
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>CHAT</title> <script src="display.js"></script> </head>

و أضيف الbody ورح يكون عليه حدث (event) عند إغلاق الصفحة وهو القيام بتسجيل الخروج عن طريق الأجاكس بحيث لو واحد طلع من الدردشة بدون سابق إنذار

كود بلغة HTML:

<body onunload="javascript:logout()">

في هذه الصفحة أيضاً سوف يكون هناك تسجيل دخول و خروج لذلك نضع الأوامر الخاص بهم ورح يكونوا php :
أولا تسجيل الدخول :

كود PHP:

  if($_POST['name']){

 $name=$_POST['name']; 

 $select=mysql_query("SELECT * FROM ajax_online where name='$name' ") or die("can't get ajax_online");

  $row1=mysql_fetch_array($select);

 $name2=$row1["name"];

    if ($name2=="$name"){

    echo"الاسم الذي اخترته مستخدم!<br />";

    echo"<div align='center' dir='rtl' id='login'>

الاسم: <input   onkeydown='javascript:keyDown(\"login\")'   name='name' type='text' id='name'  size='15' />

<br />

<input onclick='javascript:login()'  type='button' value='دخول' />

</div>

";

    die();

     }else{

 

$_SESSION['name']=$name;

$_SESSION['logintime']=$time;

  $insert = "INSERT INTO ajax_online  (id,name,time)

VALUES(NULL,'$name','$time')";

$result = mysql_query($insert);

$chattext="(قام بتسجيل دخوله)";

  $insert = "INSERT INTO ajax_chat  (id,name,chattext,time)

VALUES(NULL,'$name','$chattext','$time')";

$result = mysql_query($insert);

}}

لاحظوا الشرط إذا كان هناك متغير مرسل عن طريق post بإسم name رح يتم تحقق الشرط و تبدأ عملية تسجيل الدخول
و أول شي يتم عمله هو التحقق إذا كان هناك مستخدم بنفس الاسم في غرفة الدردشة طبعا إذا وجد رح يوقف عملية تسجيل الدخول و يطبع ان الاسم مستخدم مع ال(input) الخاص بتسجيل الدخول مرة أخرى ويعمل الأمر die(); حتى لا يظهر أي شي أخر (هذا الinput موجود في نفس الصفحة لكن لسى ما مر علينا

)
طبعا إذا ما تحقق الشرط وكان الاسم غير مستخدم رح يتم حفظ الجلسة (session) ووحددت متغيرين الاول هو بإسم المستخدم و الثاني بوقت دخوله (رح نعرف بعدين ليش حفظناه )
وثم يضاف في جدول المستخدمين (ajax_online) اسمه مع الوقت أيضاً
ويضاف في جدول المحادثة (ajax_chat) عبارة أن المستخدم قام بتسجيل الدخول
بهكذا نكون إنتهينا من تسجيل دخول المستخدمين . الان تسجيل خروجهم :

كود PHP:

  if($_GET['logout']){

$name=$_SESSION['name'];

 if($name){

 $delete=mysql_query("DELETE FROM `ajax_online` WHERE `name` = '$name' LIMIT 1") or die("can't delete from ajax_online");

 $chattext="(قام بتسجيل خروجه)";

   $insert = "INSERT INTO ajax_chat  (id,name,chattext,time)

 VALUES(NULL,'$name','$chattext','$time')";

 $result = mysql_query($insert);

 session_unset();

 session_destroy();

 }

}

بتسجيل الخروج رح نعتمد على الGet بحيث تقدر نخليها رابط
المهم هنا الشرط بالتأكد إذا كان المتغير logout على شكل get موجود فيتم تنفيذ الأوامر الموجودة
وأولهم يتم التأكد إذا كان المتغير name يلي في الجلسة موجود فعلا عندها يتم حذف الاسم من جدول المستخدمين (ajax_online) و كتابة عبارة تنبه بتسجيل خروج المستخدم في جدول المحادثة (ajax_chat) ومن ثم مسح الجلسة كاملة
بهذا يكون المستخدم خرج من المحادثة
الأن نضيف التأكد إذا كانت الجلسة غير موجودة لعرض الinput الخاص بتسجيل الدخول :

كود PHP:

  if(!$_SESSION['name']){

echo"<div align='center' dir='rtl' id='login'>

الاسم: <input   onkeydown='javascript:keyDown(\"login\")'   name='name' type='text' id='name'  size='15' />

<br />

<input onclick='javascript:login()'  type='button' value='دخول' />

</div>

";

die();

  

}

بتلاحظوا كيف انه لايوجد form أصلاً لإرسال البيانات لأننا مارح نحتاجه رح يتم تسجيل الدخول عن طريق الاجاكس لاحظوا أيضاً الحدث الموجود عند زر الإرسال( onclick='javascript:login()' ) وكذلك فيه حدث عند مربع الإدخال ويتم تنفيذه عند النقر بالكيبورد . ليش ؟؟
هذا حتى يتم تشغيل الفنكشن نفسه عند ضغط enter لما نوصل ملف display.js رح تشوفوهم

تجميع كافة أومر الphp في الصفحة :

كود PHP:

  <? 

if($_POST['name']){

 $name=$_POST['name']; 

 $select=mysql_query("SELECT * FROM ajax_online where name='$name' ") or die("can't get ajax_online");

  $row1=mysql_fetch_array($select);

 $name2=$row1["name"];

    if ($name2=="$name"){

    echo"الاسم الذي اخترته مستخدم!<br />";

    echo"<div align='center' dir='rtl' id='login'>

الاسم: <input   onkeydown='javascript:keyDown(\"login\")'   name='name' type='text' id='name'  size='15' />

<br />

<input onclick='javascript:login()'  type='button' value='دخول' />

</div>

";

    die();

     }else{

 

$_SESSION['name']=$name;

$_SESSION['logintime']=$time;

  $insert = "INSERT INTO ajax_online  (id,name,time)

VALUES(NULL,'$name','$time')";

$result = mysql_query($insert);

$chattext="(قام بتسجيل دخوله)";

  $insert = "INSERT INTO ajax_chat  (id,name,chattext,time)

VALUES(NULL,'$name','$chattext','$time')";

$result = mysql_query($insert);

}}

if($_GET['logout']){

$name=$_SESSION['name'];

 if($name){

 $delete=mysql_query("DELETE FROM `ajax_online` WHERE `name` = '$name' LIMIT 1") or die("can't delete from ajax_online");

 $chattext="(قام بتسجيل خروجه)";

   $insert = "INSERT INTO ajax_chat  (id,name,chattext,time)

 VALUES(NULL,'$name','$chattext','$time')";

 $result = mysql_query($insert);

 session_unset();

 session_destroy();

 }

}

if(!$_SESSION['name']){

echo"<div align='center' dir='rtl' id='login'>

الاسم: <input   onkeydown='javascript:keyDown(\"login\")'   name='name' type='text' id='name'  size='15' />

<br />

<input onclick='javascript:login()'  type='button' value='دخول' />

</div>

";

die();

  

}

?>

باقي الان إننا نحط الiframe يلي رح يحضر الصفحات الباقية مع حقل إرسال النصوص:

كود بلغة HTML:

<a  href="javascript:logout()" >خروج</a> <div id="chat" align="center" dir="rtl"> <iframe src="online.php"  name="t1" width="150"height="300" scrolling="Yes" frameborder="1" id="t1" border="0">
Your browser do not support frames :( 
</iframe> <iframe src="chatbox.php"  name="t1" width="500"height="300" scrolling="Yes" frameborder="1" id="t1" border="0">
Your browser do not support frames :( 
</iframe> <br /> <input onkeydown="javascript:keyDown('sendchat')"   name="chattext" type="text" id="chattext"  size="25" /> <input onclick="javascript:sendchat()"  type="button" value="إرسال" /> </div><body> </html>

نفس الشي في إرسال النصوص هنا رح يكون اجاكس و أيضاً وضعت حدث (event) عند ضغط الكيبورد في المربع بحيث لو أن واحد استخدم الenter بدال الضغط على زر الإرسال
وبالنسبة للرابط الموجودة في الأعلى فهو لتسجيل الخروج ويعتمد على الاجاكس أيضاً

الان لملف display.js رح نضع الفنكشن الخاصة بالأجاكس حتى نحدد كيفية إرسال البيانات بالنسبة للمتصفح و أيضا فنكشن تغيير المحتوى ومافي داعي أشرحهم لأني سبق و فعلت في التطبيق السابق :

كود:

 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("login").innerHTML=xmlHttp.responseText; 
 }
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

الان بقي إضافة العمليات التالية (تسجيل الدخول - تسجيل الخروج - إرسال النصوص-القيام بتشغيل العمليات التي فيها حقول كتابة بضغط enter)
نبدأ أولا بتسجيل الدخول:

كود:

 
function login()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
 
var name = document.getElementById('name');
var url="display.php?"
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
text="name="+name.value
xmlHttp.send(text) 
}

لاجديد في هذا الفنكشن من الذي تعلنها في التطبيق السابق غير أننا جعلنا إرسال البيانات عن طريق post و أيضاً إضافة هذا الكود الجديد لتحديد الهيدر المرسل مع البيانات :

كود:

xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

ولاحظ كيف أرسلنا المتغيرات عن طريق post :

كود:

text="name="+name.value
xmlHttp.send(text)

في التطبيق الماضي لما أرسلناه عن طريق get وضعنا المتغيرات مع الرابط أما في الpost نضعها داخل ال xmlHttp.send()
الأن نضع فنكشن تسجيل الخروج :

كود:

 
function logout(){
 xmlHttp=GetXmlHttpObject()
 var url="display.php?"
 url=url+"logout=logout"
 xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null) 
 
}

تسجيل الخروج لا نريد منه سوى إرسال أمرعن طريق get إلى display.php علشان يقوم بتسجيل الخروج ومسح الجلسة
فنكشن إرسال نصوص المحادثة :

كود:

 
function sendchat()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
 
var chattext = document.getElementById('chattext');
var url="chatbox.php?"
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
text="chattext="+chattext.value
xmlHttp.send(text) 
chattext.value = '';
}

هنا شبيه جدا بتسجيل الدخول من حيث الهيدر وكيف نرسل القيمة يلي داخل حقل الكتابة عن طريق الpost لكن أرسلنا المعلومات إلى chatbox.php وكذلك بتلاحظوا نقص السطر :

كود:

xmlHttp.onreadystatechange=stateChanged

لاننا مانريد أن طبع المعلومات يلي رح تجي من الملف chatbox.php (يعني هذا الفنكشن فقط لإرسال النصوص ومارح يقوم بالإستقبال) طيب كيف رح تعرض النصوص الجديدة ؟ صفحة chatbox.php رح تقوم بذلك

كود:

chattext.value = '';

حتى تقوم بتفريغ مربع إدخال النصوص
الان بقي في هذا الملف شرح العملية (function) التي تقوم بتنفيذ العمليات الأخرى عند نقر enter مباشرة وهي:

كود:

function keyDown(func){
k=window.event.keyCode;
 if(k==13){  
 
 if(func=="login"){
  login();
  }
  if(func=="sendchat"){
  sendchat();
  }
 }
}

في مربع إدخال الدردشة

كود:

onkeydown="javascript:keyDown('sendchat')"

وفي مربع تسجيل الدخول

كود:

onkeydown='javascript:keyDown(\"login\")'

عند أي كتابة في الكيبورد داخل المربعات العملية تشتغل وتفحص إذا كان يلي ضغط هو enter ( enter هنا هوا رقم الزر 13 )

كود:

k=window.event.keyCode;
 if(k==13){

طبعاً إذا كان enter عندها رح يتحقق الشرط وعندها يتم فحص المتغير المرسل مع الفنكشن keyDown لأن لكل من تسجيل الدخول و إرسال النصوص عملتين مختلفتين لاحظ كيف :

كود:

 if(func=="login"){
  login();
  }
  if(func=="sendchat"){
  sendchat();
  }

بهذا تنتهي صفحة display.js وهذه هي كاملة لمن أراد أن يتأكد :

كود:

 
function keyDown(func){
k=window.event.keyCode;
 if(k==13){  
 
 if(func=="login"){
  login();
  }
  if(func=="sendchat"){
  sendchat();
  }
 }
}
function login()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
 
var name = document.getElementById('name');
var url="display.php?"
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
text="name="+name.value
xmlHttp.send(text) 
} 
function logout(){
 xmlHttp=GetXmlHttpObject()
 var url="display.php?"
 url=url+"logout=logout"
 xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null) 
 
}
function sendchat()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
 
var chattext = document.getElementById('chattext');
var url="chatbox.php?"
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
text="chattext="+chattext.value
xmlHttp.send(text) 
chattext.value = '';
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("login").innerHTML=xmlHttp.responseText; 
 }
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

الأن بتوجه لملف online.php :
نضع أول شي بداية الجلسة(session) وتضمين ملف الconfig.php وتضمين ملف الجافا سكربت الخاص به مع أكاود الهيدر الأساسية :

كود بلغة HTML:

<?php
session_start();
 $name=$_SESSION['name'];
 include"config.php";
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <script src="online.js"></script> </head>

ثم نضع اوامر الphp لكي نحضر أسماء المستخدمين المتوجدين حالياً من الجدول ajax_online:

كود PHP:

  <?

$select=mysql_query("SELECT * FROM ajax_online  order by id ") or die("can't get ajax_online");

$num=mysql_num_rows($select);

echo"<body><div id='onlineshow' dir=rtl align=right>";

       while ($row=mysql_fetch_object($select))

  {

  echo "$row->name<br />";

  }

echo"</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.1.0</div></body></html>";

?>

لكن كيف رح يتم تحديثهم باستمرار بحيث لو دخل مستخدم جديد على الدردشة ؟؟
السر في ملف الجافا سكربت online.js بحيث رح يتم عمل تحديث للصفحة بطريقة أجاكسية

نتوجه لonline.js الان وهذا هو كامل :

كود:

 
window.onload=refresh();
function refresh()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="online.php?"
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("onlineshow").innerHTML=xmlHttp.responseText; 
a=setTimeout("refresh()",1000);
}
} 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

الشي الجديد فيه هو :
وضعنا أمر لتنفيذ فنكش refresh عند تحميل النافذة

كود:

window.onload=refresh();

وبالنسبة للفنكشن refresh شبيه جداً بسابقاتها من حيث اوامر جلب المعلومات من صفحة محددة بواسطة الاجاكس
وفي فنكشن stateChanged بعد التاكد من أن readyState = 4 و القيام بجلب النص :

كود:

document.getElementById("onlineshow").innerHTML=xmlHttp.responseText;

وضعنا :

كود:

a=setTimeout("refresh()",1000);

بحيث أن الفنكشن refresh سوف تشتغل مرة أخرى بعد مرور ثانية واحدة (1000 حزء من الثانية) وكلما اشتغلت مرة ثانية رح يرجع لهذا الأمر و نشغل الفنكشن مرة أخرى وهكذا تصير في حلقة غير منتهية تقوم بعمل تحديث (refresh) أجاكسي
(لا أعرف إذا كان هذا رح يأثر على الموقع يلي يشتغل عليه كثير لكن كلها مجرد نصوص صغيرة يتم جلبها كل حوالي ثانية ما اتوقع ان يكون له تأثر كبير )
الأن إلى الملف القبل الأخير chatbox.php:
كالعادة نضيف الهيدر و المتغيرات الرئيسية يلي نحتاجها مع تضمين الملفات :

كود بلغة HTML:

<?php
session_start();
$chattext=$_POST['chattext'];
 $name=$_SESSION['name'];
 $logintime=$_SESSION['logintime'];
  include"config.php"; 
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <script src="chatbox.js"></script> </head>

ومن ثم نضيف أوامر إظهار النصوص + إستقبال نصوص جديدة و إضافتها لقاعدة البيانات :

كود PHP:

  <?

if($chattext){

  $insert = "INSERT INTO ajax_chat  (id,name,chattext,time)

VALUES(NULL,'$name','$chattext','$time')";

$result = mysql_query($insert);

 }else{

$select=mysql_query("SELECT * FROM ajax_chat where time > '$logintime' order by id ") or die("can't get ajax_chat");

$num=mysql_num_rows($select);

echo"<body><div id='chatshow' dir=rtl align=right>";

if($num<14){

$i=0;

do{

echo"<br />";

++$i;

}while($i<14-$num);

}

       while ($row=mysql_fetch_object($select))

  {

  echo " $row->name: $row->chattext <br />";

  }

echo"</div></body></html>";

  }

?>

مثل ما تتذكروا إننا أرسلنا النصوص يلي تكتب في display.php إلى chatbox.php وهذا علشان نشوف إذا كان فيه إرسال و إضافتهم لقاعدة البيانات :

كود PHP:

  if($chattext){

  $insert = "INSERT INTO ajax_chat  (id,name,chattext,time)

VALUES(NULL,'$name','$chattext','$time')";

$result = mysql_query($insert);

 }

وإذا لم يكن هناك إرسال يتم عرض النصوص التي كتب في الدردشة :

كود PHP:

  else{

$select=mysql_query("SELECT * FROM ajax_chat where time > '$logintime' order by id ") or die("can't get ajax_chat");

echo"<body><div id='chatshow' dir=rtl align=right>";

       while ($row=mysql_fetch_object($select))

  {

  echo " $row->name: $row->chattext <br />";

  }

echo"</div></body></html>";

  }

لاحظوا في جلب الدردشة (where time > '$logintime') طلبنا الدردشة التي وقت إضافتها أكبر من وقت دخول المستخدم لإننا لا نريد أن نرى النصوص القديمة التي كتبت و المستخدم لم يكن موجود
الأن إلى الملف الأخير chatbox.js وهو شبيه جداً بonline.js حيث يقوم بعمل الرفرش الأجاكسي لكن طبعا مع إختلاف في اسم الملف و الdiv و وجود أمر جديد فيه أنظر :

كود:

 
window.onload=refresh();
function refresh()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="chatbox.php?"
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("chatshow").innerHTML=xmlHttp.responseText; 
a=setTimeout("refresh()",1000);
window.scroll(0,9999);
}
} 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

الشيء الجديد فيه هو :

كود:

window.scroll(0,9999);

هذا الأمر حت يقوم بإنزال الصفحة إلى أخر شي لانك مثل ما تعرف النصوص الجديدة في الدردشة رح تكون في الأسفل ولما يصير تحديث و يكون فيه نص جديد لازم تنزل الصفحة لتحت حتى نشوف النص لذلك هذا الكود موجود
بهذا نكون إنتهينا من شرح السكربت كامل و الان ننتقل للإضافات :
أ- عمل رسالة الإنتظار :
رح أقوم بعمل رسالة لما المستخدم يقوم بتسجيل دخول للدردشة تطلب منه الإنتظار
نفتح display.php:
أولاً نقوم بإضافة div أسف الdiv الخاص بتسجيل الدخول في

كود PHP:

  if(!$_SESSION['name']){

echo"<div align='center' dir='rtl' id='login'>

الاسم: <input   onkeydown='javascript:keyDown(\"login\")'   name='name' type='text' id='name'  size='15' />

<br />

<input onclick='javascript:login()'  type='button' value='دخول' />

</div>

";

بحيث تصبح

كود PHP:

  if(!$_SESSION['name']){

echo"<div align='center' dir='rtl' id='login'>

الاسم: <input   onkeydown='javascript:keyDown(\"login\")'   name='name' type='text' id='name'  size='15' />

<br />

<input onclick='javascript:login()'  type='button' value='دخول' />

</div>

<div align='center' dir='rtl' id=msg>

</div>

";

مثل مو ملاحظين عطيناه الid=msg
وفي display.js
نتوجه للفنكشن stateChanged ونضع هذا الشرط الجديدreadyState!==4 (تم شرح الreadyState بالتفصيل في التطبيق السابق ) :

كود:

 if (xmlHttp.readyState!==4)
 { 
 var msg="يرجى الإنتظار ...";
 document.getElementById("msg").innerHTML=msg; 
 }

لاحظ كيف وضعنا تغيير الinnerHTML برسالة يرجى الإنتظار
وطبعا لازم نزيل الرسالة لما يتم الإنتهاء من الأمر لذلك نضع :

كود:

  var msg="";
 document.getElementById("msg").innerHTML=msg;

داخل الشرط

كود:

 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

هذا كل شيء لهذه الإضافة
ب- إلغاء الضغط أكثر من مرة على (دخول) في تسجيل الدخول للدردشة
انا لاحظت لو واحد قام بالضغط على دخول وثم غير الاسم بسرعة (لان اتصاله بطيء يقدر) و ضغط عليها مرة ثانية رح يتم حساب الاسم الاول في قائمة المستخدمين الاون لاين ورح يظل عالق فيها ما يطلع إلا بحذفه من قاعدة البيانات
لذلك أنصح بعمل هذا
أول شي نروح للضغطة الموجودة في display.php
وهي :

كود بلغة HTML:

<input onclick='javascript:login()'  type='button' value='دخول' />

ونعطيهي id (سميته subm) فتصير :

كود بلغة HTML:

<input onclick='javascript:login()' id=subm  type='button' value='دخول' />

ملاحظة :لا تنسى لازم تعمل هذا التعديل على الضغطتين لانها مكررة مرة إذا كان اسم المستخدم موجود في الدردشة و الأصلية عند محاولة الدخول
بعدين نفتح display.js
وإذا كنت عملت الإضافة السابقة كل ماعليك هو إضافة

كود:

document.getElementById("subm").disabled="disabled";

على الشرط xmlHttp.readyState!==4
لصبح

كود:

 if (xmlHttp.readyState!==4)
 {  
 document.getElementById("subm").disabled="disabled";
 var msg="يرجى الإنتظار ...";
 document.getElementById("msg").innerHTML=msg; 
 }

ج-القيام بتسجيل خروج المستخدم إذا قطع إتصاله
طبعا بالنسبة للسكربت يلي عملنها حسبنا حساب إذا المستخدم أغلق الصفحة دون أي سابق إنذار فسوف يتم تسجيل خروجه حتى لا تصير مشاكل ولا يتم تسجيل خروجه
لكن ماذا لو انقطع إتصال احد المستخدمين او الكومبيوتر أنغلق فجأة !؟؟
إذا صار هذا رح يظل اسم المستخدم عالق في قائمة المستخدمين إلى أن يزال من قاعدة البيانات يدوياً
ولحل هذه المشكلة لازم نضع مثل مدة زمنية إذا انتهت يتم تسجيل خروج المستخدم تلقائياً نبدا بالخطوات :
أنتوا تتذكروا الحقل time يلي وضعته بجدول ajax_online وما استخدمته في شي من السكربت !؟ لكن الان جاء دوره
اول شي نروح لonline.php ورح نضيف لها : ( كود يقوم بتحديث حقل time بحسب المستخدم - فحص لجميع حقول المستخدمين و تسجيل خروج من تجاوز المدة المحددة)
نضيف أولاً :

كود PHP:

  $update=mysql_query("UPDATE `ajax_online` SET `time` ='$time' WHERE `name` ='$name' LIMIT 1") or die("can't get ajax_online");

بحيث سوف يقوم بتحديث الوقت الموجود في حقل time في جدول المستخدمين للمستخدم نفسه
الأن بقي أن نضع التأكد من كل المستخدمين إذا كانوا داخل المدة الزمنية المتاحة أو نحذفهم. داخل دالة التكرار

كود PHP:

       while ($row=mysql_fetch_object($select))

  {

نضع فيها :

كود PHP:

    $ctime=$row->time+60;

  if($ctime<$time){

  $delete=mysql_query("DELETE FROM `ajax_online` WHERE `name` = '$row->name' LIMIT 1") or die("can't delete from ajax_online");

 

  $chattext="(قام بتسجيل خروجه)";

   $insert = "INSERT INTO ajax_chat  (id,name,chattext,time)

 VALUES(NULL,'$row->name','$chattext','$time')";

 $result = mysql_query($insert);

  }

أولاً يتم أخذ وقت كل مستخدم مع إضافة 60 ثانية له (ال60 ثانية هو المدة المحددة واعتبره وقت طويل بالنسبة لتحديث كل ثانية)
ثم يوضع الشرط إذا كان الوقت الأن أكبر من وقت المستخدم + 60 ثانية يعني ان المستخدم لم يتم تحديث وقته خلال هذه ال60 ثانية
فعند تحقق الشرط يتم تسجيل خروجه و الاكواد الباقية شبيه جداً بتسجيل خروج المستخدم في display.php
ما أنصح واحد يحط وقت قليل جداً مثل ثانية أو ثانيتين لأانهم ممكن يلي عنده سرعة إتصال بطيئة يستغرق التحديث وقت شوي أكثر من الثانيتين فعندها يتم تسجيل خروجه وهو لسى موجود وتصير مشاكل أكبر

لذلك أفضل شي الوقت يكون بين ال30 ثانية إلى 60 ثانية كحد أقصى
د- حماية ملفات النصوص و الأعضاء المتواجدين:
إذا كان واحد غير مسجل دخول و فتح chatbox.php أو online.php رح يشوف كل نصوص الكتابة و المستخدمين المتواجدين xD
لذلك لازم نعمل لهم حماية عن طريق فحص الجلسة (session)
ضع :

كود PHP:

  if(!$_SESSION['name']){

die();

}

في الملفين السابقين و تقدر تحط أي عبارة أو أمر داخل الشرط

الحمد لله تم الإنتهاء من الإضافات والتطبيق كامل و في المرفقات السكربت كامل مع جميع الإضافات
ولكن فيه مشكلة بسيطة في السكربت : إذا كنت داخل في الدردشة و عملت تحديث(refresh) رح يتم تنفيذ امر تسجيل الخروج لان :

كود بلغة HTML:

<body onunload="javascript:logout()">

ولما تعمل التحديث بيطلع من الصفحة و يرجع يدخل لها وتصير مشاكل و لخبطة في الجلسة( session) و للأسف ماشفت لها حل غير إننا نشيل هذا الحدث و نعتمد على الإضافة يلي عملناها لفحص المستخدمين إذا طلعوا خلال ال60 ثانية

أتمنى إذا واحد شاف حل للمشكلة يطلعنى عليها بحيث يبقى الحدث الموجود على الbody

-------------------------
في التطبيق القادم: تسجيل عضويات باستخدام الأجاكس
رح يكون فيه تأكد من كافة المدخلات وطباعة الأخطاء بالأجاكس
وضع صورة التحقق الcaptcha
استخدام أحد أشكال niceforms لتحديد شكل جمالي رائع لنموذج التسجيل (إحتمال لم أقرر حتى الان )

شاعر_الظلام · 08-10-2008, 05:21 PM

ألف شكروالله يعطيك العافيه

سعد السيد احمد · 08-10-2008, 11:03 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة شاعر_الظلام

ألف شكروالله يعطيك العافيه

الله يعافيك

ليوناردو دافينشي · 09-10-2008, 09:58 AM

مشكووور جداً

حد عنده مثال جاهز نعاينه

سعد السيد احمد · 09-10-2008, 11:38 AM

تفضل رفعته على موقع لي أجرب عليه سكرباتي :
http://almaster.4mtm.net/chat+ajax/display.php

مهندس مصرى · 09-10-2008, 04:13 PM

الله يكرمك ويبارك فيك وجزاك الله كل خير
استفدت كثيراً جداً من اكواد الجافا سكربت التي وضعتها
وبارك الله فيك على هذا الشرح الاكثر من رائع

سعد السيد احمد · 09-10-2008, 10:33 PM

اقتباس:

الله يكرمك ويبارك فيك وجزاك الله كل خير
استفدت كثيراً جداً من اكواد الجافا سكربت التي وضعتها
وبارك الله فيك على هذا الشرح الاكثر من رائع

ماعدت أعرف إيش أرد لك على هذا المديح و الدعاء أحرجتني

تعديل بسيط على فنكشن keyDown التي تقوم بجعل enter ينفذ العملية المحددة وهي :

كود:

function keyDown(func){
k=window.event.keyCode;
 if(k==13){  
 
 if(func=="login"){
  login();
  }
  if(func=="sendchat"){
  sendchat();
  }
 }
}

بهذه الطريقة لن تعمل مع فايرفوكس لأنه يتعامل مع الevent بطريقة أخرى وكذلك لا تعمل معه ال keyCode بل يستخدم which
إذا نقوم بالتعديلات التالية . اولاً :
نعدل على الفنكش لتصبح :

كود:

function keyDown(e,func) { 
 evt = e || window.event;
  var k = evt.which || evt.keyCode;
 if(k==13){  
 
  if(func=="login"){
    login();
    }
    if(func=="sendchat"){
    sendchat();
    }
  }
}

وفي حقلي الاسم لتسجيل الدخول للدردشة نعدل على الحدث (event) الموجود ليصبح :

كود:

onkeydown='javascript:keyDown(event,\"login\")'

وفي حقل نص الدردشة يصبح

كود:

onkeydown='javascript:keyDown(event,"sendchat")'

إنتهى

سعد السيد احمد · 09-10-2008, 10:47 PM

تعديل أخر من أجل فايرفوكس

في display.php :

كود PHP:

      echo"الاسم الذي اخترته مستخدم!<br />";
    echo"<div align='center' dir='rtl' id='login'>

نعدلها لتصبح رسالة أن الاسم مستخدم داخل الdiv

كود PHP:

  echo"<div align='center' dir='rtl' id='login'>
    الاسم الذي اخترته مستخدم!<br />

إذا ما عدلتها ورحت الفايرفوكس وفي الدخول حطيت اسم موجود داخل الدردشة بتطلع لك الرسالة ولن تمحى لو دخلت الدردشة أو حتى إخترت اسم مستخدم مرة ثانية بل بتصير رسالتين
لأن الظاهر الفايرفوكس يقوم بالتعديل على الdiv حسب احدث div وجد لكن الIE تعديلاته على الdiv الأصلية :

كود:

 document.getElementById("login").innerHTML=xmlHttp.responseText;

Mr.Mahdy · 10-10-2008, 08:17 PM

اخوى سعد السيد احمد اولا بارك الله فيك وتسلم على العمل
بس طلب ضغي ممكن تبعتلى ملفات الاسكربت CHAT هذا كاملة بعد التعديلات لك التحية

سعد السيد احمد · 11-10-2008, 04:52 AM

اقتباس:

اخوى سعد السيد احمد اولا بارك الله فيك وتسلم على العمل
بس طلب ضغي ممكن تبعتلى ملفات الاسكربت CHAT هذا كاملة بعد التعديلات لك التحية

أولاً شكرا على التشجيع

بالنسبة للسكربت برفعه الملفات بعد كل التعديلات يلي حصلت في الردود + هذا التعديل :
إضافة دالةescape () حتى نتمكن من كتابة & في الحقول و إرسلها بدون مشاكل

وطبعا الدالة unescape() لإعادة النص (العربي خاصةً) لحالته الأصلية

تقبلوا تحياتي ,

أبو فيصلz

جزاااك الله ألف خير ،، يا ليت تضع إيميلك لأني محتاجك بحاجة

وننتظر الدروس القادمة