php ajax实现在线聊天
PHP AJAX 实现在线聊天
数据库设计
创建数据库表存储聊天消息，字段包括消息ID、发送者ID、接收者ID、消息内容、发送时间等。
CREATE TABLE chat_messages (
id INT AUTO_INCREMENT PRIMARY KEY,
sender_id INT NOT NULL,
receiver_id INT NOT NULL,
message TEXT NOT NULL,
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);前端实现
使用HTML和JavaScript创建聊天界面，通过AJAX与后端交互。
<div id="chat-container">
<div id="chat-messages"></div>
<input type="text" id="message-input" placeholder="输入消息...">
<button id="send-button">发送</button>
</div>
<script>
document.getElementById('send-button').addEventListener('click', function() {
const message = document.getElementById('message-input').value;
const receiverId = 2; // 接收者ID
const xhr = new XMLHttpRequest();
xhr.open('POST', 'send_message.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('message-input').value = '';
fetchMessages();
}
};
xhr.send(`message=${encodeURIComponent(message)}&receiver_id=${receiverId}`);
});
function fetchMessages() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'get_messages.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('chat-messages').innerHTML = xhr.responseText;
}
};
xhr.send();
}
// 定期刷新消息
setInterval(fetchMessages, 3000);
</script>后端处理
创建PHP文件处理消息发送和获取。
send_message.php
<?php
header('Content-Type: application/json');
$message = $_POST['message'];
$receiverId = $_POST['receiver_id'];
$senderId = 1; // 从会话中获取发送者ID
$db = new PDO('mysql:host=localhost;dbname=chat_db', 'username', 'password');
$stmt = $db->prepare("INSERT INTO chat_messages (sender_id, receiver_id, message) VALUES (?, ?, ?)");
$stmt->execute([$senderId, $receiverId, $message]);
echo json_encode(['status' => 'success']);
?>get_messages.php
<?php
$receiverId = 2; // 接收者ID
$senderId = 1; // 发送者ID
$db = new PDO('mysql:host=localhost;dbname=chat_db', 'username', 'password');
$stmt = $db->prepare("SELECT * FROM chat_messages WHERE (sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?) ORDER BY timestamp ASC");
$stmt->execute([$senderId, $receiverId, $receiverId, $senderId]);
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($messages as $msg) {
$class = $msg['sender_id'] == $senderId ? 'sent' : 'received';
echo "<div class='$class'>{$msg['message']}</div>";
}
?>实时性优化
使用WebSocket或长轮询替代定期AJAX请求，实现更实时的消息推送。
长轮询实现
function longPoll() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'long_poll.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('chat-messages').innerHTML = xhr.responseText;
}
longPoll(); // 再次发起请求
};
xhr.send();
}
longPoll();安全性考虑
对所有输入数据进行过滤和验证，防止SQL注入和XSS攻击。
$message = htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8');
$receiverId = filter_var($_POST['receiver_id'], FILTER_VALIDATE_INT);扩展功能
添加用户在线状态显示、消息已读标记、文件上传支持等功能，提升聊天体验。
