Description
readme-visitor-badge
这是什么
一个统计README页面被打开多少次的badge生成服务, 其实原理上可以应用在任何可以显示svg的markdown/issue/html上, 当你每次打开这些页面, 浏览器就会向服务器发送一个请求, 将对应的访问数量加1, 之后生成最新的svg返回给浏览器.
技术点
- badge的生成, 直接使用了google的开源项目pybadges, 非常简单
- 利用Flask写了非常简单的web服务, 接受请求, 缓存访问量, 生成svg并返回
遇到的问题
- 缓存
Github使用了camo作为图片的代理服务器, 当你审查README上的图片元素时, 你会发现所有的图片都不是指向真实的服务器地址, 而是一串https://camo.githubusercontent.com/xxxxxxxxxxxxxxxxxxxxxxxxx/yyyyyyyyyyyyyyy/zzzzzzzzzzzzzzzz.jpg的网址, 如下:
而camo的服务器会对被代理的图片进行缓存, 使得当第一次刷新页面时, camo会像badge生成服务发起请求, camo记录访问次数为1, 之后再次刷新页面, camo会缓存这个badge图片, 从而无法达到我们想要的效果.
经过一番搜索和研究发现, 在badge生成服务返回的http响应的header中, 需要动一些小手脚:
-
Cache-Control
设置Cache-Control的内容为no-cache,max-age=0, 告诉camo服务器在使用缓存之前进行验证 -
Expires
这里我手动将资源的过期时间设置成了当前时间减去10分钟
这样的话, 当用户打开README页面之后, camo服务器在返回缓存内容之前, 会像源服务器发起请求, badge生成服务收到请求之后会将访问量加1并生成相应的svg内容同时携带以上2个header信息返回.
而正是由于这两个header的设置, camo服务器发现缓存的资源在10分钟之前已经过期, 于是就将最新的svg返回给了浏览器.
使用方法
在你的README里面, 添加一个图片:
如 就会统计当前issue的总访客数量, 如下图, 刷新下这个页面试试?
下一步计划
- 当前方案没有对这些访问量进行持久化, 下一步是研究如何使用heroku的数据库来进行持久化
所以如果你哪天发现你的访问量突然从0开始了, 还请见谅 :(
- 新增生成当天访问量的badge
- 新增生成最近7天/30天访问量折线图的badge