Home > Article > Backend Development > Build a simple chat room with PHP Ajax
Build a simple chat room with PHP Ajax
- 墨辰丷Original
- 2018-05-10 16:19:161971browse
This article mainly explains the practice of building a simple chat room with php ajax. The content of the article about php and ajax can be referred to by friends who need it.
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 (backend, get all chat information from the database):
<?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 (backend, stores the sent chat records into the database):
<?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 (introduced external CSS file) :
* {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;}Related recommendations:
php practice of building a simple chat room based on websocket
php practice of building a simple chat room based on websocket_php example
php practice of building a simple chat room based on websocket
The above is the detailed content of Build a simple chat room with PHP Ajax. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to connect coreseek in phpNext article：How to connect coreseek in php