27 ноя 2010 в 16:07

Простой чат на JavaScript и PHP

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

Привет, Хабраюзеры! Хочу поделиться с вами своим опытом. Сегодня я расскажу, как написать простой чат на php и javascript.
Под катом много кода. Приготовитесь…

Я использовал MySQL базу данных для хранения сообщений чата. Для начала, создадим новую базу в phpMyAdmin. И импортируем туда небольшую таблицу.

CREATE TABLE IF NOT EXISTS `chat` (

  `id` int(15) NOT NULL AUTO_INCREMENT,

  `name` varchar(30) NOT NULL,

  `text` text NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=1 ;

Далее, создаем новый документ и называем его index.php. Именно этот документ будет основным. Проще говоря, в нем будет наш чат.
Для чата я использовал jQuery и несколько плагинов для него.
Подключим jQuery и имеющиеся плагины…

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jquery.timers.js"></script>

<script type="text/javascript" src="js/jquery.cookie.js"></script>

Затем, сверстаем разметку для нашего чата.

<style>

#msg-box{overflow:auto; width:750px; height:300px; border:1px solid black; padding:5px; margin:0px; display:inline-block; background:#FFF; margin:32px 0 0 32px;}

#msg-box ul{list-style:none; padding:0px; margin:0px;}

#t-box{margin-left:32px;}

</style>

<div id="msg-box">

  <ul>

  </ul>

</div>

<form id="t-box" action="?" style="">

  Имя: <input type="text" class='name' style="width:100px;" >

  <input type="text" class='msg' style="width:500px;" >

  <input type="submit" value="Отправить" style="margin-top:5px;">

</form>

Итак, готова разметка для чата, таблица для хранения сообщений чата. Теперь, мы напишем серверный скрипт для обработки сообщений. Скрипт должен уметь сохранять и раздавать сообщения. Создаем новый документ и назовем его chat.php
Содержание chat.php:

<?

//Функции для работы с БД

function getQuery($query){

  $res = mysql_query($query) or die(mysql_error());

  $row = mysql_fetch_row($res);

  $var = $row[0];

  return $var;

}

function setQuery($query){

  $res = mysql_query($query) or die(mysql_error());

  return $res;

}

//Соединяемся с базой

@mysql_connect('localhost', 'root', '') or die("Не могу соединиться с MySQL.");

@mysql_select_db('best') or die("Не могу подключиться к базе.");

@mysql_query('SET NAMES utf8;');

switch($_GET["event"]){

  //Тут раздаем последние сообщения

  case "get":

    //Сколько сообщений раздавать пользователям

    $max_message = 60;

    //Всего сообщений в чате

    $count = getQuery("SELECT COUNT(`id`) FROM `chat`;");

    //Максимальный ID сообщения

    $m = getQuery("SELECT MAX(id) FROM `chat` WHERE 1");

    //Удаление лишних сообщений.

    //Если хотите, чтобы сохранялась вся история, смело сносите этот кусочек

    if($count > $max_message){

      setQuery("DELETE FROM `chat` WHERE `id`<".($m-($max_message-1)).";");

    }

    //Принимаем от клиента ID последнего сообщения

    $mg = $_GET['id'];

    //Генерируем сколько сообщений нехватает клиенту

    if($mg == 0){$mg = $m-$max_message;}

    if($mg < 0){$mg = 0;}

    $msg = array();

    //Если у клиента не все сообщения, отсылаем ему недостоющие

    if($mg<$m){

      //Берем из базы недостобщие сообщения

      $query = "SELECT * FROM `chat` WHERE `id`>".$mg." AND `id`<=".$m." ORDER BY `id` ";

      $res = mysql_query($query) or die(mysql_error());

      while($row = mysql_fetch_array($res)){

        //Заносим сообщения в массив

        $msg[] = array("id"=>$row['id'], "name"=>$row['name'], "msg"=>$row['text']);

      }

    }

    //Отсылаем клиенту JSON с данными.

    echo json_encode($msg);

  break;

  case "set":

    //Принимаем имя.

    $name = htmlspecialchars($_GET['name']);

    //Принимаем текст сообщения

    $msg = htmlspecialchars($_GET["msg"]);

    //Сохраняем сообщение

    setQuery("INSERT INTO `chat` (`id` ,`name` ,`text` )VALUES (NULL , '".mysql_real_escape_string($name)."', '".mysql_real_escape_string($msg)."');");

  break;

}

Как же работает этот скрипт? Сначала, подключается к базе данных. После подключения, смотрим, что запришивает клиент.
Если он запрашивает сообщения, то генерируем сколько сообщений не хватает клиенту. Затем, запрашиваем в безе все необходимые сообщения, добавляем их в массив, генерируем JSON и посылаем все это дело клиенту.

Теперь, у нас есть основа для чата. Все, что нам осталось сделать, так это обновление чата на стороне клиента и добавление новых сообщений в чат. Для всего этого, мы будем использовать Ajax запросы.
Давайте, создадим в файле index.php скрипт для обработки и добавления сообщений.
Добавим между тегов <head>...</head> наш Javascript:

$(function(){

  //Если куки с именем не пустые, тащим имя и заполняем форму с именем

  if($.cookie("name")!=""){$("#t-box input[class='name']").attr("value", $.cookie("name"));}

  //Переменная отвечает за id последнего пришедшего сообщения

  var mid = 0;

  //Функция обновления сообщений чата

  function get_message_chat(){

    //Генерируем Ajax запрос

    $.ajaxSetup({url: "chat.php",global: true,type: "GET",data: "event=get&id="+mid+"&t="+

        (new Date).getTime()});

    //Отправляем запрос

    $.ajax({

      //Если все удачно

      success: function(msg_j){

        //Если есть сообщения в принятых данных

        if(msg_j.length > 2){

          //Парсим JSON

          var obj = JSON.parse(msg_j);

          //Проганяем циклом по всем принятым сообщениям

          for(var i=0; i < obj.length; i ++){

            //Присваиваем переменной ID сообщения

            mid = obj[i].id;

            //Добавляем в чат сообщение

            $("#msg-box ul").append("<li><b>"+obj[i].name+"</b>: "+obj[i].msg+"</li>");

          }

          //Прокручиваем чат до самого конца

          $("#msg-box").scrollTop(2000);

        }

      }

    });

  }

  //Первый запрос к серверу. Принимаем сообщения

  get_message_chat();

  //Обновляем чат каждые две секунды

  $("#t-box").everyTime(2000, 'refresh', function() {

    get_message_chat();

  });

  //Событие отправки формы

  $("#t-box").submit(function() {

    //Запрашиваем имя у юзера.

    if($("#t-box input[class='name']").attr("value") == ""){ alert("Пожалуйста, введите свое имя!")}else{

      //Добавляем в куки имя

      $.cookie("name", $("#t-box input[class='name']").attr("value"));

      //Тащим сообщение из формы

      var msg = $("#t-box input[class='msg']").val();

      //Если сообщение не пустое

      if(msg != ""){

        //Чистим форму

        $("#t-box input[class='msg']").attr("value", "");

        //Генерируем Ajax запрос

        $.ajaxSetup({url: "chat.php", type: "GET",data: "event=set&name="+

            $("#t-box input[class='name']").val()+"&msg="+msg});

        //Отправляем запрос

        $.ajax();

      }

    }

    //Возвращаем false, чтобы форма не отправлялась.

    return false;

  });

});

Разберем этот скрипт…
Строка (3). Если в куках есть имя пользователя, то заполняем форму с именем. Для чего это сделано? Если пользователь обновил страничку с чатом или зашел заново на страницу с чатом, то ему не придется вводить свое имя заново.
Строка (7). Функция обновления чата. Чат обновляется не полностью, а присылаются только те сообщения, которых нет в чате.
Строка (9). Генерируем Ajax запрос. Для чего нужно отправлять лишнюю переменную «t=»+(new Date).getTime()? Если не отправить, то некоторые браузеры кэшируют одинаковые Ajax запросы. А нам это не нужно! т.к. не смогут обновляться сообщения. Функция (new Date).getTime() возвращает время в миллисекундах. Таким образом, браузер не кэширует запрос, т.к. при каждой отправке, генерируется разная строка.
Строка (16). Почему именно больше двух символов? Да потому что если все сообщения в чате есть, то сервер присылает не пустую строку, а "[]". т.к. ответ генерируется в JSON.
Строка (37). Запрос новых сообщений раз в две секунды. Мне очень понравился плагин jQuery Timers. С помощью него можно очень гибко сделать повторение определенных действий любое количество раз.

В общем-то, и всё. Вот и готов наш чат. Проверку имени на валидность и смайлы оставляю для домашнего задания.

Посмотреть чат в действии
Полный архив со всем кодом

Хабы:

Чулан