Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室

为更好的运用这两天学到的Ajax的相关的知识，就做了个简单的在线网络聊天室。

思路

实现聊天室，基本上就是通过Ajax来传递数据，让PHP来实现对数据的差入和查找，再交给前端JavaScript实现页面的更新，达到即时聊天的功能。

消息显示区

消息显示区就是一个DIV块，我们会借助Ajax获取到服务器端信息之后，使用JavaScript来更新页面。

rush:xhtml;">

消息显示区

发消息

发消息模块，其实说白了，就是向服务器上插入数据的过程，也是属于比较简单的。

rush:xhtml;">

发言栏

ottom">

PHP">

颜色表情聊天对象

ottom">

<input type="button" value="发言" onclick="send()" />
        发言：<span id="result"></span>
      </div>
    </form>
  </div>
</pre>
</div>
<p><h3>板块</h3></p>
<p>下面开始使用<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>来实现相关的业务逻辑。</p>
<p><span style="color: #800000"><h3>消息<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a></h3></p>
<p>我们的思路就是每隔一段时间，客户端向服务器发送请求，轮询获得最新的数据。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
<script>
<p>function showmessage(){<br />
var ajax = new XMLHttpRequest();<br />
// 从服务器<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>并处理数据<br />
ajax.onreadystatechange = function(){<br />
if(ajax.readyState==4) {<br />
//alert(ajax.responseText);<br />
// 将<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的<a href="https://www.jb51.cc/tag/zifuchuanzhuanhuan/" target="_blank" class="keywords">字符串转换</a>成实体<br />
eval('var data = '+ajax.responseText);<br />
// 遍历data数组，把内部的信息<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>个的<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上<br />
var s = "";<br />
for(var i = 0 ; i < data.length;i++){<br />
data[i];<br />
s += "("+data[i].add_time+") >>>";<br />
s += "<p style='color:"+data[i].color+";'>";<br />
s += data[i].sender +"对" + data[i].receiver +""+ data[i].biaoqing+"说：" + data[i].msg;<br />
s += "</p>";</p>
<pre><code>  }
  // 开始向<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>时追加信息
  var showmessage = document.getElementById("up");
  showmessage.innerHTML += s;

}</code></pre>
<p>}<br />
ajax.open('get','./chatroom.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>');<br />
ajax.send(null);  </p>
<p>}</p>
<p>// <a href="https://www.jb51.cc/tag/gengxinxinxi/" target="_blank" class="keywords">更新信息</a>的执行时机<br />
window.onload = function(){<br />
//showmessage();<br />
// 制作轮询,实现<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>更新<br />
setInterval("showmessage()",3000);<br />
}</p>
</script>
</pre>
</div>
<p>里面比较重要的就是setInterval<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的使用，以此来实现间隔性的触发请求事件。
</p>
<p><h3>消息发送</h3></p>
<p>关于消息发送，通过表单形式发给服务器即可。我们这里使用了目前Html5的<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>最新的技术，FormData，一般来说目前的主流的现代浏览器都是<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>这一技术了。使用FormData我们可以方便的<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>表单的数据。</p>
<p><span style="color: #800000"><h3>注意：</h3> FormData收集表单数据的时候是以键值对的形式搜集的，所以对应的表单项一定要有name<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>，否则表单将收集不到该项的数据值。
</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
 <script>
  function send(){
    // 向服务器差入相关的数据
    var form = document.getElementsByTagName('form')[0];
    var formdata = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4) {
        //alert(xhr.resposneText);
        document.getElementById("result").innerHTML = xhr.responseText;
        setTimeout("hideresult()",2000);
      }
    }
    xhr.open('post','./chatroom_insert.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>');
    xhr.send(formdata);
    document.getElementById("msg").value="";
    //return false;
  }
<p>// 2秒后实现<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>信息的消失<br />
function hideresult(){<br />
document.getElementById('result').innerHTML = "";<br />
}</p>
</script>
</pre>
</div>
<p>值得深思的是：setTimeout<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>实现的<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>。在得到服务器端的反馈信息之后，及时的更新到发送按钮后面，给<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>很好的体验。
</p>
<p><h3>优化</h3></p>
<p>做完这里基本上就可以实现聊天了。但是实现的<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>会非常的不好，主要是有以下几点。
•没有滚动<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>，每次都得手动的查看最新消息。
•<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的数据有很多的重复数据，既浪费流量，也不方便查看信息。
</p>
<p><h3><a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>非重复性的数据</h3></p>
<p>对于<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>重复性的数据，这是因为我们没有使用where语句，而好似每次都<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到所有的数据了。试想一下，怎样才能<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到最新的数据呢？ 
而且对于不同的客户端都要照顾得到。</p>
<p><span style="font-size: medium"><span style="color: #800000"><h3>好莱坞原则：不要来找我，我会去找你 
</h3></p>
<p>这也是很多软件开发理念的<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>体现，让客户决定来<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>什么数据，而不是服务器端一棍子打死。所以我们需要在客户端发送数据请求方面最优化。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
<script>
// 记录当前<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的id的最大值，防止<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到重复的信息
var maxId = 0;
function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的<a href="https://www.jb51.cc/tag/zifuchuanzhuanhuan/" target="_blank" class="keywords">字符串转换</a>成实体
      eval('var data = '+ajax.responseText);
      // 遍历data数组，把内部的信息<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>个的<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上
      var s = "";
      for(var i = 0 ; i < data.length;i++){
        data[i];
        s += "("+data[i].add_time+") >>>";
        s += "<p style='color:"+data[i].color+";'>";  
        s += data[i].sender +"对" + data[i].receiver +""+ data[i].biaoqing+"说：" + data[i].msg;
        s += "</p>";
        // 把已经获得的最大的记录id更新
        maxId = data[i].id;
      }
      // 开始向<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;
      //showmessage.scrollTop 可以实现div<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>最先展示
      // divnode.scrollHeight而已获得div的高度<a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>滚动条的高度
      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
    }
  }
  ajax.open('get','./chatroom.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>?maxId='+maxId);
  ajax.send(null);  
<p>}</p>
<p>// <a href="https://www.jb51.cc/tag/gengxinxinxi/" target="_blank" class="keywords">更新信息</a>的执行时机<br />
window.onload = function(){<br />
//showmessage();<br />
// 制作轮询,3000);<br />
}</p>
</script>
</pre>
</div>
<p><h3>优化<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a></h3></p>
<p>优化<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>界面是必不可少的，没有人能够容忍发送一条数据之后还得手动的查看最新的消息。所以我们要设置一下<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>区域的div。</p>
<p><a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>滚动条</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:css;">
<style>
  #up {
    height:320px;
    width:100%;
    overflow:auto; 
  }
</style>
</pre>
</div>
<p>每次都<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>最新消息</p>
<p>说白了就是让<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>的div永远最先<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
//showmessage.scrollTop 可以实现div<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>最先展示
// divnode.scrollHeight而已获得div的高度<a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>滚动条的高度
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
</pre>
</div>
<p><h3>完整<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a></h3></p>
<p>前端<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a></p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;">
<!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>Ajax 聊天室</title>
<style>
  #up {
    height:320px;
    width:100%;
    overflow:auto; 
  }
</style>
<script>
// 记录当前<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的id的最大值，防止<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到重复的信息
var maxId = 0;
function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的<a href="https://www.jb51.cc/tag/zifuchuanzhuanhuan/" target="_blank" class="keywords">字符串转换</a>成实体
      eval('var data = '+ajax.responseText);
      // 遍历data数组，把内部的信息<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>个的<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上
      var s = "";
      for(var i = 0 ; i < data.length;i++){
        data[i];
        s += "("+data[i].add_time+") >>>";
        s += "<p style='color:"+data[i].color+";'>";  
        s += data[i].sender +"对" + data[i].receiver +""+ data[i].biaoqing+"说：" + data[i].msg;
        s += "</p>";
        // 把已经获得的最大的记录id更新
        maxId = data[i].id;
      }
      // 开始向<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;
      //showmessage.scrollTop 可以实现div<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>最先展示
      // divnode.scrollHeight而已获得div的高度<a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>滚动条的高度
      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
    }
  }
  ajax.open('get',3000);
}
</script>
</head>
<p><body style="background-color:silver"><br />
<div id="main"></p>
<h3>消息<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>区</h3>
  <div id="up">
  </div>
  <hr />
  <h3>发言栏</h3>
  <div id="b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om">
    <form action="./chatroom_insert.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>">
      <div id="chat_up">
        <span>颜色</span>
        <input type="color" name="color"/>
        <span>表情</span>
        <select name="biaoqing">
          <option value="微笑地">微笑地</option>
          <option value="猥琐地">猥琐地</option>
          <option value="和蔼地">和蔼地</option>
          <option value="目不转睛地">目不转睛地</option>
          <option value="傻傻地">傻傻地</option>
        </select>
        <span>聊天对象</span>
        <select name="receiver">
          <option value="">所有的人</option>
          <option value="老郭">老郭</option>
          <option value="小郭">小郭</option>
          <option value="大郭">大郭</option>
        </select>
      </div>
      <div id="chat_b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om">
<script>
  function send(){
    // 向服务器差入相关的数据
    var form = document.getElementsByTagName('form')[0];
    var formdata = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4) {
        //alert(xhr.resposneText);
        document.getElementById("result").innerHTML = xhr.responseText;
        setTimeout("hideresult()",'./chatroom_insert.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>');
    xhr.send(formdata);
    document.getElementById("msg").value="";
    //return false;
  }
<p>// 2秒后实现<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>信息的消失<br />
function hideresult(){<br />
document.getElementById('result').innerHTML = "";<br />
}</p>
</script>
        <textarea id="msg" name="msg" style="width:380px;height:auto;">

发言：

数据库表结构

服务器端代码

rush:PHP;"> // 获得最新的聊天信息
$conn = mysql_connect('localhost','root','mysql');
mysql_select_db('test');
mysql_query('set names utf8');

$maxId = $_GET['maxId'];

// 防止获取重复数据，本次请求的记录结果id要大鱼上次获得的id
$sql = "select * from message where id >"."'$maxId'";
$qry = MysqL_query($sql);

$info = array();
while($rst = MysqL_fetch_assoc($qry)){
$info[] = $rst;
}

// 通过json格式给客户端提供数据
echo json_encode($info);

总结与展望

总结

完整的小例子就是这样了。回顾一下，今天的收获有： •如何轮询获得数据，借助了setInterval函数 •定时消失提示的数据，借助了setTimeout函数 •如何获取最新数据：有客户端控制发送的maxId参数。 •如何优化显示：overflow实现滚动效果；divnode.scrollTop控制显示底部特效

展望 •也许你会发现，客户端发送人是固定的，那就是因为咱们没有做用户登录。如果做了用户登录，我们的发送人就可以从Session里面动态的获取。这样也能更符合人们的主观感受。

•界面做的比较烂，没有加美化效果。加上Bootstrap后效果应该会很棒。

•手机适配效果不好，另外在WindowsPhone上面颜色控件不能正常的显示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室

思路

消息显示区

消息显示区

发消息

发言栏

总结与展望

相关推荐