分享一个我给 Github README.md 做的访客统计功能

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1657 天前的主题，其中的信息可能已经有所发展或是发生改变。

这个是我很久之前准备开始用 Github issue 做博客时做的，从 hexo 迁移过去之后发现用 github issue 写博客没有访客统计功能（虽然本来也没人看）。

但是由于不管是 github issues，还是 github 的 README，都只支持 markdown 语法，不能使用各种第三方统计了。

就自己做了一个访客统计的徽章（ badge ）服务。

原理很简单，徽章是一个 svg，你只需要在你的 issues 或者 readme 中添加一个 markdown 的图片：

![]( https://visitor-badge.glitch.me/badge?page_id=<your_page_id>)

当有人打开你的 issue 或者 github 仓库时，浏览器会加载这个图片，服务器就会发出一个请求。

之后根据请求里的 page_id 来计数，并将最新的数量生成到一个 svg 图片中，将这个 svg 返回，浏览器就可以显示出来了。

注意这里的参数：page_id, 需要自己手动给一个唯一的字符串，没有特定规则，只要能唯一标识当前页面即可。

最开始想用 http request header 里面的 referrer 字段，但是后来发现 github 对图片进行了代理，服务器收到的图片请求中没有了原先的 referrer 字段。

另外实现过程中还有一点，就是缓存，github 的图片代理服务器会对你的图片进行缓存，所以我在做第一版的时候发现这个 svg 图片更新有问题，就开始研究 github 用的这个 camo 服务器，后来在返回 svg 的时候在 response 的 header 中做了点手脚：

添加一个 no-cache 的 header： 'Cache-Control': 'no-cache,max-age=0'
将 Expires header 的值设置为了当前时间减去 10 分钟

这样设置了之后，就可以绕过 camo 的缓存策略，每次都可以顺利的 +1，实际效果：

刷新一下这个页面试试？

Github：visitor-badge

第 1 条附言 · 2020-06-16 09:03:48 +08:00

方便的朋友也可以顺手给 product hunt 页面点个 vote.

第 2 条附言 · 2020-06-16 09:14:05 +08:00

额，glitch.me 免费版已经报错说 too many requests 了 :)

不过来得早的同学已经看到效果了..

另外如果有人有富裕的服务器想自己部署代码也都有，欢迎。

PS. 如果有人愿意donate一下我把我的 glitch.me 升级成pro，也可以很稳定... :)

第 3 条附言 · 2020-06-16 09:36:32 +08:00

再班门弄斧一下吧，这个原理被很多恶意的网站用来收集隐私信息，比如说有的网站给你发的邮件里，不管是营销邮件还是垃圾邮件或者其他的东西，在邮件正文中插入一个 1像素的图片，图片的url地址都是精心构造好的，当你打开邮件时，发送者就可以知道：

谁，在什么时间，用什么设备，什么ip，什么网络打开了这个邮件。

有了ip就知道你是在什么地方（大致）打开的这个邮件。

从而可以对这个营销邮件的效果进行分析，比如发送了 10000 个邮件，有多少人打开之类的。

再往后挖，甚至还可以挖出你的兴趣，比如给你发不同的主题邮件，18+ 的，创业的，培训班的等等，一样发一个，看看你都打开了哪些，给你打标签...

所以现在一般邮件客户端都默认不加载图片，一是节省打开邮件的时间，加快打开速度，二也是为了保护你的隐私。

你可以检查一下你的邮件客户端，把默认加载图片给关掉。

89 条回复 • 2020-07-09 15:03:04 +08:00

2020-06-16 08:02:54 +08:00 via Android

这个不错，过后试下。

uuspider

2020-06-16 08:04:05 +08:00 via Android

真是创意无限啊

chotow

2020-06-16 08:04:27 +08:00

你这个统计怎么和 V2EX 的点击统计不一样 🌸🐔

jwenjian

2020-06-16 08:05:39 +08:00

@chotow v2 的更有意义吧，这个说白了就是统计图片加载次数

jwenjian

2020-06-16 08:33:06 +08:00

@ob 掘金好像不行，他是直接转存的图片，发布之后就编程一个静态图片了不会变

jwenjian

2020-06-16 08:33:24 +08:00

@uuspider 也是收到其他 github 徽章的启发

chizuo

2020-06-16 08:43:48 +08:00

不错不错，挺好的

zhw2590582

2020-06-16 09:02:43 +08:00

不错，但我只担心服务器稳不稳定，是不是一直维护

jwenjian

2020-06-16 09:05:02 +08:00

@zhw2590582 在 glitch.me 上，只要一直有访问，没啥问题。可能偶尔出不来 :)

不过代码开源的欢迎部署到更稳定的服务器上提供稳定的服务

ChanKc

2020-06-16 09:14:08 +08:00 via Android

GitHub 好像就有访客功能吧，当然不如自己做的全就是

Ritter

2020-06-16 09:15:17 +08:00

666

jwenjian

2020-06-16 09:15:58 +08:00

@ChanKc 这个之前还真没听说过，有链接么

securityCoding

2020-06-16 09:18:43 +08:00

创意无限啊

ChanKc

2020-06-16 09:25:03 +08:00 via Android

@jwenjian traffic 还是什么的，能看到每周克隆数折线图那个页面，手机上没找到

watzds

2020-06-16 09:26:48 +08:00 via Android

以前 bbs 图片签名，能显示 ip，天气之类，是不是也是这个原理

jwenjian

2020-06-16 09:28:31 +08:00

@watzds 应该是一个原理

jwenjian

2020-06-16 09:37:18 +08:00

@ChanKc 嗯嗯我好像也见到过，不过我这个纯粹是为了统计打开次数。

NotFoundEgg

2020-06-16 09:47:01 +08:00

让我想到了珊瑚虫 qq 印象中也是用发送 1 像素图片获取对方 ip 的

jwenjian

2020-06-16 09:50:52 +08:00

@NotFoundEgg 这个还真不清楚是不是这个原理不过珊瑚虫。。。。哈哈好久之前的东西了之前好多人都是安装魔改的 qq，各种功能。

metrue

2020-06-16 09:59:35 +08:00

👍，小功能已经用在了 https://github.com/metrue/fx 上面.

raaaaaar

2020-06-16 10:00:10 +08:00 via Android

挺不错，能看见自己打开了多少次 T_T

jwenjian

2020-06-16 10:01:47 +08:00 via iPhone

感谢哪位大哥给的置顶…… 我都没注意

jwenjian

2020-06-16 10:08:58 +08:00 via iPhone

@raaaaaar 同惨……

Pyrex23

2020-06-16 10:23:16 +08:00 via iPhone

呃呃是不是不行了？
This project has received too many request, please try again later

metrue

2020-06-16 10:25:57 +08:00

已经挂了?....

WittBulter

2020-06-16 10:29:37 +08:00

和我的 `views.show` 有点像: https://docs.views.show/
我一开始也支持 GitHub，后来我发现如果不对 Referrer 做识别，就无法避免暴力刷 views 的问题，虽然服务是在 Serverless 上无所谓压力，但是数据会很不准确。后面当我想实现只读、访客识别等功能的时候，就只好抛弃了 GitHub ...
没有找到特别好绕过 camo 的办法，所以我就转型只做个人博客或者网站的 views 统计了...

jwenjian

2020-06-16 10:33:54 +08:00

@metrue glitch 免费版每分钟有最大次数限制好像... 你可以部署在 giki 的服务器上一份, :)

jwenjian

2020-06-16 10:35:56 +08:00

@WittBulter camo 绕不过去，本来用 referrer 是最合适的，不过因为有 camo 就只能这样了，不能说完美，只能说能用吧。

wysnylc

2020-06-16 10:42:43 +08:00

这就是 N 年前论坛里签名图片显示 IP 位置系统信息的东西,上面大吃一惊的是装的吗

slmaaw

2020-06-16 10:51:25 +08:00 via Android

这应该也是 Google 的埋点原理吧请求一个 1 像素的图片

jwenjian

2020-06-16 11:06:10 +08:00

@slmaaw google 统计是执行 js 代码，跟这个应该是不一样： https://developers.google.cn/analytics/devguides/collection/analyticsjs/how-analyticsjs-works?hl=zh-cn

iamkun

2020-06-16 11:10:28 +08:00

看起来 Github 会缓存一份图片到自己的服务上

https://camo.githubusercontent.com/92b3578005c83d0d417978e02333800d2e4575b2/68747470733a2f2f6170692e70726f6475637468756e742e636f6d2f776964676574732f656d6265642d696d6167652f76312f66656174757265642e7376673f706f73745f69643d313935313436267468656d653d6461726b

这会不会造成数据不准确？请求其实并没有到你的服务器

leetao94

2020-06-16 11:12:11 +08:00

有没有统计下载次数的功能呢？

xcodebuild

2020-06-16 11:12:28 +08:00

有个类似的服务 https://hits.dwyl.com/

jwenjian

2020-06-16 11:13:29 +08:00

@iamkun 嗯你可以重点看下我提到的绕过缓存服务器 camo 的部分，应该是没问题的。每一次生成的图片 github 都会缓存的，你再刷新一下，看看这两个 github 缓存的图片地址，应该是不一样的。

jwenjian

2020-06-16 11:14:47 +08:00

@xcodebuild 看起来比我薅 glitch 的羊毛靠谱 :)

iamkun

2020-06-16 11:15:29 +08:00

@jwenjian 哦刚才没看太仔细这思路不错

jwenjian

2020-06-16 11:15:45 +08:00

@leetao94 这个就用各种统计平台的埋点功能就可以了

jwenjian

2020-06-16 11:19:45 +08:00

@xcodebuild 刚看了一下 hits 应该是用的同一种策略绕过 camo 的：

cache-control: no-cache, no-store, must-revalidate
cf-cache-status: BYPASS
cf-ray: 5a4161bc6ebbe80d-LAX
cf-request-id: 035cbb69be0000e80dc7069200000001
content-encoding: br
content-type: image/svg+xml
date: Tue, 16 Jun 2020 03:18:08 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
expires: 0
pragma: no-cache
server: cloudflare
status: 200
vary: Ac

或者说这应该是一个标准的 http 缓存策略的设置。

wuhaoworld

2020-06-16 11:28:02 +08:00

这个方式已经不行了吧？我看 Github 会把外链的图片抓取并保存到 githubusercontent.com 的域名下

ioioioioioioi

2020-06-16 11:32:32 +08:00

这个机器人怕也算统计吧

jwenjian

2020-06-16 11:33:52 +08:00

@wuhaoworld 可以再仔细点看看帖子

jwenjian

2020-06-16 11:34:55 +08:00

@ioioioioioioi 哈算不过如果真的有人刷这个数量也没办法其实没啥意义，刷个 10w 8w 的，又不能换钱

coldmonkeybit

2020-06-16 12:13:30 +08:00

涨知识，终于知道为什么我的邮箱会默认屏蔽图片了

cyrbuzz

2020-06-16 12:53:35 +08:00

利用 img 图片进行的错误上报...前天刚看了实践就来了。

huiyadanli

2020-06-16 13:03:26 +08:00

想到了 http://hits.dwyl.io/
感觉没啥区别

jwenjian

2020-06-16 13:31:19 +08:00

@huiyadanli 这个之前有人提到了，功能上看应该是一样的功能。

jwenjian

2020-06-16 13:38:20 +08:00

对了这个项目的 [首页]( https://visitor-badge.glitch.me) 的 favicon 也是一个 svg 哦，里面放了一个 emoji 表情 👀，你可以用这个方式来把你喜欢的 emoji 表情作为网页的 favicon，具体可以看 [这里]( https://www.yuque.com/jwenjian/blog/mpnmmb)

metrue

2020-06-16 14:17:18 +08:00

提一个需求，可以加一个 'since <date>' 的功能。

zhwithsweet

2020-06-16 14:51:57 +08:00

http://blog.zouhaha.site/ 已经放在自己的 blog 上

wellsc

2020-06-16 14:59:33 +08:00

Insights 的 traffic 挺好用的，能精确到某个 issue 的 unique visitors,还有图表

meisen

2020-06-16 15:14:45 +08:00

楼主很强大，能否帮忙看下 https://www.v2ex.com/t/682055 是否可以解决？

jwenjian

2020-06-16 15:25:00 +08:00 via iPhone

@wellsc 不瞒你说我从来没点开过 insight 的那个 tab 页 😂

Tink

2020-06-16 15:49:57 +08:00

很 6

Tink

2020-06-16 15:50:24 +08:00

![]( https://visitor-badge.glitch.me/badge?page_id=681899)

yanshenxian

2020-06-16 16:06:53 +08:00

这个挺好的

jwenjian

2020-06-16 16:47:52 +08:00 via iPhone

@yanshenxian 嗯嗯主要是分享一下这个思路

0312birdzhang

2020-06-16 17:05:58 +08:00

不错，已 star 👍

liuyibao

2020-06-16 17:36:00 +08:00

no1xsyzy

2020-06-16 18:19:07 +08:00

补充：Gmail 对图片进行缓存，不会暴露真实 IP 。

hercat

2020-06-16 18:27:42 +08:00

想法不错 👍

jwenjian

2020-06-16 19:37:57 +08:00

@no1xsyzy 👍

jwenjian

2020-06-16 19:39:46 +08:00

@cyrbuzz 也是一种跨域新思路

windardyang

2020-06-16 21:34:28 +08:00

cool, like it.

windardyang

2020-06-16 21:34:38 +08:00

stared

sedgwickz

2020-06-16 22:00:05 +08:00

建议给 ip 加个 cache，否则容易被刷，刚试了下，一会刷了好几千。

测试地址： https://visitor-badge.glitch.me/badge?page_id=visitor-badge.v2ex.sharing1

测试代码：

···
import requests
import time
import threading

def sendReq():
try:
r = requests.get('https://visitor-badge.glitch.me/badge?page_id=visitor-badge.v2ex.sharing1')
except:
pass

def run():
try:
while 1:
threading.Thread(target=sendReq).start()
time.sleep(0.01)
except:
pass

run()
···