以下是一个非常简单的 PHP 即时聊天页面示例，使用了 PHP、MySQL 和 Ajax 技术。该示例支持用户注册、登录、发送和接收公共消息，界面简洁，适合快速部署和学习。
---
## 🛠 技术栈
* 前端：HTML、CSS、jQuery
* 后端：PHP
* 数据库：MySQL([webslesson.info][1])
---
## 📁 文件结构
```
chat-app/
├── assets/
│ └── style.css
├── db.php
├── index.php
├── login.php
├── register.php
├── chat.php
└── send_message.php
```
---
## 🧱 数据库结构
首先，在 MySQL 中创建一个数据库 chat_db，并执行以下 SQL 语句：
```sql
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);
CREATE TABLE messages (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
message TEXT NOT NULL,
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id)
);
```
---
## 📄 核心文件内容
### db.php
用于连接数据库：([sourcecodester.com][2])
```php
<?php
$host = 'localhost';
$dbname = 'chat_db';
$username = 'root';
$password = '';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Connection failed: " . $e->getMessage());
}
?>
```
### index.php
主页，显示聊天消息和发送表单：([trinitytuts.com][3])
```php
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header('Location: login.php');
exit();
}
require 'db.php';
$stmt = $pdo->query("SELECT messages.id, users.username, messages.message, messages.timestamp
FROM messages
JOIN users ON messages.user_id = users.id
ORDER BY messages.timestamp DESC LIMIT 10");
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>聊天应用</title>
<link rel="stylesheet" href="assets/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="chat-container">
<h2>欢迎，<?php echo htmlspecialchars($_SESSION['username']); ?>！</h2>
<div id="messages">
<?php foreach ($messages as $message): ?>
<div class="message">
<strong><?php echo htmlspecialchars($message['username']); ?>:</strong>
<p><?php echo nl2br(htmlspecialchars($message['message'])); ?></p>
<span class="timestamp"><?php echo $message['timestamp']; ?></span>
</div>
<?php endforeach; ?>
</div>
<form id="messageForm">
<textarea id="message" placeholder="输入消息..." required></textarea>
<button type="submit">发送</button>
</form>
</div>
<script>
$(document).ready(function() {
$('#messageForm').submit(function(e) {
e.preventDefault();
var message = $('#message').val();
$.post('send_message.php', { message: message }, function(response) {
if (response.success) {
$('#messages').prepend(
'<div class="message"><strong>你:</strong><p>' + message + '</p><span class="timestamp">刚刚</span></div>'
);
$('#message').val('');
} else {
alert('发送失败，请稍后再试。');
}
}, 'json');
});
});
</script>
</body>
</html>
```
### send_message.php
处理消息发送：([Pakainfo][4])
```php
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
echo json_encode(['success' => false]);
exit();
}
require 'db.php';
if (isset($_POST['message'])) {
$stmt = $pdo->prepare("INSERT INTO messages (user_id, message) VALUES (?, ?)");
$stmt->execute([$_SESSION['user_id'], $_POST['message']]);
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
?>
```
---
## 🎨 样式示例
### assets/style.css
简单的样式：([trinitytuts.com][3])
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.chat-container {
width: 80%;
max-width: 600px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#messages {
max-height: 400px;
overflow-y: auto;
margin-bottom: 20px;
}
.message {
margin-bottom: 10px;
}
.message strong {
color: #333;
}
.message p {
margin: 5px 0;
}
.timestamp {
font-size: 0.8em;
color: #888;
}
#messageForm {
display: flex;
flex-direction: column;
}
#message {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
```
---
## 🚀 部署步骤
1. 将上述文件上传到服务器。
2. 在数据库中创建 chat_db，并执行上述 SQL 语句。
3. 确保服务器支持 PHP 和 MySQL。
4. 访问 index.php，即可开始使用聊天应用。
---
如果希望实现更复杂的功能，如私聊、实时消息推送（使用 WebSocket）、用户身份验证等，建议参考以下资源：
* [PHP Chat Application using WebSocket](https://www.webslesson.info/2021/01/build-real-time-chat-application-in-php-mysql-using-websocket.html?m=1)
* [Simple Chat System in PHP with Source Code](https://code-projects.org/simple-chat-system/)
[1]: https://www.webslesson.info/2021/01/build-real-time-chat-application-in-php-mysql-using-websocket.html?m=1&utm_source=chatgpt.com "Build Real time Chat Application in PHP Mysql using WebSocket | Webslesson"
[2]: https://www.sourcecodester.com/php/12295/simple-public-chat-room-using-php.html?utm_source=chatgpt.com "Simple Public Chat Room Using PHP/MySQLi with Source Code | SourceCodester"
[3]: https://trinitytuts.com/simple-chat-application-php-ajax-mysql/?utm_source=chatgpt.com "Simple Chat application with php, ajax and MySql - Trinity tuts"
[4]: https://www.pakainfo.com/php-chat-code-in-php-with-demo-chat-in-php-with-example-script/?utm_source=chatgpt.com "PHP Chat Code In Php With Demo – Chat In PHP With Example Script - Pakainfo"