線上人數統計

筆者做了一個網站，需要統計線上人數。

線上有兩種：

一、如果是後臺系統如果登入算線上，退出的時候或者cookie、token失效的時候就算下線

二、如果是網站前臺，存取的時候就算線上

今天我們來講一下第2種情況，網站前臺如何統計同時線上人數

1、首先建立一個線上人數管理類

該類主要是管理登入的session資訊

package com.ds.blog.admin.manager;

import java.util.HashSet;
import java.util.Set;

public class OnlineUserManager {

    //建立資料型別set來儲存session
    private static final Set<String> onlineUsers = new HashSet<>();

    //新增存取
    public static void addUser(String sessionId){
        onlineUsers.add(sessionId);
    }

    //刪除存取
    public static void removeUser(String sessionId){
        onlineUsers.remove(sessionId);
    }

    //獲取線上人數
    public static Set<String> getOnlineUsers(){
        return onlineUsers;
    }

}

2、建立攔截器用於增加存取次數

當用戶存取首頁或者詳情頁的時候，攔截器獲取sessionid，存入onlineUsers中

package com.ds.blog.admin.interceptor;

import com.ds.blog.admin.manager.OnlineUserManager;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class OnlineInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if (request.getRequestURI().contains("/front")){
            System.out.println("pre begin");
            // 儲存存取人數
            OnlineUserManager.addUser(request.getSession().getId());
            System.out.println("pre end");
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        if (request.getRequestURI().contains("/front")){
            System.out.println("postHandle begin");
            // 在處理完請求後呼叫，可以對ModelAndView進行操作
            if (modelAndView != null) {
                modelAndView.addObject("onlineUsers", OnlineUserManager.getOnlineUsers().size());
            }
            System.out.println("postHandle end");
        }
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
    }

}

3、註冊第2步的攔截器

package com.ds.core.config;

import com.ds.blog.admin.interceptor.OnlineInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new OnlineInterceptor());
    }
}

前三步做完以後，就可以實現線上人數了。

4、網頁實現

<p th:text="'當前線上人數: ' + ${onlineUsers}"></p>

效果如下：

但是有一個問題，如果使用者關閉存取的頁面，同時線上人數不會下降，原因是因為前端認為關閉頁面才算作退出線上人數。所以當頁面關閉的時候，觸發onlineUserManger的removeUser方法，就需要第5和第6步的實現

5、前端controller新增關閉頁面時呼叫的controller

頁面關閉時，會呼叫removeSession方法

/**
 * @return
 */
@BookLog(title = "關閉頁面時減少線上人數",businessType = BusinessType.DELETE)
@ApiOperation(value = "獲取文章內容")
@PostMapping(value = "blog/updateOnlineUsers")
@ResponseBody
public Result removeSession(HttpServletRequest request){
    try {
        OnlineUserManager.removeUser(request.getSession().getId());
    } catch (Exception exception) {
        exception.printStackTrace();
    }
    return Result.success("減少成功");
}

6、頁面關閉時，js觸發controller

window.onbeforeunload = function() {
    $.ajax({
        url: 'blog/updateOnlineUsers',
        method: 'POST',
        success: function(response) {
            console.log('關閉成功')
        }
    });
}

總體功能完成，我們來看下效果

ie瀏覽器登入，線上人數為1

谷歌瀏覽器登入，線上人數為2

關閉ie瀏覽器，重新整理谷歌瀏覽器當前線上人數降為1