사람들이 인터넷에 점점 더 의존하게 되면서 실시간 온라인 채팅방은 많은 웹사이트의 표준 기능이 되었습니다. 이 기사에서는 PHP를 사용하여 기본적인 실시간 온라인 채팅방을 구현하는 방법을 소개합니다.
시작하기 전에 환경이 다음 조건을 충족하는지 확인하세요.
CREATE DATABASE chat;
USE chat;
CREATE TABLE messages (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
message TEXT NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);위 명령은 "chat"이라는 데이터베이스와 채팅 기록을 저장하기 위한 "messages"라는 테이블을 생성합니다. 테이블에는 "id", "username", "message" 및 "created_at"라는 4개의 필드가 포함되어 있습니다. 이 중 "id"는 자동으로 증가되는 기본 키이고, "username"은 보낸 사람의 사용자 이름, "message"는 메시지 내용, "created_at"는 메시지 전송 시간입니다.
HTML 및 CSSchat.html
<!DOCTYPE html>
<html>
<head>
<title>Online Chat Room</title>
<link rel="stylesheet" type="text/css" href="chat.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>Chat Room</h2>
</div>
<div class="chat-messages"></div>
<div class="chat-form">
<form>
<input type="text" name="username" placeholder="Username" required>
<input type="text" name="message" placeholder="Type your message here" required>
<button type="submit">Send</button>
</form>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="chat.js"></script>
</body>
</html>chat.css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.chat-container {
width: 80%;
margin: 50px auto;
border: 1px solid #ccc;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}
.chat-header {
padding: 10px;
background-color: #eee;
}
.chat-header h2 {
margin: 0;
font-size: 18px;
}
.chat-messages {
height: 300px;
overflow: auto;
padding: 10px;
}
.chat-form {
padding: 10px;
}
.chat-form form {
display: flex;
flex-wrap: wrap;
}
.chat-form input {
flex: 1;
margin: 0 5px 0 0;
padding: 10px;
border: none;
border-radius: 3px;
}
.chat-form button {
flex-basis: 100px;
padding: 10px;
background-color: #0099ff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.2s;
}
.chat-form button:hover {
background-color: #0088cc;
}채팅 기록 영역, 메시지 전송 양식 및 기타 관련 요소를 포함하는 기본 채팅방 페이지가 여기에 생성됩니다.
PHP 백엔드<?php
/* 设置响应格式为JSON */
header('Content-Type: application/json');
/* 连接数据库 */
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '123456');
define('DB_NAME', 'chat');
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
/* 检查数据库连接是否成功 */
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
/* 处理消息发送请求 */
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$message = $_POST['message'];
$sql = "INSERT INTO messages (username, message) VALUES ('$username', '$message')";
if (mysqli_query($conn, $sql)) {
echo json_encode(['status' => 'success']);
} else {
echo json_encode(['status' => 'error', 'message' => mysqli_error($conn)]);
}
} else {
/* 处理消息获取请求 */
$last_id = $_GET['last_id'];
$sql = "SELECT * FROM messages WHERE id > $last_id ORDER BY created_at ASC";
$result = mysqli_query($conn, $sql);
$messages = [];
while ($row = mysqli_fetch_assoc($result)) {
$messages[] = $row;
}
echo json_encode(['status' => 'success', 'messages' => $messages]);
}
mysqli_close($conn);위 코드에는 다음 세 부분이 포함되어 있습니다.
데이터베이스에 연결: PHP 파일에서 데이터베이스에 연결하는 것은 필수 작업입니다. 이 예에서는 mysqli_connect 함수를 사용하여 데이터베이스와의 연결을 설정합니다.$(function() {
/* 存储最后一条消息的ID */
var last_id = 0;
/* 获取所有消息 */
function getMessages() {
$.get('chat.php', {'last_id': last_id}, function(data) {
if (data.status == 'success') {
/* 迭代所有消息并添加到聊天室中 */
$.each(data.messages, function(index, message) {
var html = '<p><strong>' + message.username + ':</strong> ' + message.message + '</p>';
$('.chat-messages').append(html);
/* 更新最后一条消息的ID */
last_id = message.id;
});
/* 滚动到底部以显示最新的消息 */
$('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight);
}
}, 'json');
}
/* 获取所有消息 */
getMessages();
/* 处理消息发送表单的提交事件 */
$('.chat-form form').submit(function(e) {
e.preventDefault();
/* 获取表单输入 */
var username = $('input[name="username"]').val();
var message = $('input[name="message"]').val();
/* 发送AJAX请求 */
$.post('chat.php', {'username': username, 'message': message}, function(data) {
if (data.status == 'success') {
/* 清空输入框 */
$('input[name="message"]').val('');
} else {
/* 处理错误 */
alert('Error: ' + data.message);
}
}, 'json');
});
/* 每5秒获取一次消息 */
setInterval(getMessages, 5000);
});위 코드는 jQuery와 AJAX를 사용하여 다음 작업을 수행합니다.
모든 새 메시지를 주기적으로 검색하여 채팅방에 추가합니다.결론
이번 글에서는 PHP와 AJAX를 이용해 실시간 온라인 채팅방을 만드는 방법을 소개했습니다. 이 채팅방은 비교적 간단하지만 이를 기반으로 직접 개선하고 비공개 메시지, 이모티콘 등 더 많은 기능을 추가할 수 있습니다. 이를 바탕으로 좀 더 실용적인 웹 애플리케이션을 개발해보시길 바랍니다.
위 내용은 PHP를 사용하여 온라인 채팅방을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
