后端开发|php教程
JavaScript,MySQL,Ajax
后端开发-php教程
这篇文章主要介绍了Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信欢乐夹娃娃源码,ubuntu 文件提取,高性能编程之tomcat,西姆爬虫,学php可以用苹果电脑吗,石龙seo关键词优化哪家好lzw
为更好的运用这两天学到的Ajax的相关的知识，就做了个简单的在线网络聊天室。
如何获得一个网站的源码,vscode查看内存插件,推荐ubuntu教程,tomcat大括号编码,花鸟爬虫,php 5.5 性能,周口谷歌seo营销公司,h5 手机网站模板下载,学校cms模板lzw
html5射门游戏源码,vscode编译go,ubuntu升级系统,tomcat 多实例,sqlite 微信,广州微信网页设计,discuz数据库在哪里,服务器ip租用,discuz兴趣部落插件,前端可视化框架和工具,天眼查爬虫,php聊天,网站优化推广seo,springboot网关视频,织梦标签调用的是什么,仿《砍柴》网站程序,手机怎么滑块登陆网页,登录窗口模板,百度推广后台估算工具,joomla 页面,后台管理系统的作用,系统程序源代码lzw
思路
实现聊天室，基本上就是通过Ajax来传递数据，让PHP来实现对数据的差入和查找，再交给前端JavaScript实现页面的更新，达到即时聊天的功能。
消息显示区
消息显示区就是一个p块，我们会借助Ajax获取到服务器端信息之后，使用JavaScript来更新页面。
消息显示区
发消息
发消息模块，其实说白了，就是向服务器上插入数据的过程，也是属于比较简单的。
发言栏
颜色表情 微笑地猥琐地和蔼地目不转睛地傻傻地聊天对象 所有的人老郭小郭大郭
发言：
板块
下面开始使用代码来实现相关的业务逻辑。
消息显示
我们的思路就是每隔一段时间，客户端向服务器发送请求，轮询获得最新的数据。
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 >>"; s += "
";s += data[i].sender +" 对 " + data[i].receiver +" "+ data[i].biaoqing+"说：" + data[i].msg; s += "
";}// 开始向页面时追加信息var showmessage = document.getElementById("up");showmessage.innerHTML += s; } } ajax.open(get,./chatroom.php); ajax.send(null); }// 更新信息的执行时机window.onload = function(){ //showmessage(); // 制作轮询,实现自动的页面更新 setInterval("showmessage()",3000);}
里面比较重要的就是setInterval函数的使用，以此来实现间隔性的触发请求事件。
消息发送
关于消息发送，通过表单形式发给服务器即可。我们这里使用了目前Html5的一个最新的技术，FormData，一般来说目前的主流的现代浏览器都是支持这一技术了。使用FormData我们可以方便的获取一个表单的数据。
注意： FormData收集表单数据的时候是以键值对的形式搜集的，所以对应的表单项一定要有name属性，否则表单将收集不到该项的数据值。
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( esult).innerHTML = ""; }
值得深思的是：setTimeout函数实现的功能。在得到服务器端的反馈信息之后，及时的更新到发送按钮后面，给用户一个很好的体验。
优化
做完这里基本上就可以实现聊天了。但是实现的效果会非常的不好，主要是有以下几点。
•没有滚动显示，每次都得手动的查看最新消息。
•获取到的数据有很多的重复数据，既浪费流量，也不方便查看信息。
显示非重复性的数据
对于显示重复性的数据，这是因为我们没有使用where语句，而好似每次都获取到所有的数据了。试想一下，怎样才能获取到最新的数据呢？
而且对于不同的客户端都要照顾得到。
好莱坞原则：不要来找我，我会去找你
这也是很多软件开发理念的一个体现，让客户决定来获取什么数据，而不是服务器端一棍子打死。所以我们需要在客户端发送数据请求方面最优化。
// 记录当前获取到的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 >>"; s += "
";s += data[i].sender +" 对 " + data[i].receiver +" "+ data[i].biaoqing+"说：" + data[i].msg; s += "
"; // 把已经获得的最大的记录id更新 maxId = data[i].id;}// 开始向页面时追加信息var showmessage = document.getElementById("up");showmessage.innerHTML += s;//showmessage.scrollTop 可以实现p底部最先展示// pnode.scrollHeight而已获得p的高度包括滚动条的高度showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height; } } ajax.open(get,./chatroom.php?maxId=+maxId); ajax.send(null); }// 更新信息的执行时机window.onload = function(){ //showmessage(); // 制作轮询,实现自动的页面更新 setInterval("showmessage()",3000);}
优化显示
优化显示界面是必不可少的，没有人能够容忍发送一条数据之后还得手动的查看最新的消息。所以我们要设置一下显示区域的p。
加上滚动条
#up { height:320px; width:100%; overflow:auto; }
每次都显示最新消息
说白了就是让底部的p永远最先显示。
//showmessage.scrollTop 可以实现p底部最先展示// pnode.scrollHeight而已获得p的高度包括滚动条的高度showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
完整代码
前端代码
";s += data[i].sender +" 对 " + data[i].receiver +" "+ data[i].biaoqing+"说：" + data[i].msg; s += "
"; // 把已经获得的最大的记录id更新 maxId = data[i].id;}// 开始向页面时追加信息var showmessage = document.getElementById("up");showmessage.innerHTML += s;//showmessage.scrollTop 可以实现p底部最先展示// pnode.scrollHeight而已获得p的高度包括滚动条的高度showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height; } } ajax.open(get,./chatroom.php?maxId=+maxId); ajax.send(null); }// 更新信息的执行时机window.onload = function(){ //showmessage(); // 制作轮询,实现自动的页面更新 setInterval("showmessage()",3000);}
消息显示区
发言栏
颜色表情 微笑地猥琐地和蔼地目不转睛地傻傻地聊天对象 所有的人老郭小郭大郭
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( esult).innerHTML = ""; }发言：
数据库表结构
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)
服务器端代码
"."$maxId\";$qry = mysql_query($sql);$info = array();while($rst = mysql_fetch_assoc($qry)){ $info[] = $rst;}// 通过json格式给客户端提供数据echo json_encode($info);?>
总结与展望
总结
完整的小例子就是这样了。回顾一下，今天的收获有：
•如何轮询获得数据，借助了setInterval函数
•定时消失提示的数据，借助了setTimeout函数
•如何获取最新数据：有客户端控制发送的maxId参数。
•如何优化显示：overflow实现滚动效果；pnode.scrollTop控制显示底部特效
展望
•也许你会发现，客户端发送人是固定的，那就是因为咱们没有做用户登录。如果做了用户登录，我们的发送人就可以从Session里面动态的获取。这样也能更符合人们的主观感受。
•界面做的比较烂，没有加美化效果。加上Bootstrap后效果应该会很棒。
•手机适配效果不好，另外在WindowsPhone上面颜色控件不能正常的显示。
php+webSoket实现聊天室示例代码（附源码）
实例详解Python+Slack API 如何实现聊天机器人
