如何使用 js 统计访问量及网站运行时间

我打算用思源的 Docker 发布功能搭建博客,但不知如何统计访问量。能否提供一段 JS 代码,实现记录访问量和网站运行时间,并将这些信息显示在侧边栏?另外,希望代码存储的数据能通过 S3 同步或打包。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25230 引用 • 104049 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9646 引用 • 43853 回帖 • 95 关注

相关帖子

被采纳的回答
  • wilsons 1 1 赞同

    写了一个代码,但不知你说的侧边栏是指放哪?感觉放不下,所以放状态栏了。

    另外,手机版也不知道哪里有位置显示,所以暂不支持。

    仅供参考。

    image.png

    // 统计网站访问量和运行时间 (async ()=>{ // api地址,最后不要加 / const apiUrl = 'http://127.0.0.1:6806'; // api token 在设置->关于中查看 const apiToken = ''; // 初始化数据 const initData = { // 网站总访问量 total: 0, // 网站运行初始日期 startDay: '2025-04-13' }; // 定义统计信息显示模板 const tongjiTpl = `总访问量:{total}&nbsp;&nbsp;网站运行:{runningDays}天`; // 已统计的跳过 if(document.querySelector('#status .site__tongji')) return; // 记录初始访问量 const initTotal = initData.total || 0; // 延迟等待数据加载和同步 await sleep(1500); // 获取置顶数据,格式 {"total":0, "startDay":''} let data = await getFile('/data/storage/site_tongji.json'); data = JSON.parse(data||'{}'); if(data.code && data.code !== 0) data = {}; data = {...initData, ...data}; // 仅网站版和发布服务版才统计 if(siyuan.config.readonly && isBrowser()) { // 当不存在total字段时初始化 if(!data.total) data.total = 0; // 当总数小于初始化值时,直接赋值为初始化的值 if(data.total < initTotal) data.total = initTotal; // 网站访问+1 data.total++; // 存储网站访问数据 if(data.total > 0) putFile('/data/storage/site_tongji.json', JSON.stringify(data, null, 4)); } // 获取网站运行时间 const runningDays = calculateRunningDays(data); // 状态栏显示统计信息 showStatusMsg(tongjiTpl.replace('{total}', data.total).replace('{runningDays}', runningDays)); // 计算网站运行时间(单位:天) function calculateRunningDays(data) { // 获取当前日期并重置时间为 00:00:00 const currentDate = new Date(); resetTime(currentDate); // 解析初始日期并重置时间为 00:00:00 const startDate = new Date(data.startDay); if (isNaN(startDate.getTime())) { return 1; } resetTime(startDate); // 计算时间差(毫秒) const timeDifference = currentDate - startDate; // 转换为天数 const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); return daysDifference + 1; } function resetTime(date) { date.setHours(0, 0, 0, 0); // 设置时间为 00:00:00.000 return date; } // 状态栏输出 function showStatusMsg(html) { const statusMsg = document.querySelector('#status .status__msg'); if(!statusMsg) return; const tongji = document.querySelector('#status .site__tongji'); if(tongji) tongji.remove(); const style = ` color: var(--b3-theme-on-surface); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 5px; font-size: 12px; `; html = `<div class="site__tongji" style="${style}">${html}</div>`; statusMsg.insertAdjacentHTML('beforebegin', html); } function isBrowser() { return !navigator.userAgent.startsWith("SiYuan") || navigator.userAgent.indexOf("iPad") > -1 || (/Android/.test(navigator.userAgent) && !/(?:Mobile)/.test(navigator.userAgent)); } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // 获取文件 async function getFile(path) { return fetch("/api/file/getFile", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ path, }), }).then((response) => { if (response.ok) { return response.text(); } else { throw new Error("Failed to get file content"); } }).catch((error) => { console.error(error); }); } // 存储文件,支持创建文件夹,当isDir true时创建文件夹,忽略文件 async function putFile(path, content = '', isDir = false) { const formData = new FormData(); formData.append("path", path); formData.append("isDir", isDir) formData.append("file", new Blob([content])); const result = await fetch(apiUrl+"/api/file/putFile", { // 写入js到本地 method: "POST", headers: { "Authorization": "token " + apiToken // 添加 Authorization 头 }, body: formData, }); const json = await result.json(); return json; } })();

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 51LA 统计可以,并支持显示简单统计面板,由于第三方统计,都免去打包的麻烦了。

  • siyuan100861186 1 1 赞同

    有一个嵌入式的程序,umami,这个直接嵌入网站就可以统计访问信息了

  • wilsons 1 1 赞同

    写了一个代码,但不知你说的侧边栏是指放哪?感觉放不下,所以放状态栏了。

    另外,手机版也不知道哪里有位置显示,所以暂不支持。

    仅供参考。

    image.png

    // 统计网站访问量和运行时间 (async ()=>{ // api地址,最后不要加 / const apiUrl = 'http://127.0.0.1:6806'; // api token 在设置->关于中查看 const apiToken = ''; // 初始化数据 const initData = { // 网站总访问量 total: 0, // 网站运行初始日期 startDay: '2025-04-13' }; // 定义统计信息显示模板 const tongjiTpl = `总访问量:{total}&nbsp;&nbsp;网站运行:{runningDays}天`; // 已统计的跳过 if(document.querySelector('#status .site__tongji')) return; // 记录初始访问量 const initTotal = initData.total || 0; // 延迟等待数据加载和同步 await sleep(1500); // 获取置顶数据,格式 {"total":0, "startDay":''} let data = await getFile('/data/storage/site_tongji.json'); data = JSON.parse(data||'{}'); if(data.code && data.code !== 0) data = {}; data = {...initData, ...data}; // 仅网站版和发布服务版才统计 if(siyuan.config.readonly && isBrowser()) { // 当不存在total字段时初始化 if(!data.total) data.total = 0; // 当总数小于初始化值时,直接赋值为初始化的值 if(data.total < initTotal) data.total = initTotal; // 网站访问+1 data.total++; // 存储网站访问数据 if(data.total > 0) putFile('/data/storage/site_tongji.json', JSON.stringify(data, null, 4)); } // 获取网站运行时间 const runningDays = calculateRunningDays(data); // 状态栏显示统计信息 showStatusMsg(tongjiTpl.replace('{total}', data.total).replace('{runningDays}', runningDays)); // 计算网站运行时间(单位:天) function calculateRunningDays(data) { // 获取当前日期并重置时间为 00:00:00 const currentDate = new Date(); resetTime(currentDate); // 解析初始日期并重置时间为 00:00:00 const startDate = new Date(data.startDay); if (isNaN(startDate.getTime())) { return 1; } resetTime(startDate); // 计算时间差(毫秒) const timeDifference = currentDate - startDate; // 转换为天数 const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); return daysDifference + 1; } function resetTime(date) { date.setHours(0, 0, 0, 0); // 设置时间为 00:00:00.000 return date; } // 状态栏输出 function showStatusMsg(html) { const statusMsg = document.querySelector('#status .status__msg'); if(!statusMsg) return; const tongji = document.querySelector('#status .site__tongji'); if(tongji) tongji.remove(); const style = ` color: var(--b3-theme-on-surface); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 5px; font-size: 12px; `; html = `<div class="site__tongji" style="${style}">${html}</div>`; statusMsg.insertAdjacentHTML('beforebegin', html); } function isBrowser() { return !navigator.userAgent.startsWith("SiYuan") || navigator.userAgent.indexOf("iPad") > -1 || (/Android/.test(navigator.userAgent) && !/(?:Mobile)/.test(navigator.userAgent)); } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // 获取文件 async function getFile(path) { return fetch("/api/file/getFile", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ path, }), }).then((response) => { if (response.ok) { return response.text(); } else { throw new Error("Failed to get file content"); } }).catch((error) => { console.error(error); }); } // 存储文件,支持创建文件夹,当isDir true时创建文件夹,忽略文件 async function putFile(path, content = '', isDir = false) { const formData = new FormData(); formData.append("path", path); formData.append("isDir", isDir) formData.append("file", new Blob([content])); const result = await fetch(apiUrl+"/api/file/putFile", { // 写入js到本地 method: "POST", headers: { "Authorization": "token " + apiToken // 添加 Authorization 头 }, body: formData, }); const json = await result.json(); return json; } })();
    1 回复
  • CongSec

    可以一直显示吗?刚开始访问的时候就可以显示出来,但是过了一分钟左右就消失了

    image.png

    1 回复
  • wilsons 1 14 评论

    可以,等下用新的 dom 显示就行,现在用的 status 公共消息区,可能 🈶 新消息覆盖了

    还有别的问题吗?一起改

    2 回复
    暂时没有发现什么问题了
    CongSec
    @CongSec 代码已更新,你再看看还有没有什么问题
    wilsons 1
    @wilsons 我发现,他在发布的时候并没有增加访问量
    CongSec
    @CongSec 你说的访问量是指什么?一般访问量指页面刷新,即每次刷新增加一次,和发布无关。 建议尽量一次性把问题描述清楚,不建议在论坛像 QQ 那样聊天方式交流。
    wilsons
    @wilsons 可我的目的是通过发布功能搭建博客的时候统计访问量,不知道能否解决
    CongSec
    @CongSec 先定义你的访问量是指什么?即什么时候数字增加?触发条件是什么?最重要的就是这个触发条件。
    wilsons
    @wilsons 就是别人通过我的发布功能访问我的博客,然后别人访问一次,对应的访问量增加 1
    CongSec
    @CongSec 我没用过 docker 版,你 docker 版有没有加代码片段?有没有验证是否 js 加载成功了?比如,加个 alert(1),看看是否能弹出等,有没有网址可以看看。你是想仅发布模式下才增加,编辑模式不增加吗?
    wilsons
    @wilsons 不一定要 docker 搭建的,你就在本地上的发布功能和 docker 的发布功能是一样的吧,如果不难的话,尽量仅在发布模式下才增加
    CongSec
    @CongSec OK 等下看
    wilsons
    @wilsons 感谢,我新创建一个服务器来提供你测试,http://8.146.199.199:6806/,密码为 123
    CongSec
    @CongSec 我发现问题了,发布服务下,所以写接口都是禁止的,即无法写入任何数据,自然计数也无法增加了。现在有两种方式:1 是能否调用你同 ip 下的 6806 接口,如果可以可以调用 6806 的接口写 2 如果 1 不行,可以把数据存储到在线,方式同我之前开发的一键访问手机伺服类似,看你选哪种方便?
    wilsons 1
    @wilsons 都行的,能方案一的话尽量方式 1
    CongSec
    @CongSec 改好了,按方案 1,代码已更新,同时那个测试网站代码也加进去了。发布服务测试:http://8.146.199.199:6808/ 用户 a 密码 1 非发布服务,仅查看,刷新不在更新访问数。
    wilsons 1
  • CongSec 3 评论

    今天起床发现,服务端访问量从 168 回归到 5,期间的过程我想是因为归零一次了,以下是服务端的日志:

    systemlog.zip

    还麻烦你增强下代码的健壮性,把归零的代码逻辑部分去掉;

    image.png

    你最近有做什么吗?先推测下可能的原因,这样才能针对的解决问题。大致方向是同步的锅,比如存储的统计数据,尚未同步成功时被执行了存储操作,还有如果客户端上开启了只读模式,如果尚未同步成功,可能会被重写数据。所以,现在做了以下几种限制:1 仅发布服务和浏览器访问才统计,2 网站加载时暂停 1.5 秒执行,等待数据同步完成 3 判断已存数据是否小于初始数据 4 数据只有大于 0 的时候才被存储
    wilsons 1
    @wilsons 我的使用场景主要如下:服务器挂载 docker 启动发布功能充当博客,另一边是我的本机电脑, 两者的数据同步方式是采用 s3 同步,我的本机电脑更改数据点击同步会自动同步到服务器的 docker 当中,刚开始的几天内可以正常使用,也就是今天起床时候出现了故障,我启动博客(服务端的发布功能)查看,发现那里的访问量是 5 个,而我的本机电脑的访问量为 168,是正常的,没过多久,我本机的访问量也变成了 5 了,因该是服务器同步下来的,具体原因尚未清楚
    CongSec
    @CongSec 这种场景其实是有问题的,首先你得保证 docker 和电脑都 30 秒同步一次,即使这样中间也会有 10 分钟左右的误差,可能造成 10 分钟内的数据被覆盖,建议用我的同步感知 js 代码,可以把这个时间缩短至 30 秒。但这都不是最佳方案,建议最佳方式在 docker 的思源空间 data 目录外添加个标志文件,比如 docker.lock,然后我在 js 里判断是否存在这个文件,只在存在这个文件时才写统计数据,只要不存在都仅只读。当然这个 docker.lock 也可以放到 data 内,然后用忽略文件忽略,不过这样较麻烦,不推荐。
    wilsons
  • CongSec

    刚才更新了代码,我就尝试了不断地刷新,发现访问量竟然变成了 2,但是当我再次想尝试通过不断刷新来进行复现的时候,发现不行,因该是有概率性会出现这种情况,此时我的本机电脑访问量并不是 2,所以因该不是同步原因造成的,对了,我的博客是上了阿里云的 DCDN(DCDN 支持 WebSocket 协议),不知道是否是这个造成的,使用 DCDN 可以将博客的访问时间由原来的 10 几秒提升到 1-2 秒,所以 DCDN 功能 不能移除

    以下是我的成功复现时的日志文件:systemlog.zip

    1 回复
    1 操作
    CongSec 在 2025-04-20 19:02:43 更新了该回帖
  • 有可能,你再过测试看看,现在不好说,你可以在本地测试,如果本地没问题,那就应该是 dcdn 的问题。

    1 回复
  • CongSec

    嗯,我现在基本确定是 DCDN 的问题了,刚才我用一个 python 脚本来并发请求我的博客,发现数据(原来的访问量)又回来了,而我的同步功能是关闭的,也就是说,排除同步的影响,以下是新增加的日志文件,不知道大佬还有办法解决不

    image.png

    1 回复
  • 这并不能确定是 dcdn 的问题,你得用 Python 请求本地的 url 地址试试,然后看看是否有问题,先排除是并发问题,还是 dcdn 问题,如果 dcdn 问题,你可以给阿里云提工单,让帮忙分析可能的原因。另外,这个日志无用,除了显示请求时间啥的,什么有用信息都没有。

    不过,按理说,并发问题,最多产生误差,不会出现这样大幅度的归零。

请输入回帖内容 ...
CongSec
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 网安笔记分享:http://congsec.xyz 北京

推荐标签 标签

  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 160 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    28 引用 • 226 回帖 • 132 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 85 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3198 引用 • 8215 回帖 • 1 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 3 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖 • 3 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 246 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    22 引用 • 214 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 643 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    289 引用 • 4492 回帖 • 655 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    952 引用 • 944 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 617 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖 • 1 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 813 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    31 引用 • 108 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 111 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    163 引用 • 310 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 390 关注
  • Excel
    31 引用 • 28 回帖 • 2 关注