[第 67 期] 项目自荐 - 我给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://camo.githubusercontent.com/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=ruanyf.weekly.issue.662)就会统计当前issue的总访客数量, 如下图, 刷新下这个页面试试?

下一步计划

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

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

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

[Lionad-Morotar]

有意思

[jwenjian]

不持久化好像有时候表现挺奇怪的, 我会尽快搞定.

[jwenjian]

😄 @Lionad-Morotar

[jwenjian]

还发现了一个问题😂，由于用的heroku是免费版的，如果1小时内没有请求的话，应用会被休眠，再次唤醒的时候还是会从0开始，哎，看来不整点钱是不行了。不过还是给大家提供了一个思路，有条件的可以部署在自己的云服务器上

[jwenjian]

持久化已经加上了, 各位可以试试, 如果有问题, 可以提issue
@Lionad-Morotar @ruanyf

[jwenjian]

生成只统计当天访问量的badge已经完成了， see new release v1.0.1