PHP实现最简单的聊天室应用

PHP实现最简单的聊天室应用

介绍

聊天应用程序在网上非常常见。开发人员在构建这类应用程序时的选择也很多。这篇文章介绍了如何实现基于PHP-AJAX的聊天应用程序，并且不需要刷新页面就可以发送和接收消息。

核心逻辑

在定义应用程序的核心功能之前，先来看一看聊天应用程序的基本外观，如以下截图所示：

通过聊天窗口底部的输入框输入聊天文本。点击Send按钮，就开始执行函数set_chat_msg。这是一个基于Ajax的函数，因此无需刷新页面就可以将聊天文本发送到服务器。程序在服务器中执行chat_send_ajax.php以及用户名和聊天文本。

<ol class="dp-j"><li class="alt"><span><span class="comment">//</span><span> </span></span></li><li><span><span class="comment">// Set Chat Message</span><span> </span></span></li><li class="alt"><span><span class="comment">//</span><span> </span></span></li><li><span> </span></li><li class="alt"><span>function set_chat_msg() </span></li><li><span>{ </span></li><li class="alt"><span>    <span class="keyword">if</span><span>(typeof XMLHttpRequest != </span><span class="string">"undefined"</span><span>) </span></span></li><li><span>    { </span></li><li class="alt"><span>        oxmlHttpSend = <span class="keyword">new</span><span> XMLHttpRequest(); </span></span></li><li><span>    } </span></li><li class="alt"><span>    <span class="keyword">else</span><span> </span><span class="keyword">if</span><span> (window.ActiveXObject) </span></span></li><li><span>    { </span></li><li class="alt"><span>       oxmlHttpSend = <span class="keyword">new</span><span> ActiveXObject(</span><span class="string">"Microsoft.XMLHttp"</span><span>); </span></span></li><li><span>    } </span></li><li class="alt"><span>    <span class="keyword">if</span><span>(oxmlHttpSend == </span><span class="keyword">null</span><span>) </span></span></li><li><span>    { </span></li><li class="alt"><span>       alert(<span class="string">"Browser does not support XML Http Request"</span><span>); </span></span></li><li><span>       <span class="keyword">return</span><span>; </span></span></li><li class="alt"><span>    } </span></li><li><span> </span></li><li class="alt"><span>    var url = <span class="string">"chat_send_ajax.php"</span><span>; </span></span></li><li><span>    var strname=<span class="string">"noname"</span><span>; </span></span></li><li class="alt"><span>    var strmsg=<span class="string">""</span><span>; </span></span></li><li><span>    <span class="keyword">if</span><span> (document.getElementById(</span><span class="string">"txtname"</span><span>) != </span><span class="keyword">null</span><span>) </span></span></li><li class="alt"><span>    { </span></li><li><span>        strname = document.getElementById(<span class="string">"txtname"</span><span>).value; </span></span></li><li class="alt"><span>        document.getElementById(<span class="string">"txtname"</span><span>).readOnly=</span><span class="keyword">true</span><span>; </span></span></li><li><span>    } </span></li><li class="alt"><span>    <span class="keyword">if</span><span> (document.getElementById(</span><span class="string">"txtmsg"</span><span>) != </span><span class="keyword">null</span><span>) </span></span></li><li><span>    { </span></li><li class="alt"><span>        strmsg = document.getElementById(<span class="string">"txtmsg"</span><span>).value; </span></span></li><li><span>        document.getElementById(<span class="string">"txtmsg"</span><span>).value = </span><span class="string">""</span><span>; </span></span></li><li class="alt"><span>    } </span></li><li><span> </span></li><li class="alt"><span>    url += <span class="string">"?name="</span><span> + strname + </span><span class="string">"&msg="</span><span> + strmsg; </span></span></li><li><span>    oxmlHttpSend.open(<span class="string">"GET"</span><span>,url,</span><span class="keyword">true</span><span>); </span></span></li><li class="alt"><span>    oxmlHttpSend.send(<span class="keyword">null</span><span>); </span></span></li><li><span>} </span></li></ol>

PHP模块从Query String查询字符串）中接收表单数据，更新到命名为chat的数据库表中。chat数据库表有命名为ID、USERNAME、CHATDATE和MSG的列。ID字段是自动递增字段，所以这个ID字段的赋值将自动递增。当前的日期和时间，会更新到CHATDATE列。

<ol class="dp-j"><li class="alt"><span><span>require_once(</span><span class="string">'dbconnect.php'</span><span>); </span></span></li><li><span> </span></li><li class="alt"><span>db_connect(); </span></li><li><span> </span></li><li class="alt"><span>$msg = $_GET[<span class="string">"msg"</span><span>]; </span></span></li><li><span>$dt = date(<span class="string">"Y-m-d H:i:s"</span><span>); </span></span></li><li class="alt"><span>$user = $_GET[<span class="string">"name"</span><span>]; </span></span></li><li><span> </span></li><li class="alt"><span>$sql=<span class="string">"INSERT INTO chat(USERNAME,CHATDATE,MSG) "</span><span> . </span></span></li><li><span>      <span class="string">"values("</span><span> . quote($user) . </span><span class="string">","</span><span> . </span></span></li><li class="alt"><span>      quote($dt) . <span class="string">","</span><span> . quote($msg) . </span><span class="string">");"</span><span>; </span></span></li><li><span> </span></li><li class="alt"><span>      echo $sql; </span></li><li><span> </span></li><li class="alt"><span>$result = mysql_query($sql); </span></li><li><span><span class="keyword">if</span><span>(!$result) </span></span></li><li class="alt"><span>{ </span></li><li><span>    <span class="keyword">throw</span><span> </span><span class="keyword">new</span><span> Exception(</span><span class="string">'Query failed: '</span><span> . mysql_error()); </span></span></li><li class="alt"><span>    exit(); </span></li><li><span>} </span></li></ol>

为了接收来自数据库表中所有用户的聊天消息，timer函数被设置为循环5秒调用以下的JavaScript命令，即每隔5秒时间执行get_chat_msg函数。

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函数。

<ol class="dp-j"><li class="alt"><span><span class="comment">//</span><span> </span></span></li><li><span><span class="comment">// General Ajax Call</span><span> </span></span></li><li class="alt"><span><span class="comment">//</span><span> </span></span></li><li><span> </span></li><li class="alt"><span>var oxmlHttp; </span></li><li><span>var oxmlHttpSend; </span></li><li class="alt"><span> </span></li><li><span>function get_chat_msg() </span></li><li class="alt"><span>{ </span></li><li><span>    <span class="keyword">if</span><span>(typeof XMLHttpRequest != </span><span class="string">"undefined"</span><span>) </span></span></li><li class="alt"><span>    { </span></li><li><span>        oxmlHttp = <span class="keyword">new</span><span> XMLHttpRequest(); </span></span></li><li class="alt"><span>    } </span></li><li><span>    <span class="keyword">else</span><span> </span><span class="keyword">if</span><span> (window.ActiveXObject) </span></span></li><li class="alt"><span>    { </span></li><li><span>       oxmlHttp = <span class="keyword">new</span><span> ActiveXObject(</span><span class="string">"Microsoft.XMLHttp"</span><span>); </span></span></li><li class="alt"><span>    } </span></li><li><span>    <span class="keyword">if</span><span>(oxmlHttp == </span><span class="keyword">null</span><span>) </span></span></li><li class="alt"><span>    { </span></li><li><span>        alert(<span class="string">"Browser does not support XML Http Request"</span><span>); </span></span></li><li class="alt"><span>       <span class="keyword">return</span><span>; </span></span></li><li><span>    } </span></li><li class="alt"><span> </span></li><li><span>    oxmlHttp.onreadystatechange = get_chat_msg_result; </span></li><li class="alt"><span>    oxmlHttp.open(<span class="string">"GET"</span><span>,</span><span class="string">"chat_recv_ajax.php"</span><span>,</span><span class="keyword">true</span><span>); </span></span></li><li><span>    oxmlHttp.send(<span class="keyword">null</span><span>); </span></span></li><li class="alt"><span>} </span></li></ol>

在chat_recv_ajax.php程序中，来自于用户的聊天消息会通过SQL select命令进行收集。为了限制行数，在SQL查询中还给出了限制子句limit 200），即要求聊天数据库表中的最后200行。所获得的消息再返回给Ajax函数，用于在聊天窗口中显示内容。

<ol class="dp-j"><li class="alt"><span><span>require_once(</span><span class="string">'dbconnect.php'</span><span>); </span></span></li><li><span> </span></li><li class="alt"><span>db_connect(); </span></li><li><span> </span></li><li class="alt"><span>$sql = "SELECT *, date_format(chatdate,<span class="string">'%d-%m-%Y %r'</span><span>) </span></span></li><li><span>as cdt from chat order by ID desc limit <span class="number">200</span><span>"; </span></span></li><li class="alt"><span>$sql = <span class="string">"SELECT * FROM ("</span><span> . $sql . </span><span class="string">") as ch order by ID"</span><span>; </span></span></li><li><span>$result = mysql_query($sql) or die(<span class="string">'Query failed: '</span><span> . mysql_error()); </span></span></li><li class="alt"><span> </span></li><li><span><span class="comment">// Update Row Information</span><span> </span></span></li><li class="alt"><span>$msg=<span class="string">""</span><span>; </span></span></li><li><span><span class="keyword">while</span><span> ($line = mysql_fetch_array($result, MYSQL_ASSOC)) </span></span></li><li class="alt"><span>{ </span></li><li><span>   $msg = $msg . <span class="string">""</span><span> . </span></span></li><li class="alt"><span>        <span class="string">""</span><span> . </span></span></li><li><span>        <span class="string">""</span><span>; </span></span></li><li class="alt"><span>} </span></li><li><span>$msg=$msg . <span class="string">"<table style="</span><span>color: blue; font-family: verdana, arial; " . </span></span></li><li class="alt"><span>  <span class="string">"font-size: 10pt;"</span><span> border=</span><span class="string">"0"</span><span>> </span></span></li><li><span>  <tbody><tr><td><span class="string">" . $line["</span><span>cdt"] . </span></span></li><li class="alt"><span>  <span class="string">" </td><td>"</span><span> . $line[</span><span class="string">"username"</span><span>] . </span></span></li><li><span>  <span class="string">": </td><td>"</span><span> . $line[</span><span class="string">"msg"</span><span>] . </span></span></li><li class="alt"><span>  <span class="string">"</td></tr></tbody></table>"</span><span>; </span></span></li><li><span> </span></li><li class="alt"><span>echo $msg; </span></li><li><span> </span></li><li class="alt"><span>数据准备就绪的同时，JavaScript函数会收集来自于PHP接收到的数据。这些数据将被安排置于DIV标签内。oxmlHttp.responseText会保留从PHP程序接收到的聊天消息，并复制到DIV标签的document.getElementById(&ldquo;DIV_CHAT&rdquo;).innerHTML属性。 </span></li><li><span> </span></li><li class="alt"><span>function get_chat_msg_result(t) </span></li><li><span>{ </span></li><li class="alt"><span>    <span class="keyword">if</span><span>(oxmlHttp.readyState==</span><span class="number">4</span><span> || oxmlHttp.readyState==</span><span class="string">"complete"</span><span>) </span></span></li><li><span>    { </span></li><li class="alt"><span>        <span class="keyword">if</span><span> (document.getElementById(</span><span class="string">"DIV_CHAT"</span><span>) != </span><span class="keyword">null</span><span>) </span></span></li><li><span>        { </span></li><li class="alt"><span>            document.getElementById(<span class="string">"DIV_CHAT"</span><span>).innerHTML =  oxmlHttp.responseText; </span></span></li><li><span>            oxmlHttp = <span class="keyword">null</span><span>; </span></span></li><li class="alt"><span>        } </span></li><li><span>        var scrollDiv = document.getElementById(<span class="string">"DIV_CHAT"</span><span>); </span></span></li><li class="alt"><span>        scrollDiv.scrollTop = scrollDiv.scrollHeight; </span></li><li><span>    } </span></li><li class="alt"><span>} </span></li></ol>

下面的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
英文原文：Chat Application in PHP

---

---