基于PHP的简易在线聊天功能实现

崇山主人

于 2024-04-13 21:51:55 发布

阅读量320

点赞数 5

文章标签： php 开发语言

本文链接：https://blog.csdn.net/qq_61928196/article/details/137726229

版权

利用客户端（前端）和服务器端（后端）的配合。前端会负责发送消息，并实时显示聊天室中的消息。后端会负责接收消息，存储到服务器，并可能负责广播消息给所有在线的客户端。

这里是一个简化的实现方案，前端使用HTML，后端使用PHP和MySQL数据库。实时通信方面，由于PHP不是实时通信的最佳选择，我们可以使用轮询（Polling）或长轮询（Long Polling）作为简单实现。

前端代码（HTML和JavaScript）

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>基于IP的简单聊天室</title>  
    <script>  
        document.addEventListener('DOMContentLoaded', function() {  
            const chatLog = document.getElementById('chat-log');  
            const messageInput = document.getElementById('message-input');  
            const sendButton = document.getElementById('send-button');  
            let lastMessageId = 0; // 用于轮询时获取新消息  
  
            // 发送消息到服务器  
            function sendMessage() {  
                const ip = window.location.hostname || 'unknown'; // 简化处理，实际中应从客户端获取真实IP  
                const time = new Date().toISOString();  
                const messageContent = messageInput.value;  
                const message = { ip, time, content: messageContent };  
  
                fetch('/send_message.php', {  
                    method: 'POST',  
                    headers: { 'Content-Type': 'application/json' },  
                    body: JSON.stringify(message)  
                })  
                .then(response => response.json())  
                .then(data => {  
                    if (data.success) {  
                        displayMessage(data.message);  
                        messageInput.value = ''; // 清空输入框  
                    } else {  
                        alert('发送消息失败');  
                    }  
                });  
            }  
  
            // 显示消息到聊天室  
            function displayMessage(message) {  
                const messageElement = document.createElement('p');  
                messageElement.textContent = `${message.ip} at ${message.time}: ${message.content}`;  
                chatLog.appendChild(messageElement);  
                chatLog.scrollTop = chatLog.scrollHeight; // 滚动到底部  
            }  
  
            // 轮询服务器以获取新消息  
            function fetchNewMessages() {  
                fetch(`/get_messages.php?lastId=${lastMessageId}`)  
                .then(response => response.json())  
                .then(messages => {  
                    messages.forEach(message => {  
                        displayMessage(message);  
                        lastMessageId = Math.max(lastMessageId, message.id); // 更新lastMessageId以获取新的消息  
                    });  
                });  
            }  
  
            // 初始化聊天室，开始轮询新消息  
            fetchNewMessages();  
            setInterval(fetchNewMessages, 2000); // 每2秒轮询一次新消息  
  
            // 绑定按钮点击事件  
            sendButton.addEventListener('click', sendMessage);  
        });  
    </script>  
</head>  
<body>  
    <div id="chat-log" style="height: 300px; overflow-y: scroll;"></div>  
    <input type="text" id="message-input" placeholder="输入消息...">  
    <button id="send-button">发送</button>  
</body>  
</html>

后端代码（PHP和MySQL）

需要一个MySQL数据库来存储消息，以及相应的表结构。

数据库表结构（messages）

CREATE TABLE `messages` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `ip` varchar(45) NOT NULL,  
  `time` datetime NOT NULL,  
  `content` text NOT NULL,  
  PRIMARY KEY (`id`)  
);

send_message.php

<?php  
// 处理发送消息到数据库  
header('Content-Type: application/json');  
  
$data = json_decode(file_get_contents('php://input'), true);  
  
// 连接到数据库  
$servername = "localhost";  
$username = "your_username";  
$password = "your_password";  
$dbname = "your_database";  
  
$conn = new mysqli($servername, $username, $password, $dbname);  
  
// 检查连接  
if ($conn->connect_error) {  
    die("连接失败: " . $conn->connect_error);  
}  
  
if ($data && isset($data['ip'], $data['time'], $data['content'])) {  
    // 插入消息到数据库  
    $sql = "INSERT INTO messages (ip, time, content) VALUES (?, ?, ?)";  
    $stmt = $conn->prepare($sql);  
    $stmt->bind_param("sss", $data['ip'], $data['time'], $data['content']);  
  
    if ($stmt->execute()) {  
        echo json_encode(array('success' => true, 'message' => $data));  
    } else {  
        echo json_encode(array('success' => false, 'error' => '插入消息失败'));  
    }  
  
    $stmt->close();  
} else {  
    echo json_encode(array('success' => false, 'error' => '数据不完整或格式错误'));  
}  
  
$conn->close();  
?>

get_messages.php

<?php  
// 处理获取消息请求并返回给前端  
header('Content-Type: application/json');  
  
// 连接到数据库  
$servername = "localhost";  
$username = "your_username";  
$password = "your_password";  
$dbname = "your_database";  
  
$conn = new mysqli($servername, $username, $password, $dbname);  
  
// 检查连接  
if ($conn->connect_error) {  
    die("连接失败: " . $conn->connect_error);  
}  
  
// 检查是否有提供最后一条消息的ID  
$lastId = isset($_GET['lastId']) ? intval($_GET['lastId']) : 0;  
  
// 查询数据库获取新消息  
$sql = "SELECT * FROM messages WHERE id > ? ORDER BY id ASC";  
$stmt = $conn->prepare($sql);  
$stmt->bind_param("i", $lastId);  
$stmt->execute();  
$result = $stmt->get_result();  
  
$messages = array();  
while ($row = $result->fetch_assoc()) {  
    $messages[] = $row;  
}  
  
$stmt->close();  
$conn->close();  
  
echo json_encode($messages);  
?>

现在，当你运行前端代码并发送消息时，send_message.php 将接收消息并将其存入数据库。同时，前端代码会定期通过 get_messages.php 获取新消息，并在聊天室中实时显示。

崇山主人

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
基于PHP的简易在线聊天功能实现

利用客户端（前端）和服务器端（后端）的配合。前端会负责发送消息，并实时显示聊天室中的消息。后端会负责接收消息，存储到服务器，并可能负责广播消息给所有在线的客户端。这里是一个简化的实现方案，前端使用HTML，后端使用PHP和MySQL数据库。实时通信方面，由于PHP不是实时通信的最佳选择，我们可以使用轮询（Polling）或长轮询（Long Polling）作为简单实现。
复制链接

扫一扫