From 11c2789451107f3b89ee647fe10229a730785714 Mon Sep 17 00:00:00 2001
From: CXM <chenzixin202209@163.com>
Date: Sun, 17 Mar 2024 23:45:53 +0000
Subject: [PATCH] implement user have two status which is online and offline.
and create a page to chat with others, this page now has implement showing
the online user list in real time.
---
Logic/chat.js | 33 ++++++++++++++
Logic/get_online_users.php | 10 +++++
{Presentation => Logic}/getimage.php | 0
Logic/logout.php | 11 +++++
Presentation/LoginPage.php | 5 +++
Presentation/chatPage.php | 67 ++++++++++++++++++++++++++++
Presentation/settings.php | 2 +-
7 files changed, 127 insertions(+), 1 deletion(-)
create mode 100644 Logic/chat.js
create mode 100644 Logic/get_online_users.php
rename {Presentation => Logic}/getimage.php (100%)
create mode 100644 Presentation/chatPage.php
diff --git a/Logic/chat.js b/Logic/chat.js
new file mode 100644
index 0000000..e7c164e
--- /dev/null
+++ b/Logic/chat.js
@@ -0,0 +1,33 @@
+function fetchOnlineUsers() {
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', 'http://localhost/zhushou/Logic/get_online_users.php', true);
+ xhr.onload = function () {
+ console.log(this.responseText); // 查看服务器响应的内容
+ if (this.status == 200) {
+ try {
+ var users = JSON.parse(this.responseText);
+ var usersList = document.getElementById('online-users-list');
+ usersList.innerHTML = ''; // 清空当前列表
+
+ // 添加在线用户到列表中
+ users.forEach(function (user) {
+ var li = document.createElement('li');
+ li.textContent = user.user_Name; // 假设 'username' 是用户表中用户名的字段
+ usersList.appendChild(li);
+ });
+ } catch (e) {
+ console.error("Parsing error:", e);
+ // 此处可能需要处理错误
+ }
+ }
+ };
+ xhr.send();
+}
+
+// 页面加载完毕时获取在线用户
+window.onload = function () {
+ fetchOnlineUsers();
+};
+
+// 每隔 5 秒刷新一次在线用户列表
+setInterval(fetchOnlineUsers, 5000);
diff --git a/Logic/get_online_users.php b/Logic/get_online_users.php
new file mode 100644
index 0000000..6f701eb
--- /dev/null
+++ b/Logic/get_online_users.php
@@ -0,0 +1,10 @@
+<?php
+session_start();
+header('Content-Type: application/json');
+require_once '../Logic/config.php';
+
+// 获取所有标记为在线的用户
+$query = DB->query("SELECT id, user_Name FROM user WHERE is_online = 'online'");
+$onlineUsers = $query->fetchAll(PDO::FETCH_ASSOC);
+
+echo json_encode($onlineUsers);
diff --git a/Presentation/getimage.php b/Logic/getimage.php
similarity index 100%
rename from Presentation/getimage.php
rename to Logic/getimage.php
diff --git a/Logic/logout.php b/Logic/logout.php
index 5278b35..265937d 100644
--- a/Logic/logout.php
+++ b/Logic/logout.php
@@ -2,6 +2,16 @@
// 启动会话
session_start();
+// 获取用户 ID
+$userId = $_SESSION['user_id'];
+
+// 数据库配置文件
+require_once '../Logic/config.php';
+
+// 更新用户的在线状态为 'offline'
+$updateOnlineStatus = DB->prepare("UPDATE user SET is_online = 'offline' WHERE id = ?");
+$updateOnlineStatus->execute([$userId]);
+
// 清除所有会话变量
session_unset();
@@ -11,3 +21,4 @@ session_destroy();
// 重定向到登录页面
header("Location: ../Presentation/LoginPage.php");
exit;
+?>
diff --git a/Presentation/LoginPage.php b/Presentation/LoginPage.php
index 2b3f3c6..d0cfd90 100644
--- a/Presentation/LoginPage.php
+++ b/Presentation/LoginPage.php
@@ -25,6 +25,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if ($user['id'] == $studentId) {
// 登录成功，执行相应操作
$_SESSION['user_id'] = $user['id']; // 将用户 ID 存储在会话中
+
+ // 更新用户的在线状态为 'online'
+ $updateOnlineStatus = DB->prepare("UPDATE user SET is_online = 'online' WHERE id = ?");
+ $updateOnlineStatus->execute([$user['id']]);
+
$loggedIn = true;
break; // 退出循环
} else {
diff --git a/Presentation/chatPage.php b/Presentation/chatPage.php
new file mode 100644
index 0000000..141f380
--- /dev/null
+++ b/Presentation/chatPage.php
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Online Users</title>
+ <style>
+ body {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ font-family: Arial, sans-serif;
+ }
+
+ #sidebar {
+ width: 250px;
+ background-color: #f3f3f3;
+ padding: 10px;
+ overflow-y: auto; /* 如果用户列表很长可以滚动 */
+ }
+
+ #chat-container {
+ flex-grow: 1;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ #chat-box {
+ flex-grow: 1;
+ overflow-y: auto;
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ padding: 10px;
+ }
+
+ #message-input {
+ display: flex;
+ }
+
+ #message-input input {
+ flex-grow: 1;
+ margin-right: 5px;
+ }
+ </style>
+</head>
+<body>
+<!-- 在线用户列表容器 -->
+<div id="sidebar">
+ <h2>在线用户:</h2>
+ <ul id="online-users-list">
+ <!-- 在线用户将在这里列出 -->
+ </ul>
+</div>
+<div id="chat-container">
+ <div id="chat-box">
+ <!-- 聊天消息将在这里显示 -->
+ </div>
+ <div id="message-input">
+ <input type="text" id="message" placeholder="输入消息...">
+ <button onclick="sendMessage()">发送</button>
+ </div>
+</div>
+<script src="../Logic/chat.js"></script>
+</body>
+</html>
diff --git a/Presentation/settings.php b/Presentation/settings.php
index 603ca46..ee6318d 100644
--- a/Presentation/settings.php
+++ b/Presentation/settings.php
@@ -325,7 +325,7 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
<div class="card">
<div class="avatar">
- <img src="getimage.php?userId=<?php echo htmlspecialchars($userId); ?>" alt="User Avatar">
+ <img src="../Logic/getimage.php?userId=<?php echo htmlspecialchars($userId); ?>" alt="User Avatar">
</div>
<div class="input-group">
<label for="name">Name:</label>
--
GitLab