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

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上面颜色控件不能正常的显示。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/a2716eb79b1e159d96ca1a03a2816a4b.html