关于统计页面停留时间的一点小思路

最新推荐文章于 2025-05-11 02:14:05 发布

最后一个NPE

最新推荐文章于 2025-05-11 02:14:05 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： JAVA JAVASCRIPT

本文链接：https://blog.csdn.net/MY9526/article/details/82259727

博客介绍了前后端交互流程。前端通过ajax请求获取本次访问的唯一ID，对页面请求进行记录。获取到ID后，前台采用轮询方式，每隔一定时间根据ID发起请求，后端则根据ID更新相应记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，我们前端可以对后台发起一次ajax请求，来获取本次访问的一个唯一ID：

@Autowired
    private StayTimeService stayTimeService;
    @GetMapping("/id")
    public Object in(HttpServletRequest request, @RequestParam("url") String url){
        String ip=request.getRemoteHost();
        StayTime stayTime=new StayTime();
        stayTime.setIp(ip);
        stayTime.setUrl(url);
        stayTime.setTime(new Date());
        stayTime.setResidenceTime(0);
        return stayTimeService.recordAndGetId(stayTime);
    }

我们可以通过如上代码对一次页面请求进行记录，并返回一个唯一的ID。

然后呢，前台通过一次ajax请求获取ID：

$.ajax({
   url:"/ws/stayTime/id?url="+url,
    headers:{"Blog":"Restful"},
    success:function(data){
        id=data;
        console.log("取回ID成功，："+id);
        heartBeat();
    }
    ,
    error:function(data){
       console.log("取回ID失败，原因"+data.status);
    }

});

如果取到了ID之后，我们就可以通过轮询的方式，相隔一定的时间根据ID发起请求，然后后端根据ID更新相应的记录

function heartBeat(){
    //定时给服务器发送心跳
    setInterval(function(){
        $.ajax({
            url:"/ws/stayTime/per/"+id,
            headers:{"Blog":"Restful"},
            success:function(data){
                console.log("心跳成功，："+data);
            }
            ,
            error:function(data){
                console.log("心跳失败，原因"+data.status);
            }

        });
    },10000);
}

我的思路就是这样。