聊天室php源码,免费vps服务,手把手vps,哪个云主机免费,VPS搭建教程服务网格

🗣 Wd提问: 聊天室php源码

🤖 Ai回答:

聊天室PHP源码实现

下面我将提供一个基础的PHP聊天室实现，包含前端界面和后端逻辑。

目录结构

/chatroom
├── index.php 主页面
├── chat.php 聊天处理接口
├── get_messages.php 获取消息接口
├── style.css 样式文件
└── messages.txt 消息存储文件

代码实现

index.php (主页面)
php
<?php
session_start();
if (empty($_SESSION['username'])) {
header(Location: login.php);
exit;
}
?
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<title简易聊天室</title
<link rel=stylesheet href=style.css
</head
<body
<div class=chat-container
<div class=chat-header
<h2简易聊天室</h2
<div class=user-info
欢迎, <?php echo htmlspecialchars($_SESSION['username']); ?
<a href=logout.php退出</a
</div
</div

<div class=chat-messages id=messageContainer
<! 消息将在这里显示
</div

<div class=chat-input
<form id=messageForm
<input type=text id=messageInput placeholder=输入消息..、autocomplete=off
<button type=submit发送</button
</form
</div
</div

<script
// 获取消息函数
function fetchMessages() {
fetch('get_messages.php')
.then(response = response.text())
.then(data = {
document.getElementById('messageContainer').innerHTML = data;
// 滚动到底部
document.getElementById('messageContainer').scrollTop =
document.getElementById('messageContainer').scrollHeight;
});
}

// 页面加载时获取消息
document.addEventListener('DOMContentLoaded', function() {
fetchMessages();
// 每2秒刷新一次消息
setInterval(fetchMessages, 2000);
});

// 发送消息
document.getElementById('messageForm').addEventListener('submit', function(e) {
e.preventDefault();
const messageInput = document.getElementById('messageInput');
const message = messageInput.value.trim();

if (message) {
fetch('chat.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'message=' + encodeURIComponent(message)
})
.then(response = response.text())
.then(data = {
if (data === 'success') {
messageInput.value = '';
fetchMessages();
}
});
}
});
</script
</body
</html

chat.php (消息处理)
php
<?php
session_start();
if (empty($_SESSION['username'])) {
die('未登录');
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['message'])) {
$username = $_SESSION['username'];
$message = trim($_POST['message']);
$time = date('H:i:s');

if (!empty($message)) {
// 过滤HTML标签防止XSS攻击
$message = htmlspecialchars($message);
$username = htmlspecialchars($username);

// 格式化消息
$formattedMessage = [$time] <strong$username</strong: $message<br\n;

// 将消息追加到文件
file_put_contents('messages.txt', $formattedMessage, FILE_APPEND | LOCK_EX);
echo 'success';
} else {
echo '消息不能为空';
}
} else {
echo '无效请求';
}
?

get_messages.php (获取消息)
php
<?php
// 读取并显示消息
if (file_exists('messages.txt')) {
$messages = file_get_contents('messages.txt');
echo $messages;
} else {
echo '<div class=system-message欢迎来到聊天室！</div';
}
?

login.php (登录页面)
php
<?php
session_start();
if (!empty($_SESSION['username'])) {
header(Location: index.php);
exit;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['username'])) {
$username = trim($_POST['username']);
if (!empty($username)) {
$_SESSION['username'] = htmlspecialchars($username);
header(Location: index.php);
exit;
}
}
?
<!DOCTYPE html
<html
<head
<title登录聊天室</title
<link rel=stylesheet href=style.css
</head
<body
<div class=login-container
<h2登录聊天室</h2
<form method=post
<input type=text name=username placeholder=输入用户名 required
<button type=submit进入聊天室</button
</form
</div
</body
</html

logout.php (退出登录)
php
<?php
session_start();
session_destroy();
header(Location: login.php);
exit;
?

style.css (样式文件)
css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: f5f5f5;
}

.chat-container {
max-width: 800px;
margin: 20px auto;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.chat-header {
background: 4CAF50;
color: white;
padding: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}

.chat-messages {
height: 400px;
overflow-y: auto;
padding: 15px;
border-bottom: 1px solid eee;
}

.chat-input {
padding: 15px;
}

.chat-input form {
display: flex;
}

.chat-input input {
flex: 1;
padding: 10px;
border: 1px solid ddd;
border-radius: 4px;
}

.chat-input button {
padding: 10px 20px;
background: 4CAF50;
color: white;
border: none;
border-radius: 4px;
margin-left: 10px;
cursor: pointer;
}

.login-container {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

.login-container input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid ddd;
border-radius: 4px;
}

.login-container button {
width: 100%;
padding: 10px;
background: 4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.user-info a {
color: white;
margin-left: 10px;
}

.system-message {
color: 666;
font-style: italic;
text-align: center;
padding: 10px;
}

使用说明

1、将上述文件保存到您的Web服务器目录
2、确保messages.txt文件有写入权限
3、访问login.php登录，然后进入聊天室

功能特点

用户登录系统
实时消息显示（每2秒刷新）
基本的XSS防护
简洁的界面设计
消息持久化存储

注意事项

这是一个基础实现，实际生产环境需要考虑：
使用数据库而不是文本文件存储消息
添加更完善的安全措施
实现真正的实时通信（如WebSocket）
添加用户注册和管理功能
防止消息泛滥和垃圾信息

您可以根据需要扩展这个基础聊天室的功能。

Ai作答

📣 商家广告：