实现一个简单的类似不蒜子的PV统计器

内部的放到gitlab pages的博客,需要统计PV,不蒜子不能准确统计,原因在于gitlab的host设置了strict-origin-when-cross-origin, 导致不蒜子不能正确获取referer,从而PV只能统计到网站的PV。

为了方便统计页面的PV,这里简单的写了一个java程序,用H2作为db存储,实现类似不蒜子的后端。

step0

下载编译:

git clone https://github.com/jadepeng/simplepv
cd simplepv
mvn package -DskipTests

部署 web 程序

    java -jar simplepv-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

输出

2021-12-02 20:25:49.014  INFO 35916 --- [           main] com.jadepeng.simplepv.SimplepvApp        : The following profiles are active: prod
2021-12-02 20:25:53.585  INFO 35916 --- [           main] c.j.simplepv.config.WebConfigurer        : Web application configuration, using profiles: prod
2021-12-02 20:25:53.589  INFO 35916 --- [           main] c.j.simplepv.config.WebConfigurer        : Web application fully configured
2021-12-02 20:26:02.580  INFO 35916 --- [           main] org.jboss.threads                        : JBoss Threads version 3.1.0.Final
2021-12-02 20:26:02.697  INFO 35916 --- [           main] com.jadepeng.simplepv.SimplepvApp        : Started SimplepvApp in 15.936 seconds (JVM running for 16.79)
2021-12-02 20:26:02.707  INFO 35916 --- [           main] com.jadepeng.simplepv.SimplepvApp        :
----------------------------------------------------------
	Application 'simplepv' is running! Access URLs:
	Local: 		http://localhost:58080/
	External: 	http://172.1.1.12:58080/
	Profile(s): 	[prod]
----------------------------------------------------------

本程序默认使用 h2 作为存储,所以不用另外安装 mysql。

step1

引用 client.js, 也可以直接放入到网页中

var bszCaller, bszTag, scriptTag, ready;

var t,
  e,
  n,
  a = !1,
  c = [];

// 修复Node同构代码的问题
if (typeof document !== 'undefined') {
  (ready = function (t) {
    return (
      a || 'interactive' === document.readyState || 'complete' === document.readyState
        ? t.call(document)
        : c.push(function () {
            return t.call(this);
          }),
      this
    );
  }),
    (e = function () {
      for (var t = 0, e = c.length; t < e; t++) c[t].apply(document);
      c = [];
    }),
    (n = function () {
      a ||
        ((a = !0),
        e.call(window),
        document.removeEventListener
          ? document.removeEventListener('DOMContentLoaded', n, !1)
          : document.attachEvent &&
            (document.detachEvent('onreadystatechange', n), window == window.top && (clearInterval(t), (t = null))));
    }),
    document.addEventListener
      ? document.addEventListener('DOMContentLoaded', n, !1)
      : document.attachEvent &&
        (document.attachEvent('onreadystatechange', function () {
          /loaded|complete/.test(document.readyState) && n();
        }),
        window == window.top &&
          (t = setInterval(function () {
            try {
              a || document.documentElement.doScroll('left');
            } catch (t) {
              return;
            }
            n();
          }, 5)));
}

bszCaller = {
  fetch: function (t, e) {
    var n = 'SimplePVCallback' + Math.floor(1099511627776 * Math.random());
    t = t.replace('=SimplePVCallback', '=' + n);
    (scriptTag = document.createElement('SCRIPT')),
      (scriptTag.type = 'text/javascript'),
      (scriptTag.defer = !0),
      (scriptTag.src = t),
      document.getElementsByTagName('HEAD')[0].appendChild(scriptTag);
    window[n] = this.evalCall(e);
  },
  evalCall: function (e) {
    return function (t) {
      ready(function () {
        try {
          e(t),
            scriptTag && scriptTag.parentElement && scriptTag.parentElement.removeChild && scriptTag.parentElement.removeChild(scriptTag);
        } catch (t) {
          console.log(t), bszTag.hides();
        }
      });
    };
  },
};

const fetch = siteUrl => {
  bszTag && bszTag.hides();
  bszCaller.fetch(`${siteUrl}/api/pv/${window.btoa(location.href)}?jsonpCallback=SimplePVCallback`, function (t) {
    bszTag.texts(t), bszTag.shows();
  });
};

bszTag = {
  bszs: ['site_pv', 'page_pv'],
  texts: function (n) {
    this.bszs.map(function (t) {
      var e = document.getElementById('busuanzi_value_' + t);
      e && (e.innerHTML = n[t]);
    });
  },
  hides: function () {
    this.bszs.map(function (t) {
      var e = document.getElementById('busuanzi_container_' + t);
      e && (e.style.display = 'none');
    });
  },
  shows: function () {
    this.bszs.map(function (t) {
      var e = document.getElementById('busuanzi_container_' + t);
      e && (e.style.display = 'inline');
    });
  },
};

if (typeof document !== 'undefined') {
  fetch('http://localhost:8080/');
}

上面 fetch 的地址,填写 webserver 部署后的地址。

step2

在需要显示 pv 的地方

<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
<span id="busuanzi_container_page_pv">本文总阅读量<span id="busuanzi_value_page_pv"></span>次</span>

原理

当前只统计了PV,未统计uv,后续有空可以增加。

原理,每个url存储一条记录

public class PV implements Serializable {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    private Long id;

    @Column(name = "url")
    private String url;

    @Column(name = "pv")
    private Integer pv;

}

统计PV时,lock url的host,获取pv对象,如果不存在则新增,然后pv+1

注意: 这里用了个lock,防止并发出错

@Override
    public PVDTO increment(String url) {
        Lock lock = null;
        // 简单锁一下 
        try {
            URL uri = new URL(url);
            lock = this.lock(uri.getHost(), 30000);
            if (lock == null) {
                throw new RuntimeException("请稍后重试");
            }

            PV pv = incrementPV(url);

            PV sitePv = incrementPV(uri.getHost());

            return new PVDTO(pv.getPv(), sitePv.getPv());
        } catch (MalformedURLException e) {
            throw new RuntimeException("url not support");
        } finally {
            if (lock != null) {
                this.releaseLock(lock);
            }
        }
    }

    private PV incrementPV(String url) {
        PV pv = this.pVRepository.findFirstByUrl(url).orElse(new PV().url(url).pv(0));
        pv.setPv(pv.getPv() + 1);
        this.pVRepository.save(pv);
        return pv;
    }

开源

代码地址: https://github.com/jadepeng/simplepv

欢迎使用。

原文地址:https://www.cnblogs.com/xiaoqi/p/simplepv.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 目录 连接 连接池产生原因 连接池实现原理 小结 TEMPERANCE:Eat not to dullness;drink not to elevation.节制
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 一个优秀的工程师和一个普通的工程师的区别,不是满天飞的架构图,他的功底体现在所写的每一行代码上。-- 毕玄 1. 命名风格 【书摘】类名用 UpperCamelC
今天犯了个错:“接口变动,伤筋动骨,除非你确定只有你一个人在用”。哪怕只是throw了一个新的Exception。哈哈,这是我犯的错误。一、接口和抽象类类,即一个对象。先抽象类,就是抽象出类的基础部分,即抽象基类(抽象类)。官方定义让人费解,但是记忆方法是也不错的 —包含抽象方法的类叫做抽象类。接口
Writer :BYSocket(泥沙砖瓦浆木匠)微 博:BYSocket豆 瓣:BYSocketFaceBook:BYSocketTwitter :BYSocket一、引子文件,作为常见的数据源。关于操作文件的字节流就是 —FileInputStream&amp;FileOutputStream。
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节。交流QQ群:【编程之美 365234583】http://qm.qq.com/cgi-bin/qm/qr?k=FhFAoaWwjP29_Aonqz
本文目录 线程与多线程 线程的运行与创建 线程的状态 1 线程与多线程 线程是什么? 线程(Thread)是一个对象(Object)。用来干什么?Java 线程(也称 JVM 线程)是 Java 进程内允许多个同时进行的任务。该进程内并发的任务成为线程(Thread),一个进程里至少一个线程。 Ja
Writer :BYSocket(泥沙砖瓦浆木匠)微 博:BYSocket豆 瓣:BYSocketFaceBook:BYSocketTwitter :BYSocket在面向对象编程中,编程人员应该在意“资源”。比如?1String hello = &quot;hello&quot;; 在代码中,我们
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 这是泥瓦匠的第103篇原创 《程序兵法:Java String 源码的排序算法(一)》 文章工程:* JDK 1.8* 工程名:algorithm-core-le
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 目录 一、父子类变量名相同会咋样? 有个小故事,今天群里面有个人问下面如图输出什么? 我回答:60。但这是错的,答案结果是 40 。我知错能改,然后说了下父子类变
作者:泥瓦匠 出处:https://www.bysocket.com/2021-10-26/mac-create-files-from-the-root-directory.html Mac 操作系统挺适合开发者进行写代码,最近碰到了一个问题,问题是如何在 macOS 根目录创建文件夹。不同的 ma
作者:李强强上一篇,泥瓦匠基础地讲了下Java I/O : Bit Operation 位运算。这一讲,泥瓦匠带你走进Java中的进制详解。一、引子在Java世界里,99%的工作都是处理这高层。那么二进制,字节码这些会在哪里用到呢?自问自答:在跨平台的时候,就凸显神功了。比如说文件读写,数据通信,还
1 线程中断 1.1 什么是线程中断? 线程中断是线程的标志位属性。而不是真正终止线程,和线程的状态无关。线程中断过程表示一个运行中的线程,通过其他线程调用了该线程的 方法,使得该线程中断标志位属性改变。 深入思考下,线程中断不是去中断了线程,恰恰是用来通知该线程应该被中断了。具体是一个标志位属性,
Writer:BYSocket(泥沙砖瓦浆木匠)微博:BYSocket豆瓣:BYSocketReprint it anywhere u want需求 项目在设计表的时候,要处理并发多的一些数据,类似订单号不能重复,要保持唯一。原本以为来个时间戳,精确到毫秒应该不错了。后来觉得是错了,测试环境下很多一
纯技术交流群 每日推荐 - 技术干货推送 跟着泥瓦匠,一起问答交流 扫一扫,我邀请你入群 纯技术交流群 每日推荐 - 技术干货推送 跟着泥瓦匠,一起问答交流 扫一扫,我邀请你入群 加微信:bysocket01
Writer:BYSocket(泥沙砖瓦浆木匠)微博:BYSocket豆瓣:BYSocketReprint it anywhere u want.文章Points:1、介绍RESTful架构风格2、Spring配置CXF3、三层初设计,实现WebService接口层4、撰写HTTPClient 客户
Writer :BYSocket(泥沙砖瓦浆木匠)什么是回调?今天傻傻地截了张图问了下,然后被陈大牛回答道“就一个回调…”。此时千万个草泥马飞奔而过(逃哈哈,看着源码,享受着这种回调在代码上的作用,真是美哉。不妨总结总结。一、什么是回调回调,回调。要先有调用,才有调用者和被调用者之间的回调。所以在百
Writer :BYSocket(泥沙砖瓦浆木匠)一、什么大小端?大小端在计算机业界,Endian表示数据在存储器中的存放顺序。百度百科如下叙述之:大端模式,是指数据的高字节保存在内存的低地址中,而数据的低字节保存在内存的高地址中,这样的存储模式有点儿类似于把数据当作字符串顺序处理:地址由小向大增加
What is a programming language? Before introducing compilation and decompilation, let&#39;s briefly introduce the Programming Language. Programming la
Writer :BYSocket(泥沙砖瓦浆木匠)微 博:BYSocket豆 瓣:BYSocketFaceBook:BYSocketTwitter :BYSocket泥瓦匠喜欢Java,文章总是扯扯Java。 I/O 基础,就是二进制,也就是Bit。一、Bit与二进制什么是Bit(位)呢?位是CPU
Writer:BYSocket(泥沙砖瓦浆木匠)微博:BYSocket豆瓣:BYSocket一、前言 泥瓦匠最近被项目搞的天昏地暗。发现有些要给自己一些目标,关于技术的目标:专注很重要。专注Java 基础 + H5(学习) 其他操作系统,算法,数据结构当成课外书博览。有时候,就是那样你越是专注方面越