当前位置：首页 > PHP

PHP实现图文聊天

2026-02-14 00:14:13PHP

PHP实现图文聊天的方法

使用PHP实现图文聊天功能需要结合前端和后端技术，以下是一种常见的实现方式：

后端处理

创建一个PHP文件（如chat.php）处理消息的发送和存储：

<?php
// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'chat_db');

// 处理图片上传
if(isset($_FILES['image'])){
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["image"]["name"]);
    move_uploaded_file($_FILES["image"]["tmp_name"], $target_file);

    // 存储消息到数据库
    $stmt = $conn->prepare("INSERT INTO messages (user_id, content, is_image) VALUES (?, ?, 1)");
    $stmt->bind_param("is", $_POST['user_id'], $target_file);
    $stmt->execute();
}

// 处理文本消息
if(isset($_POST['text'])){
    $stmt = $conn->prepare("INSERT INTO messages (user_id, content, is_image) VALUES (?, ?, 0)");
    $stmt->bind_param("is", $_POST['user_id'], $_POST['text']);
    $stmt->execute();
}

// 获取聊天记录
$result = $conn->query("SELECT * FROM messages ORDER BY created_at DESC LIMIT 50");
$messages = [];
while($row = $result->fetch_assoc()){
    $messages[] = $row;
}
echo json_encode($messages);
?>

前端实现

HTML和JavaScript部分实现消息发送和展示：

<div id="chat-container">
    <div id="messages"></div>
    <form id="chat-form">
        <input type="text" id="text-input" placeholder="输入消息...">
        <input type="file" id="image-input" accept="image/*">
        <button type="submit">发送</button>
    </form>
</div>

<script>
document.getElementById('chat-form').addEventListener('submit', function(e){
    e.preventDefault();

    let formData = new FormData();
    const text = document.getElementById('text-input').value;
    const image = document.getElementById('image-input').files[0];

    if(text) formData.append('text', text);
    if(image) formData.append('image', image);

    fetch('chat.php', {
        method: 'POST',
        body: formData
    }).then(response => response.json())
      .then(updateChat);
});

function updateChat(messages){
    const container = document.getElementById('messages');
    container.innerHTML = '';

    messages.forEach(msg => {
        const div = document.createElement('div');
        if(msg.is_image){
            div.innerHTML = `<img src="${msg.content}" style="max-width:200px;">`;
        } else {
            div.textContent = msg.content;
        }
        container.appendChild(div);
    });
}

// 定期刷新聊天
setInterval(() => {
    fetch('chat.php')
        .then(response => response.json())
        .then(updateChat);
}, 3000);
</script>

数据库设计

创建存储聊天消息的数据库表：

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    content TEXT NOT NULL,
    is_image TINYINT(1) DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);