1 сен 2012 в 15:46

Чат для сайта с PHP, MySQL, Javascript (Ajax)

Ожидает приглашения

В этом топике, я опишу простой скрипт чата, для зарегистрированных пользователей вашего сайта. Этот скрипт может вызывать разные мнения: для некоторых тяжёлым, для некоторых легким. На самом деле он не такой тяжёлый как может показаться некоторым.

Для начала, нам нужно будет создать таблицу в БД. Там должно быть 4 поля:
from — отправитель(varchar), to-получатель(varchar), message-сообщения(longtext), id- номер чата( INT(AutoIncrement) ).

Нам нужен будет файл, на котором будут отображаться сообщения, и будет поле для ввода сообщения. Назовем его chat.php. Для работы скрипта, в ссылке должны быть логин отправителя и логин получателя. Например: «ваш.сайт?from=login_1&to=login_2». Где from = отправитель, to = получатель. Нам нужен будет скрипт на js, который будет отправлять и получать сообщения:

var k=<?session_start();echo "'".$_SESSION['login']."'";?>; //при входе должна быть сессия для индентифицирования отправителя
var y=<?echo "'".$_GET['to']."'";?>;// индентифицируем получателя.

function update(){ // функция обновления
var xhttp;
 if (window.XMLHttpRequest){
   xhttp=new XMLHttpRequest();}
  else {
   xhttp=new ActiveXObject("Microsoft.XMLHTTP");}
// создаем XMLHttpRequest и делаем его кроссбраузерным

xhttp.open('GET','chat1.php?to='+y+'&from='+k,true);
xhttp.send();
//отправляем все что надо на сервер
xhttp.onreadystatechange=function(){
      document.getElementById('b').innerHTML=xhttp.responseText; /* получаем сообщения, без разницы, изменилось ли, или нет.И вставляем в элемент с id "B" (в этом элементе у нас будут сообщения)*/
   }
}
  function get() //функция при отправки сообщения
  {
    var v=document.getElementById("b").innerHTML; //из id "B" берем текст, т.е всю переписку 
   var g=document.getElementById("a").value;// из id "А" берем сообщение
  var xhttp;
  if (window.XMLHttpRequest){
   xhttp=new XMLHttpRequest();}
  else {
   xhttp=new ActiveXObject("Microsoft.XMLHTTP");}
// создаем XMLHttpRequest и делаем его кроссбраузерным

   xhttp.onreadystatechange=function(){
   if (xhttp.readyState==4 && xhttp.status==200)
      document.getElementById('b').innerHTML=xhttp.responseText;
   }
// получаем текст, все сообщения + новое отправленное (см. дальше)
   d="<a href='ваш_сайт/?login="+k+"'>"+k+"</a><br>"+g+"<br>"; /* в эту переменную помещаем новоиспеченное сообщение с ссылкой на страницу пользователя */
   xhttp.open('GET','chat1.php?word='+d+'&to='+y+'&from='+k,true);
   xhttp.send(); // отправляем запрос со всем, что надо
     }
setInterval(update, 1000);// каждую секунду будем выполнять функцию для обновления

Вот HTML код на этой же странице:

<textarea id="a"></textarea>

<input type="button" onclick=get() value="Отправить">

<div id="b"></div>

Теперь файл chat1.php (у меня не очень с воображением). Здесь мы будем получать из БД все сообщения добавлять к БД новое и выводить все (новое + старые). Думаю одна из простых частей. Код:

<?
$r=0;
$p=0;
session_start();
if($_SESSION['login']==$_GET['from']){
mysql_connect("sql-server", "login", "password") or die(mysql_error());
mysql_select_db("db") or die(mysql_error());
$strSQL = "SELECT * FROM chat"; 
	$rs = mysql_query($strSQL) or die(mysql_error());
        while($row = mysql_fetch_array($rs)) {
		                                    $r++;
                                              if($row['to']!=$_GET['to']&&$row['from']!=$_SESSION['login']){ 
											                              $p++;
											                              }/* здесь мы проверяем, надо ли добавлять создавать строку с  
                                                                                                                            сообщениями. */
                                                                                                                       /* если $r == $p (где $r - все диалоги, a $p - остальные диалоги), 
                                                                                                                           то создаем диалог (см. ниже)
                                                                                                                        */ 
if($row['to']==$_GET['to']&&$row['from']==$_SESSION['login']||$_GET['from']==$row['to']&&$_GET['to']==$row['from']){
 // здесь мы проверяем диалоги, чтобы оба пользователя получали диалоги со своими собеседниками, а не только свои 
                                                                                                                  $msg=$row['messages'].$_GET['word'];																		                                                                                                                                                          	 
                                                                                                        		$msg=addslashes($msg);																						                                  
                                                                                                             $strSQL="UPDATE chat SET messages='".$msg."'";               															      
                                                                                                                mysql_query($strSQL)or die(mysql_error());
                                                                                                               
                                                                                                              //обновляем таблицу, добавляя новое сообщение в диалог.
			                  									                                                    }
                                              }
if($r==$p){ // проверяем условия указанные выше 
$strSQL="INSERT INTO chat('from', 'to', 'messages') VALUES(".$_SESSION['login'].",".$_GET['to'].",".$_GET['word'].")";
$rs = mysql_query($strSQL) or die(mysql_error());
                  }
echo $msg; //наконец выводим диалог
mysql_close();
}
?>

Как видите, все не так тяжело. Если вы заметили ошибки, просьба не ругаться матом, а указать пальцем. Если вам понравилась эта статья, и если вы захотите, я напишу топик, для создания статей, подписки к пользователям, и вывода статей пользователей к которым вы подписаны.

Теги:

Хабы:

Чулан