给github添加访问统计展示Github 主页美化和统计，README.md 中外链图片，使用 nodejs 返回 s

效果预览：haokur (github.com)

github 项目的 README.md 文档支持使用外链图片，可以利用图片访问来做访问统计埋点，返回一张 svg 的图片，svg 图片中绘制访问数据等相关信息

注意点：

• github 的外链图片访问，不直接访问原地址，而是为了安全，统一由 camo.githubusercontent.com 来转发，不能直接获取到 github 访问的 referer 信息，所以需要在图片地址里，带用户名和来源信息
• github 的图片会有缓存，为了实时性，需要在 header 头里设置 cache-control 为 no-cache

服务器能接收到的请求头信息：

{
  host: 'xxxx.com',
  'x-real-ip': 'xx.xx.xx.xx',
  'x-forwarded-for': 'xx.xx.xx.xx',
  'x-forwarded-proto': 'https',
  connection: 'close',
  'user-agent': 'github-camo (c006e452)',
  accept: 'image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5',
  'accept-language': 'zh-CN,zh-Hans;q=0.9',
  via: 'HTTP/1.1 github-camo (c006e452)'
}

使用 nodejs 的 Koa 框架和 svg 实现

import { RedisService } from '../services/redis.service';
import { SqlService } from '../services/sql.service';
import { CommonUtil } from '../utils/common.util';

async function GithubViewerCount(params, ctx) {
    const headers = ctx.req.headers;
    const userAgent = headers['user-agent'];
    if (!userAgent.includes('github-camo')) return 'not github';

    const { username, spm_id_from = '' } = params;
    if (!username) return 'not github user';

    const realIp = headers['x-real-ip'];

    const today = CommonUtil.fmtDate(Date.now(), 'yyyy-MM-dd');

    // 尝试读缓存，60秒刷新一次
    const userRedisDataKey = `github_view_${username}_${spm_id_from}`;
    const cacheData = await RedisService.get(userRedisDataKey);
    let todayViewCount = 0;
    let totalViewCount = 0;
    if (cacheData) {
        todayViewCount = cacheData.todayViewCount;
        totalViewCount = cacheData.totalViewCount;
    } else {
        await SqlService.insert(GithubViewerTableName, {
            username,
            spm_id_from,
            ip: realIp,
            view_date: today,
        });
        todayViewCount = await SqlService.count(GithubViewerTableName, {
            username,
            spm_id_from,
            view_date: today,
        });
        totalViewCount = await SqlService.count(GithubViewerTableName, {
            username,
            spm_id_from,
        });
        RedisService.set(
            userRedisDataKey,
            {
                todayViewCount,
                totalViewCount,
            },
            60
        );
    }

    const svgContent = `<svg width="140" height="70" xmlns="http://www.w3.org/2000/svg">
            <text x="10" y="20" fill="#333" font-size="15">
                今日访问数 ${todayViewCount}
            </text>
            <text x="10" y="50" fill="#333" font-size="15">
                累计访问数 ${totalViewCount}
            </text>
        </svg>`;

    return {
        headers: {
            'content-type': 'image/svg+xml',
            'cache-control': 'no-cache',
        },
        body: svgContent,
    };
}

其中 RedisService，SqlService 是对 redis 和 mysql 的操作的封装，不重要，不影响整体主逻辑

然后在项目根目录下的 README.md 中，添加图片，例如：

<img src="https://api.haokur.com/github/viewer-count?username=用户名&spm_id_from=来源"/>

保存后，刷新页面就可以看到效果了。

以上是简单的实现思路，可以接着优化的点有：

• 更精细化地控制缓存，不是粗暴地 no-cache
• 访问数分 pv，uv
• 包含用户基本仓库信息，提交信息等
• svg 的优化，动画，图形，趋势图等？