Rumah > Artikel > pembangunan bahagian belakang > PHP Ajax搭建简易聊天室
PHP Ajax搭建简易聊天室
- 墨辰丷asal
- 2018-05-10 16:19:161982semak imbas
本篇文章主要讲解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;}相关推荐：
Atas ialah kandungan terperinci PHP Ajax搭建简易聊天室. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：php如何连接coreseekArtikel seterusnya：PHP+MySQL做出消息队列功能（附代码）
Artikel berkaitan
Lihat lagi- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Semua simbol ungkapan dalam ungkapan biasa (ringkasan)