前言
大家好，我是大帅，一个老程序猿。最近在独立开发几个网上产品，相信大家和我一样都知道如何使用 GA 或者其它的统计代码来监控网站的访问情况。但那些数据往往是滞后的。而我喜欢并且希望在我访问网站那一刹那，立刻知道同一时间有多少人正在访问这个网站。找了一圈，并没有找到什么好用的，免费的能实现实时在线人数统计的服务。
正好前段时间在学习 webRTC 相关的技术，我突然灵感来袭，这个需求完全可以基于 webRTC 技术来实现。
说干就干
实时演示
https://codepen.io/ezshine/pen/wvLZqVM
技术原理
启动应用：当页面加载时，应用开始初始化。
检查 PEER_ID：
如果当前 Peer 是预定义的 PEER_ID，直接创建 Peer 对象。
如果不是，尝试连接到预定义的 PEER_ID。
连接尝试：
如果连接成功，建立连接。
如果连接失败（预定义 Peer 不存在），创建一个新的 Peer 对象，使用预定义的 PEER_ID。
设置事件监听：
对于新创建的 Peer 对象，监听新的连接请求。
对于每个建立的连接，设置相应的事件处理。
更新和广播：
每当连接状态改变（新连接建立或连接关闭），更新本地的访问者计数。
广播新的计数到所有已连接的 Peers。
持续监听：
监听新的连接请求。
监听来自其他 Peers 的计数更新。
监听连接关闭事件。
处理接收到的数据：
如果收到计数更新，比较并更新本地计数（取最大值）。
如果连接关闭，移除该连接并更新计数。
循环：
持续进行上述过程，保持实时更新。
使用方法
使用
<script src='https://cdn.jsdelivr.net/gh/ezshine/oneline.js@1.0.0/oneline.js'></script>
或者 esm import
import Oneline from 'https://cdn.jsdelivr.net/gh/ezshine/oneline.js@1.0.0/oneline.js'
然后，记得使用自己创建的独一无二的连接 ID
new Oneline("using-a-z-and-0-9-to-make-a-unique-id-for-your-website").on("OnelineUpdate", (e) => {
//use e.detail.count for your code
})
结束语
以上就是有关于如何基于 webRTC 技术实现的网站实时在线人数统计，项目已开源，朋友可以点赞关注来表达对此文的喜爱和以及对作者的支持。
仓库地址：https://github.com/ezshine/oneline.js
