Build a simple chat room with PHP Ajax
ajax
php
chatroom
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>Copy after login
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);Copy after login
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 "发表留言失败！";
}Copy after login
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;}Copy after login
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 of this Website
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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
3 weeks ago
By DDD
R.E.P.O. Save File Location: Where Is It & How to Protect It?
3 weeks ago
By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
CakePHP Project Configuration
Sep 10, 2024 pm 05:25 PM
In this chapter, we will understand the Environment Variables, General Configuration, Database Configuration and Email Configuration in CakePHP.
PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati
CakePHP Date and Time
Sep 10, 2024 pm 05:27 PM
To work with date and time in cakephp4, we are going to make use of the available FrozenTime class.
CakePHP File upload
Sep 10, 2024 pm 05:27 PM
To work on file upload we are going to use the form helper. Here, is an example for file upload.
CakePHP Routing
Sep 10, 2024 pm 05:25 PM
In this chapter, we are going to learn the following topics related to routing ?
Discuss CakePHP
Sep 10, 2024 pm 05:28 PM
CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. CakePHP is based on a MVC-like architecture that is both powerful and easy to grasp. Models, Views, and Controllers gu
How To Set Up Visual Studio Code (VS Code) for PHP Development
Dec 20, 2024 am 11:31 AM
Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c
CakePHP Creating Validators
Sep 10, 2024 pm 05:26 PM
Validator can be created by adding the following two lines in the controller.
