首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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

Posted in PHP onAugust 17, 2016

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

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

思路

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

消息显示区

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

<h3>消息显示区</h3>
<div id="up">
</div>
<hr />

发消息

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

<h3>发言栏</h3>
  <div id="bottom">
    <form action="./chatroom_insert.php">
      <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_bottom">
        <textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
        <input type="button" value="发言" onclick="send()" />
        发言：<span id="result"></span>
      </div>
    </form>
  </div>

板块

下面开始使用代码来实现相关的业务逻辑。

消息显示

我们的思路就是每隔一段时间，客户端向服务器发送请求，轮询获得最新的数据。

<script>

function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器获取并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将获取到的字符串转换成实体
      eval('var data = '+ajax.responseText);
      // 遍历data数组，把内部的信息一个个的显示到页面上
      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>";

      }
      // 开始向页面时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;

    }
  }
  ajax.open('get','./chatroom.php');
  ajax.send(null);  

}

// 更新信息的执行时机
window.onload = function(){
  //showmessage();  
  // 制作轮询,实现自动的页面更新
  setInterval("showmessage()",3000);
}
</script>

里面比较重要的就是setInterval函数的使用，以此来实现间隔性的触发请求事件。 

消息发送

关于消息发送，通过表单形式发给服务器即可。我们这里使用了目前Html5的一个最新的技术，FormData，一般来说目前的主流的现代浏览器都是支持这一技术了。使用FormData我们可以方便的获取一个表单的数据。

注意： FormData收集表单数据的时候是以键值对的形式搜集的，所以对应的表单项一定要有name属性，否则表单将收集不到该项的数据值。

<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.php');
    xhr.send(formdata);
    document.getElementById("msg").value="";
    //return false;
  }

  // 2秒后实现提示信息的消失
  function hideresult(){
    document.getElementById('result').innerHTML = "";  
  }
</script>

值得深思的是：setTimeout函数实现的功能。在得到服务器端的反馈信息之后，及时的更新到发送按钮后面，给用户一个很好的体验。

优化

做完这里基本上就可以实现聊天了。但是实现的效果会非常的不好，主要是有以下几点。
 •没有滚动显示，每次都得手动的查看最新消息。
 •获取到的数据有很多的重复数据，既浪费流量，也不方便查看信息。 

显示非重复性的数据

对于显示重复性的数据，这是因为我们没有使用where语句，而好似每次都获取到所有的数据了。试想一下，怎样才能获取到最新的数据呢？
而且对于不同的客户端都要照顾得到。

好莱坞原则：不要来找我，我会去找你

这也是很多软件开发理念的一个体现，让客户决定来获取什么数据，而不是服务器端一棍子打死。所以我们需要在客户端发送数据请求方面最优化。

<script>
// 记录当前获取到的id的最大值，防止获取到重复的信息
var maxId = 0;
function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器获取并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将获取到的字符串转换成实体
      eval('var data = '+ajax.responseText);
      // 遍历data数组，把内部的信息一个个的显示到页面上
      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;
      }
      // 开始向页面时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;
      //showmessage.scrollTop 可以实现div底部最先展示
      // divnode.scrollHeight而已获得div的高度包括滚动条的高度
      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
    }
  }
  ajax.open('get','./chatroom.php?maxId='+maxId);
  ajax.send(null);  

}

// 更新信息的执行时机
window.onload = function(){
  //showmessage();  
  // 制作轮询,实现自动的页面更新
  setInterval("showmessage()",3000);
}
</script>

优化显示

优化显示界面是必不可少的，没有人能够容忍发送一条数据之后还得手动的查看最新的消息。所以我们要设置一下显示区域的div。

加上滚动条

<style>
  #up {
    height:320px;
    width:100%;
    overflow:auto; 
  }
</style>

每次都显示最新消息

说白了就是让底部的div永远最先显示。

//showmessage.scrollTop 可以实现div底部最先展示
// divnode.scrollHeight而已获得div的高度包括滚动条的高度
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;

完整代码

前端代码

<!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>
// 记录当前获取到的id的最大值，防止获取到重复的信息
var maxId = 0;
function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器获取并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将获取到的字符串转换成实体
      eval('var data = '+ajax.responseText);
      // 遍历data数组，把内部的信息一个个的显示到页面上
      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;
      }
      // 开始向页面时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;
      //showmessage.scrollTop 可以实现div底部最先展示
      // divnode.scrollHeight而已获得div的高度包括滚动条的高度
      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
    }
  }
  ajax.open('get','./chatroom.php?maxId='+maxId);
  ajax.send(null);  

}

// 更新信息的执行时机
window.onload = function(){
  //showmessage();  
  // 制作轮询,实现自动的页面更新
  setInterval("showmessage()",3000);
}
</script>

</head>

<body style="background-color:silver">
<div id="main">
  <h3>消息显示区</h3>
  <div id="up">
  </div>
  <hr />
  <h3>发言栏</h3>
  <div id="bottom">
    <form action="./chatroom_insert.php">
      <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_bottom">
<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.php');
    xhr.send(formdata);
    document.getElementById("msg").value="";
    //return false;
  }

  // 2秒后实现提示信息的消失
  function hideresult(){
    document.getElementById('result').innerHTML = "";  
  }
</script>
        <textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
        <input type="button" value="发言" onclick="send()" />
        发言：<span id="result"></span>
      </div>
    </form>
  </div>

</div>
</body>
</html>

 数据库表结构

mysql> desc message;
+----------+--------------+------+-----+---------+----------------+
| Field  | Type     | Null | Key | Default | Extra     |
+----------+--------------+------+-----+---------+----------------+
| id    | int(100)   | NO  | PRI | NULL  | auto_increment |
| msg   | varchar(255) | NO  |   | NULL  |        |
| sender  | varchar(30) | NO  |   | NULL  |        |
| receiver | varchar(30) | NO  |   | NULL  |        |
| color  | varchar(10) | YES |   | NULL  |        |
| biaoqing | varchar(10) | YES |   | NULL  |        |
| add_time | datetime   | YES |   | NULL  |        |
+----------+--------------+------+-----+---------+----------------+
7 rows in set (0.00 sec)

服务器端代码

<?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实现简易无刷新在线聊天室

- Author -

Marksinoberg

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP中动态HTML的输出技术
Oct 09 PHP
简单的PHP多图上传小程序代码
Jul 17 PHP
PHP禁止页面缓存的代码
Oct 23 PHP
PHP中判断变量为空的几种方法小结
Nov 12 PHP
php中sql注入漏洞示例 sql注入漏洞修复
Jan 24 PHP
php实现求相对时间函数
Jun 15 PHP
Zend Framework教程之MVC框架的Controller用法分析
Mar 07 PHP
Zend Framework教程之Zend_Config_Xml用法分析
Mar 23 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
Nov 07 PHP
搜索附近的人PHP实现代码
Feb 11 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
Feb 14 PHP
Laravel框架创建路由的方法详解
Sep 04 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
Aug 17 #PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
Aug 17 #PHP
总结PHP中数值计算的注意事项
Aug 14 #PHP
示例详解Laravel的注册重构
Aug 14 #PHP
PHP实现路由映射到指定控制器
Aug 13 #PHP
Yii2.0中的COOKIE和SESSION用法
Aug 12 #PHP
PHP Oauth授权和本地加密实现方法
Aug 12 #PHP
NumPy(2) TypeScript(2) RTMP(1) 扫雷(1) text-shadow(1) 单向链表(1) 模拟登录(1) Scheduled(1) 双向链表(6) 区块链(2)
You might like
德劲1107的电路分析与打磨
2021/03/02 无线电
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
php连接mysql数据库
2017/03/21 PHP
js中的string.format函数代码
2020/08/11 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Django后台admin的使用详解
2019/07/08 Python
python tkinter控件布局项目实例
2019/11/04 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
优秀求职自荐信怎样写
2013/12/18 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
本科应届生求职信
2014/08/05 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
党员作风建设整改方案
2014/10/27 职场文书
领导欢迎词范文
2015/01/26 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers