From ea82104091775ba4a06627e79fc5a4e666c52e6b Mon Sep 17 00:00:00 2001
From: CXM <chenzixin202209@163.com>
Date: Mon, 18 Mar 2024 00:43:04 +0000
Subject: [PATCH] implement the online user can chat within one chat area like
a group
---
Logic/chat.js | 61 ++++++++++++++++++++++++++++++++++++---
Logic/get_message.php | 20 +++++++++++++
Logic/send_message.php | 20 +++++++++++++
Presentation/chatPage.php | 23 ++++++++++++++-
4 files changed, 119 insertions(+), 5 deletions(-)
create mode 100644 Logic/get_message.php
create mode 100644 Logic/send_message.php
diff --git a/Logic/chat.js b/Logic/chat.js
index e7c164e..94ace07 100644
--- a/Logic/chat.js
+++ b/Logic/chat.js
@@ -24,10 +24,63 @@ function fetchOnlineUsers() {
xhr.send();
}
-// 页面加载完毕时获取在线用户
+// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
+// 获取消息函数
+function fetchMessages() {
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', 'http://localhost/zhushou/Logic/get_message.php', true);
+ xhr.onload = function () {
+ if (this.status == 200) {
+ var messages = JSON.parse(this.responseText);
+ var chatBox = document.getElementById('chat-box');
+ chatBox.innerHTML = ''; // 清空当前聊天框
+
+ messages.forEach(function(message) {
+ var messageDiv = document.createElement('div');
+ var senderSpan = document.createElement('span');
+ senderSpan.textContent = message.user_Name + ': '; // 使用实际的字段名
+ senderSpan.classList.add('sender'); // 添加 CSS 类名
+
+ var messageContentSpan = document.createElement('span');
+ messageContentSpan.textContent = message.message;
+
+ messageDiv.appendChild(senderSpan);
+ messageDiv.appendChild(messageContentSpan);
+ chatBox.appendChild(messageDiv);
+ });
+ chatBox.scrollTop = chatBox.scrollHeight; // 滚动到最新消息
+ }
+ };
+ xhr.send();
+}
+
+// 发送消息函数
+function sendMessage() {
+ var messageInput = document.getElementById('message');
+ var message = messageInput.value;
+ var receiverId = 1; // 需要根据实际情况设置接收者ID
+ var formData = new FormData();
+ formData.append('message', message);
+ formData.append('receiver_id', receiverId); // 假设接收者ID
+
+ var xhr = new XMLHttpRequest();
+ xhr.open('POST', 'http://localhost/zhushou/Logic/send_message.php', true);
+ xhr.onload = function () {
+ if (this.status == 200) {
+ console.log(this.responseText);
+ fetchMessages(); // 发送消息后重新获取消息
+ messageInput.value = ''; // 清空输入框
+ }
+ };
+ xhr.send(formData);
+}
+
+// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
+
+// 页面加载完毕时获取在线用户和消息，并定时刷新
window.onload = function () {
fetchOnlineUsers();
+ fetchMessages();
+ setInterval(fetchOnlineUsers, 5000); // 每5秒刷新在线用户
+ setInterval(fetchMessages, 1000); // 每1秒刷新消息
};
-
-// 每隔 5 秒刷新一次在线用户列表
-setInterval(fetchOnlineUsers, 5000);
diff --git a/Logic/get_message.php b/Logic/get_message.php
new file mode 100644
index 0000000..3c5655f
--- /dev/null
+++ b/Logic/get_message.php
@@ -0,0 +1,20 @@
+<?php
+session_start();
+require_once '../Logic/config.php';
+
+$receiver_id = 1; // 接收者ID，假设已经保存在会话中
+
+// 获取与当前用户相关的消息，并联合用户表获取发送者名字
+$stmt = DB->prepare("
+ SELECT m.message_id, m.sender_id, m.receiver_id, m.message, m.timestamp, u.user_Name
+ FROM chat_message m
+ LEFT JOIN user u ON m.sender_id = u.id
+ WHERE m.receiver_id = ? OR m.sender_id = ?
+ ORDER BY m.timestamp DESC
+");
+$stmt->execute([$receiver_id, $receiver_id]);
+$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+echo json_encode($messages);
+?>
+
diff --git a/Logic/send_message.php b/Logic/send_message.php
new file mode 100644
index 0000000..e89c745
--- /dev/null
+++ b/Logic/send_message.php
@@ -0,0 +1,20 @@
+<?php
+session_start();
+require_once '../Logic/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] == 'POST') {
+ $sender_id = $_SESSION['user_id']; // 假设用户ID已经保存在会话中
+ $receiver_id = $_POST['receiver_id'];
+ $message = $_POST['message'];
+
+ if (!empty($message) && !empty($receiver_id)) {
+ $stmt = DB->prepare("INSERT INTO chat_message (sender_id, receiver_id, message) VALUES (?, ?, ?)");
+ if ($stmt->execute([$sender_id, $receiver_id, $message])) {
+ echo json_encode(['status' => 'success']);
+ } else {
+ echo json_encode(['status' => 'error', 'message' => 'Failed to send message.']);
+ }
+ }
+}
+?>
+
diff --git a/Presentation/chatPage.php b/Presentation/chatPage.php
index 141f380..e4803fd 100644
--- a/Presentation/chatPage.php
+++ b/Presentation/chatPage.php
@@ -43,6 +43,25 @@
flex-grow: 1;
margin-right: 5px;
}
+
+ #chat-box div {
+ margin-bottom: 5px;
+ padding: 5px;
+ }
+
+ #chat-box div span {
+ display: inline-block;
+ margin-right: 5px;
+ }
+
+ #chat-box div span.sender {
+ font-weight: bold;
+ }
+
+ .sender {
+ font-weight: bold;
+ color: #333;
+ }
</style>
</head>
<body>
@@ -62,6 +81,8 @@
<button onclick="sendMessage()">发送</button>
</div>
</div>
-<script src="../Logic/chat.js"></script>
+<script src="../Logic/chat.js">
+
+</script>
</body>
</html>
--
GitLab