PHP Ajax搭建簡易聊天室-php教程-PHP中文網

首頁

後端開發

php教程

PHP Ajax搭建簡易聊天室

墨辰丷

May 10, 2018 pm 04:19 PM

ajaxphp聊天室

本篇文章主要講解php ajax搭建簡易聊天室實踐，文中有關php，ajax的內容，有需要的小夥伴參考下。

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
    <head>  
        <title>新建网页</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="description" content="" />  
        <meta name="keywords" content="" />  
  
        <link rel="stylesheet" style="text/css" href="./css/talk.css" />  
  
        <script type="text/javascript">  
  
        var maxID = 0;  
        //获取最新的聊天消息  
        function showmsg(){  
            //ajax去获取  
            var xhr = new XMLHttpRequest();  
            xhr.onreadystatechange = function(){  
                if(xhr.readyState==4){  
                    eval("var jn_info="+xhr.responseText);  
                    //<p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>  
                    var s = "";  
                    for(var i=0; i<jn_info.length; i++){  
                        s += "<p style=&#39;color:"+jn_info[i].color+"&#39;>"+jn_info[i].sender+" 对 ";  
                        s += jn_info[i].receiver+" "+jn_info[i].biaoqing+" 说：";  
                        s += jn_info[i].msg+"("+jn_info[i].add_time+")</p>";  
                        //把已经获取的最大id值赋予给maxID  
                        maxID = jn_info[i].id;  
                    }  
                    var hm =document.getElementById(&#39;show_msg&#39;);   
                    hm.innerHTML += s;  
  
                    //设置div滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置div有滚动条：css： height:327px; overflow:auto;)  
                    hm.scrollTop = hm.scrollHeight;  //滚动条始终在最下方。scrolltop表示滚动条卷起的高度，scrollheight是整个div的高度。  
                }  
            }  
            xhr.open(&#39;get&#39;,&#39;./data.php?maxID=&#39;+maxID);  
            xhr.send(null);  
        }  
        //页面加载完毕就要显示最新聊天消息  
        window.onload = function(){  
            //每间隔2s就执行一次  
            setInterval("showmsg()",2000);  
        }  
        </script>  
  
        <style type="text/css">  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div id="left">  
                <h2 id="在线名单-人">在线名单：（5人）</h2>  
                <ul id="user">  
                    <li>帅哥：恶魔</li>  
                    <li>靓妹：甜甜</li>  
                    <li>帅哥：诸葛</li>  
                    <li>帅哥：成就梦想</li>  
                    <li>靓妹：郁金香</li>  
                </ul>  
                <ul id="anniu">  
                    <li><input type="button" value="刷新名单" ></li>  
                    <li><input type="button" value="刷新屏幕" ></li>  
                    <li><input type="button" value="退出聊天" ></li>  
                </ul>  
            </div>  
            <div id="right">  
                <div id="content">  
                    <h2 id="有什么意见和建议欢迎大家踊跃提出">有什么意见和建议欢迎大家踊跃提出</h2>  
                    <hr />  
                    <div id="show_msg">  
                        <p style="color:red">PHP爱好者聊天室公告：欢迎恶魔来到聊天室(22:05:35)</p>  
                        <p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>  
                        <p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>  
                        <p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>  
                        <p style="color:red">PHP爱好者聊天室公告：欢迎天使来到聊天室(22:05:35)</p>  
                        <p>天使 对 大家 微笑 说：你来了啊(22:05:35)</p>  
                    </div>  
                </div>  
                <div id="send">  
                    <form>  
                    <div id="control">  
                    颜色：  
                    <select id="color" name="color">  
                        <option value="">请选择</option>  
                        <option  style="color:#FF8888" value="#FF8888">爱的暗示</option>  
                        <option  style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option>  
                        <option  style="color:#0000FF" value="#0000FF">碧空蓝天</option>  
                        <option  style="color:#9F88FF" value="#9F88FF">灰蓝种族</option>  
                        <option  style="color:#000088" value="#000088 ">蔚蓝海洋</option>  
                        <option  style="color:#77FFEE" value="#77FFEE">清清之蓝</option>  
                        <option  style="color:#4400B3" value="#4400B3">发亮篮紫</option>  
                        <option  style="color:#A500CC" value="#A500CC">紫的拘谨</option>  
                        <option  style="color:#B088FF" value="#B088FF">卡其制服</option>  
                        <option  style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option>  
                        <option  style="color:#DC143C" value="#DC143C">卡布其诺</option>  
                        <option  style="color:#A52A2A" value="#A52A2A">苦涩心红</option>  
                        <option  style="color:#FF0000" value="#FF0000">正宗喜红</option>  
                        <option  style="color:#990099" value="#990099">红的发紫</option>  
                        <option style="color:#FF0000" value="#FF0000">红旗飘飘</option>  
                        <option style="color:#D2691E" value="#D2691E ">黄金岁月</option>  
                        <option style="color:#800080" value="#800080">紫金绣贴</option>  
                        <option style="color:#006400" value="#006400">橄榄树绿</option>  
                        <option style="color:#000000" value="#000000">绝对黑色</option>   
                    </select>  
                    表情：  
                    <select id="biaoqing" name="biaoqing">  
                        <option value="">请选择</option>  
                        <option value="笑着">笑着</option>  
                        <option value="高兴地">高兴地</option>  
                        <option value="含情脉脉">含情脉脉</option>  
                        <option value="微笑">微笑</option>  
                        <option value="幸福">幸福</option>  
                        <option value="有点脸红">有点脸红</option>  
                        <option value="使劲安慰">使劲安慰</option>  
                        <option value="自言自语">自言自语</option>  
                        <option value="差点要哭">差点要哭</option>  
                        <option value="嚎啕大哭">嚎啕大哭</option>  
                        <option value="一把鼻涕">一把鼻涕</option>  
                        <option value="很无辜">很无辜</option>  
                        <option value="流口水">流口水</option>  
                        <option value="神秘兮兮">神秘兮兮</option>  
                        <option value="幸灾乐祸">幸灾乐祸</option>  
                        <option value="很不服气">很不服气</option>  
                        <option value="不怀好意">不怀好意</option>  
                        <option value="拳打脚踢">拳打脚踢</option>  
                        <option value="不知所措">不知所措</option>  
                        <option value="翻箱倒柜">翻箱倒柜</option>  
                        <option value="很遗憾">很遗憾</option>  
                        <option value="很严肃">很严肃</option>  
                        <option value="善意警告">善意警告</option>  
                        <option value="正气凛然">正气凛然</option>  
                        <option value="哈欠连天">哈欠连天</option>  
                        <option value="小声的">小声的</option>  
                        <option value="大声的">大声的</option>  
                        <option value="尖叫一声">尖叫一声</option>  
                        <option value="遗憾的">遗憾的</option>  
                        <option value="无精打采">无精打采</option>  
                        <option value="想吐">想吐</option>  
                        <option value="真诚">真诚</option>  
                        <option value="不好意思">不好意思</option>  
                        <option value="扭捏的">扭捏的</option>  
                        <option value="腼腆的">腼腆的</option>  
                        <option value="很诧异">很诧异</option>  
                        <option value="依依不舍">依依不舍</option>  
                    </select>  
                    聊天对象：  
                    <select id="receiver" name="receiver">  
                        <option value="">所有的人</option>   
                        <option value="恶魔">恶魔</option>  
                        <option value="甜甜">甜甜</option>  
                        <option value="诸葛">诸葛</option>  
                        <option value="成就梦想">成就梦想</option>  
                        <option value="郁金香">郁金香</option>  
                    </select>  
                    <br />  
                    <textarea id="msg" name="msg"></textarea>  
                    <input type="button" value="发送" onclick="sendmsg()" />  
                    <span id="result"></span>  
                    </div>  
                    </form>  
                </div>  
            </div>  
        </div>  
    </body>  
</html>  
<script type="text/javascript">  
function sendmsg(){  
    //发表聊天消息  FormData+Ajax合作  
    var fm = document.getElementsByTagName(&#39;form&#39;)[0];  
    var fd = new FormData(fm);  
    var xhr = new XMLHttpRequest();  
    xhr.onreadystatechange = function(){  
        if(xhr.readyState==4){  
            document.getElementById(&#39;result&#39;).innerHTML = xhr.responseText;  
            //表单域信息归位  
            document.getElementById(&#39;color&#39;).value="";  
            document.getElementById(&#39;biaoqing&#39;).value="";  
            document.getElementById(&#39;receiver&#39;).value="";  
            document.getElementById(&#39;msg&#39;).value="";  
            //"留言成功"标志归位,2s后归位  
            setTimeout("guiflag()",2000);  
        }  
    }  
    xhr.open(&#39;post&#39;,&#39;./send.php&#39;);  
    xhr.send(fd);  
}  
//"留言成功"标志归位  
function guiflag(){  
    document.getElementById(&#39;result&#39;).innerHTML = "";  
}  
</script>

#data.php（後端，從資料庫取得所有聊天資訊）:

<?php  
  
//随时获取最新的聊天消息  
$link = mysql_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;123456&#39;);  
mysql_select_db(&#39;shop0811&#39;,$link);  
mysql_query(&#39;set names utf8&#39;);  
  
$maxID = $_GET[&#39;maxID&#39;];  
//获取聊天消息,根据maxID做限制查询获取(避免获取重复消息)  
$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);

send.php（後端，將發送的聊天記錄存入資料庫）:

<?php  
  
//发表聊天消息，服务器端  
$link = mysql_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;123456&#39;);  
mysql_select_db(&#39;shop0811&#39;,$link);  
mysql_query(&#39;set names utf8&#39;);  
  
$msg        = $_POST[&#39;msg&#39;];  
$receiver   = $_POST[&#39;receiver&#39;];  
$color      = $_POST[&#39;color&#39;];  
$biaoqing   = $_POST[&#39;biaoqing&#39;];  
  
$sql = "insert into message values (null,&#39;$msg&#39;,&#39;admin&#39;,&#39;$receiver&#39;,&#39;$color&#39;,&#39;$biaoqing&#39;,now())";  
if(mysql_query($sql)){  
    echo "发表留言成功！";  
}else{  
    echo "发表留言失败！";  
}

talk.css（引入的外部CSS檔案） :

* {margin:0;padding:0;border:0;}  
#main {width:900px; height:500px; background:pink; margin:auto; margin-top:10px;}  
#left {width:200px; height:500px;background:#F5DEB3; float:left;}  
#right {width:700px; height:500px; background:rgb(206,263,49); float:left;}  
#content {height:379px; padding-top:1px;}  
#send {height:120px; background:rgb(51,175,234);}  
#control {position:relative; left:75px; top:18px;}  
select,textarea {border:1px solid gray;}  
#msg {width:410px;height:52px; margin-top:5px;}  
#content-title{color:green;font-size:14px;width:245px;margin:10px auto;}  
hr {border:1px solid gray; width:600px; margin:auto;}  
#show_msg {width:600px; margin-left:47px;margin-top:10px;font-size:14px;font-weight:bold;  
    height:327px;  
    overflow:auto;  
}  
#left h2 {color:#8B4513;font-size:14px;position:relative; left:36px;top:24px; width:150px; }  
#left #user { position:relative; top:46px;left:48px;   }  
  
ul {font-size:12px;  list-style:none; width:110px; }  
  
#anniu {margin-top:280px; margin-left:50px; }  
#anniu input {margin-top:3px; width:98px;height:30px; background:#CD853F; color:white; border:2px solid white;}

相關推薦：

#php基於websocket搭建簡易聊天室實作

#php基於websocket搭建簡易聊天室實作_php實例

php websocket搭建簡易聊天室實作

以上是PHP Ajax搭建簡易聊天室的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

PHP與Python：了解差異Apr 11, 2025 am 12:15 AM

PHP和Python各有優勢，選擇應基於項目需求。 1.PHP適合web開發，語法簡單，執行效率高。 2.Python適用於數據科學和機器學習，語法簡潔，庫豐富。

php：死亡還是簡單地適應？Apr 11, 2025 am 12:13 AM

PHP不是在消亡，而是在不斷適應和進化。 1)PHP從1994年起經歷多次版本迭代，適應新技術趨勢。 2)目前廣泛應用於電子商務、內容管理系統等領域。 3)PHP8引入JIT編譯器等功能，提升性能和現代化。 4)使用OPcache和遵循PSR-12標準可優化性能和代碼質量。

PHP的未來：改編和創新Apr 11, 2025 am 12:01 AM

PHP的未來將通過適應新技術趨勢和引入創新特性來實現：1)適應云計算、容器化和微服務架構，支持Docker和Kubernetes；2)引入JIT編譯器和枚舉類型，提升性能和數據處理效率；3)持續優化性能和推廣最佳實踐。

您什麼時候使用特質與PHP中的抽像類或接口？Apr 10, 2025 am 09:39 AM

在PHP中，trait適用於需要方法復用但不適合使用繼承的情況。 1)trait允許在類中復用方法，避免多重繼承複雜性。 2)使用trait時需注意方法衝突，可通過insteadof和as關鍵字解決。 3)應避免過度使用trait，保持其單一職責，以優化性能和提高代碼可維護性。

什麼是依賴性注入容器（DIC），為什麼在PHP中使用一個？Apr 10, 2025 am 09:38 AM

依賴注入容器（DIC）是一種管理和提供對象依賴關係的工具，用於PHP項目中。 DIC的主要好處包括：1.解耦，使組件獨立，代碼易維護和測試；2.靈活性，易替換或修改依賴關係；3.可測試性，方便注入mock對象進行單元測試。

與常規PHP陣列相比，解釋SPL SplfixedArray及其性能特徵。Apr 10, 2025 am 09:37 AM

SplFixedArray在PHP中是一種固定大小的數組，適用於需要高性能和低內存使用量的場景。 1)它在創建時需指定大小，避免動態調整帶來的開銷。 2)基於C語言數組，直接操作內存，訪問速度快。 3)適合大規模數據處理和內存敏感環境，但需謹慎使用，因其大小固定。

PHP如何安全地上載文件？Apr 10, 2025 am 09:37 AM

PHP通過$\_FILES變量處理文件上傳，確保安全性的方法包括：1.檢查上傳錯誤，2.驗證文件類型和大小，3.防止文件覆蓋，4.移動文件到永久存儲位置。

什麼是無效的合併操作員（??）和無效分配運算符（?? =）？Apr 10, 2025 am 09:33 AM

JavaScript中處理空值可以使用NullCoalescingOperator(??)和NullCoalescingAssignmentOperator(??=)。 1.??返回第一個非null或非undefined的操作數。 2.??=將變量賦值為右操作數的值，但前提是該變量為null或undefined。這些操作符簡化了代碼邏輯，提高了可讀性和性能。

See all articles