implement user have two status which is online and offline. and create a page...

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.

implement user have two status which is online and offline. and create a page...
11c27894 · CXM · 6d414979 · 11c27894 · 11c27894 · 11c27894
Commit 11c27894 authored 1 year ago by CXM
--- a/Logic/chat.js
+++ b/Logic/chat.js
+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);
--- a/Logic/get_online_users.php
+++ b/Logic/get_online_users.php
+<?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);
--- a/Presentation/getimage.php
+++ b/Presentation/getimage.php
--- 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;
+?>
--- 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 {

--- a/Presentation/chatPage.php
+++ b/Presentation/chatPage.php
+<!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>
--- 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>