php详解如何实现简单的网页聊天室
php详解如何实现简单的网页聊天室
一、总结
一句话总结：请求数据用的ajax，
1、为什么这边发送的消息内容能再那边动态更新？
我的想法是设置定时器定时监听，但是感觉效率有点低
这个系统里面真的是这么做的，1秒钟请求一次，其实这里完全可以也是用定时器，但是访问数据库的操作完成可以用session来代替，session里面记录数据库数据的条数，每次更新消息的时候更新session。定时器每隔一秒请求的时候判断session是否改变，改变了就访问数据库，返回数据库中的数据，没有改变就返回false。
29 setInterval(function(){
30
31 $.get("php.php",function(a,b){
32 $("#chat .window").html(a);
33 });
34 },1000);
1 <?php
2 require_once("config.php");
3 ini_set("date.timezone","PRC");
4 $numsql = "select * from dunling_chat";
5 $numery = mysql_query($numsql,$config);
6 $num = mysql_num_rows($numery);
7 if($num<5){
8 $num="0";
9 }else{
10 $num = $num - 5;
11 }
12 $sql = "select * from dunling_chat order by id asc limit $num,5";
13 $ery = mysql_query($sql,$config);
14 while($chat = mysql_fetch_array($ery)){
15 $time = $chat['time'];
16 $time = date("H:i:s",$time);
17 echo '<span style="color:#FF0000">';
18 echo $chat['nicheng'].' </span><span style="color:green;">'.$time." </span><br/>";
19 echo $chat['content'].'<P><p/>';
20 }
21 ?>
2、如何验证有没有设置过昵称（相当于别的系统里面有没有登录）？
用的是ajax，就是jquery的$.post，然后在php那边判断有没有昵称的session，根据这个传递返回值，js这边根据返回值判断设置过昵称没有，没有的话就让设置昵称的div显示出来
1 $(function(){
2 $.post("check.php",{
3 aaa:'yes'
4 },function(a,b){
5 if(a=="nocookie"){
6 $("#bg").show();
7 $("#window").show();
8 }
9 });
1 <?php
2 error_reporting(0);
3 isset($_COOKIE['nc'])?$nc = $_COOKIE['nc']:$nc = null;
4 if($nc==null){
5 echo "nocookie";
6 }else{
7 echo $nc;
8 }
9 ?>
3、如何实现发送消息之后5秒才能继续发送？
5秒这里用的定时器
发送消息之后发送框没法点击，那肯定是用的disabled属性咯
38 $("#send").click(function(){
39 var content = $("#content").val();
40 var nicheng = $("#nicheng").val();
41 $(this).val("正在发送...");
42 $(this).attr("disabled","True");
43 $(this).css("backgroundColor","#747474");
44 $.post("send.php",{
45 content:content,
46 nicheng:nicheng
47 },function(a,b){
48 if(a == "ok"){
49 $("#content").val(null)
50 return false;
51 }else{
52 alert('发送失败!');
53 return false;
54 }
55 });
56
57
58 var count = 5;
59 var countdown = setInterval(CountDown, 1000);//每1秒执行一次
60 function CountDown() {
61 $("#send").val("发送成功,等待" + count + "秒后可继续发送！");
62 if (count == 0) {
63 $("#send").attr("disabled",false);
64 $("#send").val("发送");
65 $("#send").css("backgroundColor","#FB5200");
66 clearInterval(countdown);//clearInterval() 方法可取消由 setInterval() 设置的 timeout。
67 }
68 count--;
69 }
70
71
72
73 });
4、error_reporting(0);是什么意思？
关闭所有PHP错误报告
1 <?php
2 error_reporting(0);
3 isset($_COOKIE['nc'])?$nc = $_COOKIE['nc']:$nc = null;
4 if($nc==null){
5 echo "nocookie";
6 }else{
7 echo $nc;
8 }
9 ?>
5、index.html中的js代码应该放在哪放在哪？
放在index.html页面的话显得乱
所以可以找一个单独的js放，这个js负责页面的数据请求
6、如何做到界面消息不会显示太多？
取数据的时候就取5条就好，要查看历史记录的时候再去取多条
12 $sql = "select * from dunling_chat order by id asc limit $num,5";
7、php数据库取出来的数据如何传给ajax？
直接echo的
29 setInterval(function(){
30
31 $.get("php.php",function(a,b){
32 $("#chat .window").html(a);
33 });
34 },1000);
1 <?php
2 require_once("config.php");
3 ini_set("date.timezone","PRC");
4 $numsql = "select * from dunling_chat";
5 $numery = mysql_query($numsql,$config);
6 $num = mysql_num_rows($numery);
7 if($num<5){
8 $num="0";
9 }else{
10 $num = $num - 5;
11 }
12 $sql = "select * from dunling_chat order by id asc limit $num,5";
13 $ery = mysql_query($sql,$config);
14 while($chat = mysql_fetch_array($ery)){
15 $time = $chat['time'];
16 $time = date("H:i:s",$time);
17 echo '<span style="color:#FF0000">';
18 echo $chat['nicheng'].' </span><span style="color:green;">'.$time." </span><br/>";
19 echo $chat['content'].'<P><p/>';
20 }
21 ?>
二、php详解如何实现简单的网页聊天室
百度盘链接：链接：https://pan.baidu.com/s/1TeoNoHOstz3MhBCC3dEN4w 密码：bjv1
1、相关知识
请求数据用的ajax，
2、代码
chat.sql：数据库文件
1 SET FOREIGN_KEY_CHECKS=0; 2 DROP TABLE IF EXISTS `dunling_chat`; 3 CREATE TABLE `dunling_chat` ( 4 `id` int(11) NOT NULL AUTO_INCREMENT, 5 `nicheng` varchar(55) COLLATE utf8_bin DEFAULT NULL, 6 `content` varchar(55) COLLATE utf8_bin DEFAULT NULL, 7 `time` varchar(55) COLLATE utf8_bin DEFAULT NULL, 8 PRIMARY KEY (`id`) 9 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
check.php：检查用户名是否设置
1 <?php 2 error_reporting(0); 3 isset($_COOKIE['nc'])?$nc = $_COOKIE['nc']:$nc = null; 4 if($nc==null){ 5 echo "nocookie"; 6 }else{ 7 echo $nc; 8 } 9 ?>
config.php：配置文件
1 <?php 2 error_reporting(0); 3 $config = mysql_connect("127.0.0.1","root","root")or die("Mysql Connect Error");//设置数据库IP，账号，密码 4 mysql_select_db("chat");//数据库库名 5 mysql_query("SET NAMES UTF8"); 6 ?>
index.css：样式设置文件
1 body{ 2 margin:0; 3 padding:0; 4 text-align:center; 5 background-color:#EEEEEE; 6 } 7 #title{ 8 width:100%; 9 height:30px; 10 margin-left:auto; 11 margin-right:auto; 12 background-color: #EEEEEE; 13 line-height:30px; 14 font-size:14px; 15 color: #FB5200; 16 } 17 #chat{ 18 width:100%; 19 height:auto; 20 display:table; 21 background-color: #EEEEEE; 22 } 23 #chat .window{ 24 width:95%; 25 height:300px; 26 background-color: #FFFFFF; 27 margin-left:auto; 28 margin-right:auto; 29 text-align:left; 30 line-height:24px; 31 font-size:14px; 32 color: #696969; 33 overflow-x: auto; 34 } 35 #chat .bottom{ 36 width:95%; 37 height:30px; 38 background-color: #EEEEEE; 39 margin-left:auto; 40 margin-right:auto; 41 line-height:30px; 42 font-size:14px; 43 color: #8A8A8A; 44 } 45 #shuru{ 46 width:95%; 47 height:60px; 48 background-color: #EEEEEE; 49 margin-left:auto; 50 margin-right:auto; 51 font-size:14px; 52 color: #8A8A8A; 53 } 54 #form{ 55 width:95%; 56 height:40px; 57 background-color: #EEEEEE; 58 margin-left:auto; 59 margin-right:auto; 60 text-align:center; 61 line-height:40px; 62 color: #FB5200; 63 font-size:14px; 64 } 65 #form input.send{ 66 width:100%; 67 height:33px; 68 line-height:30px; 69 background-color: #FB5200; 70 color:#FFFFFF; 71 border:0; 72 } 73 #form input.fanhui{ 74 width:100%; 75 height:33px; 76 line-height:30px; 77 background-color: #006B9F; 78 color:#FFFFFF; 79 border:0; 80 } 81 82 #bg{ 83 display: none; 84 width:100%; 85 height:100%; 86 left:0; 87 top:0; 88 position:fixed; 89 background-color: #D8D8D8; 90 filter:alpha(opacity=50); 91 -moz-opacity:0.5; 92 -khtml-opacity: 0.5; 93 opacity: 0.5; 94 z-index:1; 95 } 96 #window{ 97 display: none; 98 z-index:3; 99 width:100%; 100 height:100%; 101 left:0; 102 top:0; 103 position:fixed; 104 background:none; 105 } 106 107 #window .t{ 108 width:300px; 109 height:188px; 110 margin-left:auto; 111 margin-right:auto; 112 margin-top:50px; 113 z-index:20; 114 background-color: #FFFFFF; 115 } 116 #window .t .title{ 117 width:300px; 118 height:30px; 119 line-height:30px; 120 color:#FFFFFF; 121 z-index:30; 122 background-color: #282828; 123 } 124 #window .t .nc{ 125 margin-top:25px; 126 width:300px; 127 height:auto; 128 background-color:#FFFFFF; 129 } 130 131 #bottom{ 132 width:100%; 133 height:50px; 134 line-height:50px; 135 font-size:14px; 136 color: #9D9D9D; 137 } 138 #bottom a{ 139 text-decoration:none; 140 font-size:14px; 141 color: #EA4D00; 142 }
index.js：ajax请求页面，各种从后台请求数据
1 $(function(){ 2 $.post("check.php",{ 3 aaa:'yes' 4 },function(a,b){ 5 if(a=="nocookie"){ 6 $("#bg").show(); 7 $("#window").show(); 8 } 9 }); 10 11 $("#reset").click(function(){ 12 $("#bg").show(); 13 $("#window").show(); 14 }); 15 16 $("#setting").click(function(){ 17 var nc = $("#nc").val(); 18 $("#nicheng").val(nc); 19 $.post("nicheng.php",{ 20 nc:nc 21 },function(a,b){ 22 $("#bg").hide(); 23 $("#window").hide(); 24 }); 25 26 }); 27 28 29 setInterval(function(){ 30 31 $.get("php.php",function(a,b){ 32 $("#chat .window").html(a); 33 }); 34 },1000); 35 36 37 38 $("#send").click(function(){ 39 var content = $("#content").val(); 40 var nicheng = $("#nicheng").val(); 41 $(this).val("正在发送..."); 42 $(this).attr("disabled","True"); 43 $(this).css("backgroundColor","#747474"); 44 $.post("send.php",{ 45 content:content, 46 nicheng:nicheng 47 },function(a,b){ 48 if(a == "ok"){ 49 $("#content").val(null) 50 return false; 51 }else{ 52 alert('发送失败!'); 53 return false; 54 } 55 }); 56 57 58 var count = 5; 59 var countdown = setInterval(CountDown, 1000);//每1秒执行一次 60 function CountDown() { 61 $("#send").val("发送成功,等待" + count + "秒后可继续发送！"); 62 if (count == 0) { 63 $("#send").attr("disabled",false); 64 $("#send").val("发送"); 65 $("#send").css("backgroundColor","#FB5200"); 66 clearInterval(countdown);//clearInterval() 方法可取消由 setInterval() 设置的 timeout。 67 } 68 count--; 69 } 70 71 72 73 }); 74 75 76 77 78 79 80 });
index.php：入口页面，也是界面显示页面
1 <?php 2 error_reporting(0); 3 isset($_COOKIE['nc'])?$nc = $_COOKIE['nc']:$nc = null; 4 ?> 5 <!DOCTYPE html> 6 <head> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>网页微型聊天源码</title> 10 <meta name="keywords" content="网页微型聊天源码" /> 11 <meta name="description" content="网页微型聊天源码 " /> 12 <link type="text/css" href="index.css" rel="stylesheet" /> 13 <script src="jquery-1.11.1.min.js"></script> 14 <script src="index.js"></script> 15 </head> 16 <body> 17 <title>在线聊天室</title> 18 <div id="title">在线聊天室</div> 19 <div id="chat"> 20 <div class="window"></div> 21 <div class="bottom"><marquee>请大家注意文明用语并且尊守国家法律法规!</marquee></div> 22 </div> 23 <div id="shuru"><textarea style="width: 100%;height:50px;resize:none;" id="content"></textarea></div> 24 <div id="form"><input type="submit" value="发送" id="send" class="send" /><input type="hidden" id="nicheng" class="nicheng" value="<?php echo $nc;?>" /></div> 25 <div id="form"><input type="button" class="fanhui" value="重设昵称" id="reset" /></div> 26 <div id="bottom">Copyright 2018-2020 复习、总结、实例 All Rights Reserved. </div> 27 <div id="bg"></div> 28 <div id="window"> 29 <div class="t"> 30 <div class="title">设置我的昵称</div> 31 <div class="nc"> 32 33 <input type="text" value="<?php echo $nc;?>" id="nc" style="width: 60%;height:30px;text-align:center;" /><br /><br /> 34 <input type="button" id="setting" value="设置" style="width: 60%;height:30px;" /> 35 36 </div> 37 </div> 38 </div> 39 40 </body>
nicheng.php：设置用户名
1 <?php 2 error_reporting(0); 3 isset($_POST['nc'])?$nc = $_POST['nc']:$nc = null; 4 echo setcookie("nc",$nc,time()+3600*24,'/'); 5 ?>
php.php：从数据取出消息记录放到页面
1 <?php 2 require_once("config.php"); 3 ini_set("date.timezone","PRC"); 4 $numsql = "select * from dunling_chat"; 5 $numery = mysql_query($numsql,$config); 6 $num = mysql_num_rows($numery); 7 if($num<5){ 8 $num="0"; 9 }else{ 10 $num = $num - 5; 11 } 12 $sql = "select * from dunling_chat order by id asc limit $num,5"; 13 $ery = mysql_query($sql,$config); 14 while($chat = mysql_fetch_array($ery)){ 15 $time = $chat['time']; 16 $time = date("H:i:s",$time); 17 echo '<span style="color:#FF0000">'; 18 echo $chat['nicheng'].' </span><span style="color:green;">'.$time." </span><br/>"; 19 echo $chat['content'].'<P><p/>'; 20 } 21 ?>
send.php：插入消息到数据库
1 <?php 2 require_once("config.php"); 3 isset($_POST['content'])?$content=$_POST['content']:$content=null; 4 isset($_POST['nicheng'])?$nicheng=$_POST['nicheng']:$nicheng=null; 5 $time = time(); 6 $sql = "insert into dunling_chat (nicheng,content,time) values ('$nicheng','$content','$time')"; 7 $ok = mysql_query($sql,$config); 8 mysql_close(); 9 if($ok){ 10 echo "ok"; 11 } 12 ?>
