一、总结
一句话总结：请求数据用的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 ?>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
