jQuery库来处理用户交互和向服务器发送异步请求,当提交按钮被点击时,通过Ajax将聊天内容提交到服务器;同时,每秒钟轮询一次服务器,从服务器获取最新的聊天消息并显示在页面上。
html
<!DOCTYPE html>
<html>
<head>
<title>聊天室</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="chat-container"></div>
<form>
<input type="text" id="chat-input" placeholder="输入聊天内容">
<button type="submit" id="chat-submit">发送</button>
</form>
<script>
$(document).ready(function() {
// 当提交按钮被点击时,向服务器提交聊天内容
$('#chat-submit').click(function(e) {
e.preventDefault();
var chatInput = $('#chat-input').val();
$.ajax({
url: 'chat.php',
type: 'POST',
data: {message: chatInput},
success: function(response) {
// 成功发送聊天消息后,清空输入框
$('#chat-input').val('');
}
});
});
// 定时从服务器获取新的聊天消息
setInterval(function() {
$.ajax({
url: 'chat.php',
type: 'GET',
success: function(response) {
// 将获取到的聊天消息添加到聊天容器中
$('#chat-container').html(response);
}
});
}, 1000); // 每秒钟轮询一次
});
</script>
</body>
</html>
创建一个chat.php文件,在其中实现聊天室服务器的逻辑。
php
<?php
// 判断当前请求是GET还是POST
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// 处理POST请求,即发送聊天消息
$message = htmlspecialchars($_POST['message']);
if (!empty($message)) {
// 将聊天消息存储到文本文件中
$file = fopen('chatlog.txt', 'a');
fwrite($file, $message . PHP_EOL);
fclose($file);
}
} else {
// 处理GET请求,即获取聊天记录
$chatlog = file_get_contents('chatlog.txt');
echo nl2br($chatlog); // 将换行符转换为HTML标签
}
?>
当接收到POST请求时,将消息内容存储到文本文件中。
当接收到GET请求时,从文本文件中读取所有聊天记录,并将其返回给浏览器。
使用nl2br()函数将每个聊天消息中的换行符转换为HTML标签,以便在页面上正常显示。
可以使用web服务器(如Apache、Nginx等)来向外提供服务,也可以直接使用内置的PHP web服务器(在命令行中运行php -S localhost:8000
即可)。