Введение

Чат-приложения очень распространены в интернете. У разработчиков также есть много вариантов при создании таких приложений. В этой статье рассказывается, как реализовать чат-приложение на основе PHP-AJAX, которое может отправлять и получать сообщения без обновления страницы.

Основная логика

Прежде чем определять основную функциональность приложения, давайте сначала посмотрим на базовый внешний вид чат-приложения, как показано на следующем скриншоте:

Введите текст чата через поле ввода в нижней части окна чата. Нажатие кнопки «Отправить» запускает выполнение функции set_chat_msg. Это функция на основе Ajax, поэтому текст чата можно отправить на сервер без обновления страницы. Программа выполняет chat_send_ajax.php на сервере вместе с именем пользователя и текстом чата.

//
// Set Chat Message
//

function set_chat_msg()
{
    if(typeof XMLHttpRequest != "undefined")
    {
        oxmlHttpSend = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
       oxmlHttpSend = new ActiveXObject("Microsoft.XMLHttp");
    }
    if(oxmlHttpSend == null)
    {
       alert("Browser does not support XML Http Request");
       return;
    }

    var url = "chat_send_ajax.php";
    var strname="noname";
    var strmsg="";
    if (document.getElementById("txtname") != null)
    {
        strname = document.getElementById("txtname").value;
        document.getElementById("txtname").readOnly=true;
    }
    if (document.getElementById("txtmsg") != null)
    {
        strmsg = document.getElementById("txtmsg").value;
        document.getElementById("txtmsg").value = "";
    }

    url += "?name=" + strname + "&msg=" + strmsg;
    oxmlHttpSend.open("GET",url,true);
    oxmlHttpSend.send(null);
}

PHP-модуль получает данные формы из строки запроса и обновляет их в таблице базы данных с именем chat. Таблица базы данных chat имеет столбец с именемID、USERNAME、CHATDATEиMSGстолбец. Поле ID — это поле с автоинкрементом, поэтому значение этого поля ID будет автоматически увеличиваться. Текущая дата и время будут записаны в столбец CHATDATE.

require_once('dbconnect.php');

db_connect();

$msg = $_GET["msg"];
$dt = date("Y-m-d H:i:s");
$user = $_GET["name"];

$sql="INSERT INTO chat(USERNAME,CHATDATE,MSG) " .
      "values(" . quote($user) . "," . 
      quote($dt) . "," . quote($msg) . ");";

      echo $sql;

$result = mysql_query($sql);
if(!$result)
{
    throw new Exception('Query failed: ' . mysql_error());
    exit();
}

Чтобы получать сообщения чата от всех пользователей из таблицы базы данных, функция таймера настроена на вызов следующей команды JavaScript в цикле каждые 5 секунд, то есть функция get_chat_msg выполняется каждые 5 секунд.

var t = setInterval(function(){get_chat_msg()},5000);

get_chat_msg — это функция на основе Ajax. Она выполняет программу chat_recv_ajax.php, чтобы получить информацию чата из таблицы базы данных. В свойстве onreadystatechange подключена другая функция JavaScript get_chat_msg_result. Когда сообщения чата из таблицы базы данных возвращаются, управление программой переходит в функцию get_chat_msg_result.

//
// General Ajax Call
//

var oxmlHttp;
var oxmlHttpSend;

function get_chat_msg()
{
    if(typeof XMLHttpRequest != "undefined")
    {
        oxmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
       oxmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    }
    if(oxmlHttp == null)
    {
        alert("Browser does not support XML Http Request");
       return;
    }

    oxmlHttp.onreadystatechange = get_chat_msg_result;
    oxmlHttp.open("GET","chat_recv_ajax.php",true);
    oxmlHttp.send(null);
}

В программе chat_recv_ajax.php сообщения чата от пользователей собираются с помощью SQLselectкоманд. Чтобы ограничить количество строк, в SQL-запросе также задаётся предложение limit (limit 200), которое запрашивает последние 200 строк в таблице базы данных chat. Полученные сообщения затем возвращаются в функцию Ajax для отображения в окне чата.

require_once('dbconnect.php');

db_connect();

$sql = "SELECT *, date_format(chatdate,'%d-%m-%Y %r') 
as cdt from chat order by ID desc limit 200";
$sql = "SELECT * FROM (" . $sql . ") as ch order by ID";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());

// Update Row Information
$msg="";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
{
   $msg = $msg . "" .
        "" .
        "";
}
$msg=$msg . "<table style="color: blue; font-family: verdana, arial; " . 
  "font-size: 10pt;" border="0">
  <tbody><tr><td>" . $line["cdt"] . 
  " </td><td>" . $line["username"] . 
  ": </td><td>" . $line["msg"] . 
  "</td></tr></tbody></table>";

echo $msg;

Когда данные готовы, функция JavaScript собирает данные, полученные от PHP. Эти данные будут упорядочены и размещены внутриDIVтега. oxmlHttp.responseText сохраняет сообщения чата, полученные от программы PHP, и копирует их в свойство document.getElementById("DIV_CHAT").innerHTML тега DIV.

function get_chat_msg_result(t)
{
    if(oxmlHttp.readyState==4 || oxmlHttp.readyState=="complete")
    {
        if (document.getElementById("DIV_CHAT") != null)
        {
            document.getElementById("DIV_CHAT").innerHTML =  oxmlHttp.responseText;
            oxmlHttp = null;
        }
        var scrollDiv = document.getElementById("DIV_CHAT");
        scrollDiv.scrollTop = scrollDiv.scrollHeight;
    }
}

Следующую SQL-команду CREATE TABLE можно использовать для создания таблицы базы данных с именем chat. Вся информация, введённая пользователями, будет попадать в таблицу базы данных.

create table chat( id bigint AUTO_INCREMENT,username varchar(20), 
chatdate datetime,msg varchar(500), primary key(id));

Интересные моменты

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

Лицензия

Эта статья вместе с любым связанным исходным кодом и файлами распространяется по лицензии The Code Project Open License (CPOL).

Источник: http://www.codeceo.com/article/php-chart-app.html