<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat</title>
</head>
<style>
.msgblock{
width:300px;
background: #CCC;
border-radius: 20px;
margin-top:20px;
padding: 10px;
}
.msgblock>.date{
font-style: italic;
}
.msgblock>.username{
font-weight: bold;
}
.msgblock>.msg{
display: block;
width:100%;
}
button,textarea,label{
display: block;
margin:5px;
}
</style>
<script src="./jquery-3.3.1.min.js"></script>
<script>
//Получаем timestamp последнего сообщения, если нету сообщений то 0 чтобы получить все
function getTimeStamp(){
if($(".msgblock").length == 0)
return 0;
var $msgs = $(".msgblock");
return $($msgs[$msgs.length-1]).data("timestamp");
}
$(document).ready(function(){
//Добавляем сообщение
$("#send").on("click",function(){
$.ajax({
method: "POST",
url: "./handler.php",
data: { userid: $("#userid").val(),msg:$("#msg").val()}
}).done(function(){getMsgAfterTime();});
});
//Таймер на запрос новых сообщений каждую секунду
(function updateData(){
getMsgAfterTime(function(){
setTimeout(updateData,1000);
});
})();
});
//Получение новых сообщение и добавление
function getMsgAfterTime(callback){
$.ajax({
method: "POST",
url: "./handler.php",
data: { timestamp: getTimeStamp()}
})
.done(function( newValue ) {
if(newValue != "")
$("#msgs").append($(newValue));
if(typeof(callback) == "function")
callback();
});
}
</script>
<body>
<div id="msgs">
</div>
<label>UserID<input type="text" id="userid" value="1"></label><br>
<textarea id="msg" cols="30" rows="10"></textarea>
<button id="send">Отправить</button>
</body>
</html><?php
define("DB_HOST","localhost");
define("DB_LOGIN","root");
define("DB_PASSWORD","123456");
define("DB_PORT","3306");
define("DB_NAME","testchat");
function getConnection(){
return new mysqli(DB_HOST.":".DB_PORT, DB_LOGIN, DB_PASSWORD, DB_NAME);
}
//Получаем сообщения которые пришли после времени $_POST["timestamp"]
if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["timestamp"])){
$con = getConnection();
$sql = "SELECT msg,date,login,UNIX_TIMESTAMP(date) as timestamp FROM msg INNER JOIN users ON msg.user_id=users.id WHERE UNIX_TIMESTAMP(date) > $_POST[timestamp]";
$res = $con->query($sql);
while($msg = $res->fetch_assoc())
echo <<<EOT
<div class="msgblock" data-timestamp='$msg[timestamp]'>
<span class="username">$msg[login]</span>
<span class="date">$msg[date]</span>
<span class="msg">$msg[msg]</span>
</div>
EOT;
$con->close();
}
//Добавляем сообщение
if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["userid"]) && isset($_POST["msg"])){
$con = getConnection();
$sql = "INSERT INTO msg(user_id,msg) VALUES('$_POST[userid]','$_POST[msg]')";
$con->query($sql);
$con->close();
}
?>
Простой
Простой
Простой
