Php7+Mysql8实现简单的网页聊天室功能
php聊天室
前端页面
chat_room.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../ico/index.ico" />
<title>聊天室</title>
<style>
div {
width: 32rem;
yellowgreen;
}
</style>
</head>
<body>
<script>
document.write(new Date());
</script>
<div id="con">
</div>
<form action="" method="">
<input type="text" name="uname" id="uname" size="10">
<input type="text" size="40" id="content">
<input type="button" value="发送" id="btn" onclick="demo02()">
</form>
<script>
function createXmlHttpRequest() {
var request = false;
request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
if (request == false) {
request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
} else if (request == false) {
request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
} else if (request == false) {
//alert("创建request失败！");
} else {
//alert("创建成功！")
}
}
function demo02() {
var request = false;
request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
if (request == false) {
request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
} else if (request == false) {
request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
} else if (request == false) {
//alert("创建request失败！");
} else {
//alert("创建成功！")
}
var unameobj = document.getElementById("uname");
var uname = unameobj.value;
var contentobj = document.getElementById("content");
var content = contentobj.value
contentobj.value = '';
var mess = "username=" + uname + "&" + "content=" + content;
// alert(mess);
request.open("POST", "php/write.php", true);
request.setRequestHeader("Content-type", 'application/x-www-form-urlencoded');
request.send(mess);
}
function getMass() {
var request = false;
request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
if (request == false) {
request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
} else if (request == false) {
request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
} else if (request == false) {
//alert("创建request失败！");
} else {
//alert("创建成功！")
}
createXmlHttpRequest();
setInterval(function () {
request.open("GET", "php/read.php", true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
//alert("服务器响应数据：" + this.responseText);
document.getElementById("con").innerHTML = this.responseText;
}
}
}, 2000);
}
getMass();
</script>
</body>
</html>
php后端页面
conn.php:连接数据库
<?php
header("Content-Type:text/html;charset=utf8");
$mysql_server_name = "localhost:3306"; //连接数据库端口
$mysql_username = "root"; //用户名
$mysql_password = "123456"; //密码
$mysql_database = "test"; //数据库名称
$conn = new Mysqli($mysql_server_name, $mysql_username, $mysql_password, $mysql_database); //构造函数mysql
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
echo "连接成功";
write.php:写入数据库消息
<?php
include_once 'conn.php';
$username = $_POST["username"];
$content = $_POST["content"];
// $username = "username";
// $content = "content";
$time = date("Y/m/d H:i:s");
if ($content == null) {
echo "<script>alert('内容不能为空！')</script>";
} else {
# code...
$sql = "INSERT INTO message(time,username,message) VALUES('$time','$username','$content')";
$conn->query($sql);
}
read.php :读取数据库中存入的消息
<?php
include_once 'conn.php';
$sql = "SELECT time,username,message FROM message";
$array = $conn->query($sql);
$data = mysqli_fetch_all($array, MYSQLI_NUM);
echo '<br/>';
// print_r($data);
// echo file_get_contents("message.txt");
//echo $data[]
$count = count($data);
for ($i=0; $i <$count ; $i++) {
$temp =$data[$i];
for ($j=0; $j < 3; $j++) {
# code...
echo $temp[$j];
echo '------';
}
echo '<br/>';
}
