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 ?>