当前位置:Gxlcms > PHP教程 > PHPAjax搭建简易聊天室

PHPAjax搭建简易聊天室

时间:2021-07-01 10:21:17 帮助过:5人阅读

本篇文章主要讲解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='color:"+jn_info[i].color+"'>"+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('show_msg');   
                    hm.innerHTML += s;  
  
                    //设置div滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置div有滚动条:css: height:327px; overflow:auto;)  
                    hm.scrollTop = hm.scrollHeight;  //滚动条始终在最下方。scrolltop表示滚动条卷起的高度,scrollheight是整个div的高度。  
                }  
            }  
            xhr.open('get','./data.php?maxID='+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>在线名单:(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="content-title">有什么意见和建议欢迎大家踊跃提出</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('form')[0];  
    var fd = new FormData(fm);  
    var xhr = new XMLHttpRequest();  
    xhr.onreadystatechange = function(){  
        if(xhr.readyState==4){  
            document.getElementById('result').innerHTML = xhr.responseText;  
            //表单域信息归位  
            document.getElementById('color').value="";  
            document.getElementById('biaoqing').value="";  
            document.getElementById('receiver').value="";  
            document.getElementById('msg').value="";  
            //"留言成功"标志归位,2s后归位  
            setTimeout("guiflag()",2000);  
        }  
    }  
    xhr.open('post','./send.php');  
    xhr.send(fd);  
}  
//"留言成功"标志归位  
function guiflag(){  
    document.getElementById('result').innerHTML = "";  
}  
</script>

data.php(后端,从数据库获取所有聊天信息):

<?php  
  
//随时获取最新的聊天消息  
$link = mysql_connect('localhost','root','123456');  
mysql_select_db('shop0811',$link);  
mysql_query('set names utf8');  
  
$maxID = $_GET['maxID'];  
//获取聊天消息,根据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('localhost','root','123456');  
mysql_select_db('shop0811',$link);  
mysql_query('set names utf8');  
  
$msg        = $_POST['msg'];  
$receiver   = $_POST['receiver'];  
$color      = $_POST['color'];  
$biaoqing   = $_POST['biaoqing'];  
  
$sql = "insert into message values (null,'$msg','admin','$receiver','$color','$biaoqing',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搭建简易聊天室的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行