Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[第 67 期] 项目自荐 - 我给GitHub的README做了个访客数量统计功能 #662

Open
jwenjian opened this issue Jul 3, 2019 · 6 comments

Comments

@jwenjian
Copy link

commented Jul 3, 2019

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的网址, 如下:
image

而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的总访客数量, 如下图, 刷新下这个页面试试?

Total visitor

下一步计划

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

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

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

@Lionad-Morotar

This comment has been minimized.

Copy link

commented Jul 3, 2019

有意思

@jwenjian

This comment has been minimized.

Copy link
Author

commented Jul 3, 2019

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

@jwenjian

This comment has been minimized.

Copy link
Author

commented Jul 3, 2019

@jwenjian

This comment has been minimized.

Copy link
Author

commented Jul 4, 2019

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

@ruanyf ruanyf changed the title 项目自荐 - 我给GitHub的README做了个访客数量统计功能 [第 67 期] 项目自荐 - 我给GitHub的README做了个访客数量统计功能 Jul 5, 2019

@jwenjian

This comment has been minimized.

Copy link
Author

commented Jul 6, 2019

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

@jwenjian

This comment has been minimized.

Copy link
Author

commented Jul 21, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.