recherche

Maison  >  Article  >  développement back-end  >  Créez une salle de discussion simple avec PHP Ajax

Créez une salle de discussion simple avec PHP Ajax

墨辰丷
墨辰丷original
2018-05-10 16:19:161974parcourir

Cet article explique principalement la pratique de création d'une salle de discussion simple avec php+ajax. Le contenu sur php et ajax dans l'article peut être consulté si vous en avez besoin.

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>在线名单：（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(&#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 (backend, obtenez toutes les informations de discussion de la base de données) :

<?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 (backend, stocke les enregistrements de discussion envoyés dans la base de données) : 

<?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 ( Importé fichiers CSS externes) : 

* {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;}

Recommandations associées :

Pratique PHP consistant à créer une salle de discussion simple basée sur websocket

Pratique de création d'une salle de discussion simple avec php basée sur l'exemple websocket_php

Pratique de création d'une salle de discussion simple avec php+websocket

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment connecter coreseek en phpArticle suivant：Comment connecter coreseek en php

Articles Liés

Voir plus