java统计实时登录人数

原创

mob64ca12e1881c 2024-09-09 07:51:25 ©著作权

文章标签 spring java Java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e1881c的原创作品，请联系作者获取转载授权，否则将追究法律责任

Java实时登录人数统计

在现代应用程序中，实时监控用户登录状态是至关重要的。这不仅有助于管理员了解系统的使用情况，还可以帮助优化系统性能。本文将探讨如何使用Java实现一个简单的实时登录人数统计，并通过代码示例进行详细说明。

一、需求分析

我们希望能够：

统计当前登录的用户数量。
支持用户登录和登出操作的实时更新。
可视化当前用户的统计数据。

在此基础上，我们将使用Java语言实现以上需求。为了实现可视化效果，我们将使用饼状图来展示当前在线用户的分布情况。

二、技术选型

在实现之前，我们需要选择合适的技术栈：

Java - 作为后端开发语言。
Spring Boot - 用于快速构建REST API。
WebSocket - 实现客户端与服务器端的实时通信。
前端可视化库 - 如Chart.js，用于展示用户在线状态的饼图。

三、系统设计

1. 数据结构

我们可以使用一个 ConcurrentHashMap 来存储在线用户的状态。username 作为键，loginTime 作为值。

import java.util.concurrent.ConcurrentHashMap;

public class UserSession {
    private ConcurrentHashMap<String, Long> loggedInUsers = new ConcurrentHashMap<>();

    public void login(String username) {
        loggedInUsers.put(username, System.currentTimeMillis());
    }

    public void logout(String username) {
        loggedInUsers.remove(username);
    }

    public int getOnlineCount() {
        return loggedInUsers.size();
    }
}

2. REST API

使用Spring Boot，我们可以创建一个控制器来处理用户的登录和登出请求，并提供获取在线人数的接口。

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/users")
public class UserController {
    private UserSession userSession = new UserSession();

    @PostMapping("/login")
    public void login(@RequestParam String username) {
        userSession.login(username);
        // 推送更新到客户端
    }

    @PostMapping("/logout")
    public void logout(@RequestParam String username) {
        userSession.logout(username);
        // 推送更新到客户端
    }

    @GetMapping("/online")
    public int getOnlineUsers() {
        return userSession.getOnlineCount();
    }
}

以上代码实现了用户的登录、登出和获取在线人数的基本功能。

四、WebSocket实现实时更新

接下来，我们需要实现WebSocket，以便客户端可以实时接收在线人数更新。

首先，我们需要创建一个WebSocket配置类：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new UserWebSocketHandler(), "/ws/users").setAllowedOrigins("*");
    }
}

接下来，创建WebSocket处理器：

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class UserWebSocketHandler extends TextWebSocketHandler {
    private UserSession userSession = new UserSession();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        // 用户连接时可以发送在线人数
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        // 处理用户登录或登出消息
    }
}

五、前端展示

前端页面可以使用HTML和JavaScript来展示在线人数的饼图。这里我们使用Chart.js库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时在线人数</title>
    <script src="
</head>
<body>
    <canvas id="onlineUsersChart" width="400" height="400"></canvas>
    <script>
        const ctx = document.getElementById('onlineUsersChart').getContext('2d');
        const onlineUsersChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['在线人数'],
                datasets: [{
                    label: '在线人数',
                    data: [0], // 初始值
                    backgroundColor: ['rgba(75, 192, 192, 0.2)'],
                    borderColor: ['rgba(75, 192, 192, 1)'],
                    borderWidth: 1
                }]
            },
        });

        const socket = new WebSocket('ws://localhost:8080/ws/users');

        socket.onmessage = function(event) {
            const onlineCount = JSON.parse(event.data).onlineCount;
            onlineUsersChart.data.datasets[0].data[0] = onlineCount;
            onlineUsersChart.update();
        };
    </script>
</body>
</html>

在这个示例中，WebSocket连接服务器，并实时更新在线人数的饼图。

六、可视化结果

为了更好地展示用户在线状态，我们可以使用mermaid语法来绘制饼状图和旅行图。这里是如何展示我们的在线用户数据的。

饼状图

pie
    title 在线人数分布
    "在线用户": 30
    "离线用户": 70

旅行图

journey
    title 用户登录与登出过程
    section 登录过程
      用户发送登录请求: 5: 用户
      系统处理请求: 3: 系统
      用户登录成功: 4: 用户
    section 登出过程
      用户发送登出请求: 5: 用户
      系统处理登出请求: 3: 系统
      用户登出成功: 4: 用户