النتائج 1 إلى 15 من 15

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

  1. 08-10-2008 #1
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81

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



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

    بسم الله نبدأ يأساسيات السكربت:
    الملفات التي نحتاج إلى إنشائها :
    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 لتحديد شكل جمالي رائع لنموذج التسجيل (إحتمال لم أقرر حتى الان )





    الملفات المرفقة الملفات المرفقة
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً

  2. 08-10-2008 #2

    M. Al-Dhafeeri
    تاريخ التسجيل
    Oct 2003
    المشاركات
    10,360


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





    __________________
    سبحان الله وبحمده
    > "كتبي، لعلها تفيدك!" *جديد
    > "مدونتي، تصويري.." | LaZqA
    > Twitter
    رد مع اقتباس رد مع اقتباس M. Al-Dhafeeri غير متواجد حالياً
  3. 09-10-2008 #3
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


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





    __________________
    تطبيقات أجاكس:
    - تصويت باستخدام الاجاكس
    - دردشة باستخدام الاجاكس
    -تسجيل عضويات باستخدام الأجاكس
    -تسجيل دخول باستخدام الاجاكس
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً
  4. 09-10-2008 #4
    عضو سوبر نشيط
    ليوناردو دافينشي
    تاريخ التسجيل
    Aug 2007
    المشاركات
    674


    مشكووور جداً


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





    __________________
    Professional Java?Script Programmer and Web Developer
    رد مع اقتباس رد مع اقتباس ليوناردو دافينشي غير متواجد حالياً
  5. 09-10-2008 #5
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


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





    __________________
    تطبيقات أجاكس:
    - تصويت باستخدام الاجاكس
    - دردشة باستخدام الاجاكس
    -تسجيل عضويات باستخدام الأجاكس
    -تسجيل دخول باستخدام الاجاكس
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً
  6. 09-10-2008 #6
    عضو سوبر نشيط
    مهندس مصرى
    تاريخ التسجيل
    May 2007
    المشاركات
    947


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





    __________________
    قل اللهم مالك المُلك تؤتي الملك من تشاء وتنزع الملك ممن تشاء وتعز من تشاء وتذل من تشاء بيدك الخير انك على كل شىء قدير
    رد مع اقتباس رد مع اقتباس مهندس مصرى غير متواجد حالياً
  7. 09-10-2008 #7
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


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


    تعديل بسيط على فنكشن 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")'
    إنتهى :nice:





    __________________
    تطبيقات أجاكس:
    - تصويت باستخدام الاجاكس
    - دردشة باستخدام الاجاكس
    -تسجيل عضويات باستخدام الأجاكس
    -تسجيل دخول باستخدام الاجاكس
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً
  8. 09-10-2008 #8
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


    تعديل أخر من أجل فايرفوكس
    في 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;






    __________________
    تطبيقات أجاكس:
    - تصويت باستخدام الاجاكس
    - دردشة باستخدام الاجاكس
    -تسجيل عضويات باستخدام الأجاكس
    -تسجيل دخول باستخدام الاجاكس
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً
  9. 10-10-2008 #9
    عضو فعال
    الصورة الرمزية Mr.Mahdy
    Mr.Mahdy
    تاريخ التسجيل
    Aug 2007
    المشاركات
    1,128


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





    __________________
    الان تم انطلاق نظام مشاركة ارباح جوجل ادسنس بنسبة 100% لكل الاعضاء
    1. بشرة لشركات الاستضافة والتصميم والبرمجة والدعم
    2. تعلم اصول الربح من جوجل ادسنس - منتدى ادسنس
    رد مع اقتباس رد مع اقتباس Mr.Mahdy غير متواجد حالياً
  10. 11-10-2008 #10
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


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

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





    الملفات المرفقة الملفات المرفقة
    __________________
    تطبيقات أجاكس:
    - تصويت باستخدام الاجاكس
    - دردشة باستخدام الاجاكس
    -تسجيل عضويات باستخدام الأجاكس
    -تسجيل دخول باستخدام الاجاكس
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً
  11. 11-10-2008 #11
    عضو نشيط
    أبو فيصلz
    تاريخ التسجيل
    Jul 2008
    المشاركات
    269


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


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





    التعديل الأخير تم بواسطة أبو فيصلz ; 11-10-2008 الساعة 06:56 AM
    رد مع اقتباس رد مع اقتباس أبو فيصلz غير متواجد حالياً
  12. 11-10-2008 #12
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


    اقتباس المشاركة الأصلية كتبت بواسطة أبو فيصلz مشاهدة المشاركة
    جزاااك الله ألف خير ،، يا ليت تضع إيميلك لأني محتاجك بحاجة


    وننتظر الدروس القادمة
    لو طلعت الملف الشخصي كان شفت الإيميل
    بس يللا مافي مشكلة : s3d_as@hotmail.com





    __________________
    تطبيقات أجاكس:
    - تصويت باستخدام الاجاكس
    - دردشة باستخدام الاجاكس
    -تسجيل عضويات باستخدام الأجاكس
    -تسجيل دخول باستخدام الاجاكس
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً
  13. 12-10-2008 #13
    عضو نشيط جدا
    فارس القبيلة
    تاريخ التسجيل
    Nov 2005
    المشاركات
    440


    درس اكثر من رائع


    لكن هل صفحه الدردشه هذه تزيد من الضغط على المتصفح ؟





    رد مع اقتباس رد مع اقتباس فارس القبيلة غير متواجد حالياً
  14. 12-10-2008 #14
    عضو نشيط
    سعد السيد احمد
    تاريخ التسجيل
    Oct 2008
    المشاركات
    81


    اقتباس المشاركة الأصلية كتبت بواسطة فارس القبيلة مشاهدة المشاركة
    درس اكثر من رائع


    لكن هل صفحه الدردشه هذه تزيد من الضغط على المتصفح ؟
    أنت الأروع

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





    التعديل الأخير تم بواسطة سعد السيد احمد ; 12-10-2008 الساعة 01:18 PM
    __________________
    تطبيقات أجاكس:
    - تصويت باستخدام الاجاكس
    - دردشة باستخدام الاجاكس
    -تسجيل عضويات باستخدام الأجاكس
    -تسجيل دخول باستخدام الاجاكس
    رد مع اقتباس رد مع اقتباس سعد السيد احمد غير متواجد حالياً
  15. 03-06-2009 #15
    عضو جديد
    ghazi1985
    تاريخ التسجيل
    Nov 2008
    المشاركات
    2


    شكرا جزيلا على السكربت

    برمجة بسيطة ومفيدة في نفس الوقت

    تصلح للدعم الفني في سكربتات الاستضافة





    رد مع اقتباس رد مع اقتباس ghazi1985 غير متواجد حالياً




« Calander web appalication | مشكلة ترتيب ندا الدوال في JQuery »

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

قوانين المنتدى


أضف موقعك هنا | اضافة محتوى فريد لموقعك