时间粒度：
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ 时区：
+
@@ -256,17 +281,44 @@
📊 LeetCode Two-Sum 在线人数监控
// 配置
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:8787'
- : 'https://two-sum.two-sum.workers.dev';
+ : 'https://api.twosum.icu';
let chart;
let currentGranularity = 'hour';
let autoRefreshInterval;
+ // 精选时区列表（按 UTC 排序）
+ const TIMEZONES = [
+ { label: '美国-洛杉矶', value: -480 },
+ { label: '美国-纽约', value: -300 },
+ { label: '英国', value: 0 },
+ { label: '法国', value: 60 },
+ { label: '俄罗斯-莫斯科', value: 180 },
+ { label: '中国', value: 480 },
+ { label: '日本', value: 540 },
+ { label: '韩国', value: 540 },
+ { label: '新西兰', value: 720 },
+ ];
+
+ // 从 localStorage 读取时区，默认 UTC+8（480 分钟）
+ let currentTzOffset = parseInt(localStorage.getItem('tzOffset') ?? '480');
+ const VALID_OFFSETS = TIMEZONES.map(t => t.value);
+ if (!VALID_OFFSETS.includes(currentTzOffset)) currentTzOffset = 480;
+
// 初始化
document.addEventListener('DOMContentLoaded', () => {
chart = echarts.init(document.getElementById('chart'));
window.addEventListener('resize', () => chart.resize());
+ // 初始化时区下拉框
+ const tzSelect = document.getElementById('tz-select');
+ tzSelect.innerHTML = TIMEZONES.map(tz => {
+ const offsetHours = tz.value / 60;
+ const offsetStr = offsetHours === 0 ? 'UTC+0' :
+ offsetHours > 0 ? `UTC+${offsetHours}` : `UTC${offsetHours}`;
+ return ``;
+ }).join('');
+
// 首次加载
fetchData();
fetchLatest();
@@ -282,8 +334,8 @@ 📊 LeetCode Two-Sum 在线人数监控
function setGranularity(granularity) {
currentGranularity = granularity;
- // 更新按钮状态
- document.querySelectorAll('.control-group button').forEach(btn => {
+ // 只更新粒度按钮组的状态
+ document.querySelectorAll('#granularity-btn-group button').forEach(btn => {
btn.classList.remove('active');
});
document.getElementById(`btn-${granularity}`).classList.add('active');
@@ -291,6 +343,57 @@ 📊 LeetCode Two-Sum 在线人数监控
fetchData();
}
+ // 切换时区
+ function setTimezone(offset) {
+ currentTzOffset = parseInt(offset);
+ localStorage.setItem('tzOffset', String(currentTzOffset));
+ fetchData();
+ fetchLatest();
+ }
+
+ // 将 UTC 时间字符串偏移指定分钟数后返回同格式字符串
+ function shiftUTCTime(utcStr, offsetMinutes) {
+ if (!utcStr) return utcStr;
+ const isYearMonth = /^\d{4}-\d{2}$/.test(utcStr);
+ const isDate = /^\d{4}-\d{2}-\d{2}$/.test(utcStr);
+
+ let ms;
+ if (isYearMonth) {
+ ms = Date.UTC(
+ parseInt(utcStr.slice(0, 4)),
+ parseInt(utcStr.slice(5, 7)) - 1,
+ 1, 0, 0, 0
+ );
+ } else if (isDate) {
+ ms = Date.UTC(
+ parseInt(utcStr.slice(0, 4)),
+ parseInt(utcStr.slice(5, 7)) - 1,
+ parseInt(utcStr.slice(8, 10)),
+ 0, 0, 0
+ );
+ } else {
+ ms = Date.UTC(
+ parseInt(utcStr.slice(0, 4)),
+ parseInt(utcStr.slice(5, 7)) - 1,
+ parseInt(utcStr.slice(8, 10)),
+ parseInt(utcStr.slice(11, 13)),
+ parseInt(utcStr.slice(14, 16)),
+ 0
+ );
+ }
+
+ const shifted = new Date(ms + offsetMinutes * 60000);
+ const Y = shifted.getUTCFullYear();
+ const M = String(shifted.getUTCMonth() + 1).padStart(2, '0');
+ const D = String(shifted.getUTCDate()).padStart(2, '0');
+ const h = String(shifted.getUTCHours()).padStart(2, '0');
+ const m = String(shifted.getUTCMinutes()).padStart(2, '0');
+
+ if (isYearMonth) return `${Y}-${M}`;
+ if (isDate) return `${Y}-${M}-${D}`;
+ return `${Y}-${M}-${D} ${h}:${m}`;
+ }
+
// 获取最新数据
async function fetchLatest() {
try {
@@ -355,6 +458,7 @@ 📊 LeetCode Two-Sum 在线人数监控
limit = 24; // 24 个月
break;
}
+ limit = limit * 2; // 因为每个时间点有 US 和 CN 两条数据，所以乘以 2
const res = await fetch(`${API_URL}/api/aggregated?granularity=${currentGranularity}&limit=${limit}`);
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
@@ -385,39 +489,48 @@ 📊 LeetCode Two-Sum 在线人数监控
// 渲染图表
function renderChart(data) {
- // 数据分组
- const usData = data.filter(d => d.region === 'US');
- const cnData = data.filter(d => d.region === 'CN');
-
- // 提取时间轴，使用中国时区格式化
- const baseData = usData.length >= cnData.length ? usData : cnData;
- const times = baseData.map(d => {
- // 将 time 字符串转换为中国时区显示
- // API 返回的 time 是 UTC 时间，需要转换为 UTC+8
- return d.time; // API 已经返回格式化的字符串，直接使用
+ // 1. 数据分组
+ const usDataMap = new Map();
+ const cnDataMap = new Map();
+ const allTimesSet = new Set();
+
+ // 2. 将数据存入 Map，方便根据时间快速查找，同时收集所有时间点
+ data.forEach(d => {
+ const shiftedTime = shiftUTCTime(d.time, currentTzOffset);
+ allTimesSet.add(shiftedTime);
+ if (d.region === 'US') {
+ usDataMap.set(shiftedTime, d);
+ } else if (d.region === 'CN') {
+ cnDataMap.set(shiftedTime, d);
+ }
});
- // 获取粒度标题
- let granularityTitle;
- switch (currentGranularity) {
- case 'fivemin':
- granularityTitle = '按 5 分钟';
- break;
- case 'halfhour':
- granularityTitle = '按半小时';
- break;
- case 'hour':
- granularityTitle = '按小时';
- break;
- case 'day':
- granularityTitle = '按天';
- break;
- case 'month':
- granularityTitle = '按月';
- break;
- }
+ // 3. 时间轴排序（确保图表从左到右时间递增）
+ const sortedTimes = Array.from(allTimesSet).sort();
- // 配置图表
+ // 4. 根据排序后的统一时间轴，重新构造两个区域的数据序列
+ // 如果某个时间点缺失数据，填充 null，防止下标错位
+ const finalUsSeries = sortedTimes.map(t => {
+ const item = usDataMap.get(t);
+ return item ? Math.round(item.avg_count) : null;
+ });
+
+ const finalCnSeries = sortedTimes.map(t => {
+ const item = cnDataMap.get(t);
+ return item ? Math.round(item.avg_count) : null;
+ });
+
+ // 5. 获取粒度标题
+ const granularityMap = {
+ 'fivemin': '按 5 分钟',
+ 'halfhour': '按半小时',
+ 'hour': '按小时',
+ 'day': '按天',
+ 'month': '按月'
+ };
+ const granularityTitle = granularityMap[currentGranularity] || '';
+
+ // 6. 配置图表
const option = {
title: {
text: `LeetCode Two-Sum 在线人数趋势（${granularityTitle}）`,
@@ -430,13 +543,15 @@ 📊 LeetCode Two-Sum 在线人数监控
formatter: function(params) {
let html = `${params[0].axisValue}
`;
params.forEach(item => {
- const dataItem = item.seriesName.includes('US') ?
- usData.find(d => d.time === item.axisValue) :
- cnData.find(d => d.time === item.axisValue);
-
- if (dataItem) {
- html += `${item.marker} ${item.seriesName}: ${Math.round(item.value)} 人
`;
- html += ` └ 范围: ${dataItem.min_count} - ${dataItem.max_count}
`;
+ // 从 Map 中获取原始数据点，以展示 min/max 详情
+ const sourceMap = item.seriesName.includes('US') ? usDataMap : cnDataMap;
+ const d = sourceMap.get(item.axisValue);
+
+ if (d && item.value !== null) {
+ html += `${item.marker} ${item.seriesName}: ${item.value} 人
`;
+ html += ` └ 范围: ${d.min_count} - ${d.max_count}
`;
+ } else {
+ html += `${item.marker} ${item.seriesName}: 无数据
`;
}
});
return html;
@@ -469,10 +584,10 @@ 📊 LeetCode Two-Sum 在线人数监控
xAxis: {
type: 'category',
boundaryGap: false,
- data: times,
+ data: sortedTimes, // 使用排序后的统一时间轴
axisLabel: {
rotate: 45,
- interval: Math.floor(times.length / 10) || 0
+ interval: Math.floor(sortedTimes.length / 10) || 0
}
},
yAxis: [
@@ -512,9 +627,10 @@ 📊 LeetCode Two-Sum 在线人数监控
name: '国际区 (US)',
type: 'line',
yAxisIndex: 0,
- data: usData.map(d => Math.round(d.avg_count)),
+ data: finalUsSeries, // 使用对齐后的数据
showSymbol: false,
smooth: true,
+ connectNulls: true, // 重要：如果中间缺数，是否把线连起来（建议设为 true）
lineStyle: {
width: 2,
color: '#5470C6'
@@ -530,9 +646,10 @@ 📊 LeetCode Two-Sum 在线人数监控
name: '中国区 (CN)',
type: 'line',
yAxisIndex: 1,
- data: cnData.map(d => Math.round(d.avg_count)),
+ data: finalCnSeries, // 使用对齐后的数据
showSymbol: false,
smooth: true,
+ connectNulls: true,
lineStyle: {
width: 2,
color: '#91CC75'
@@ -550,18 +667,14 @@ 📊 LeetCode Two-Sum 在线人数监控
chart.setOption(option, true);
}
- // 格式化时间（中国时区 UTC+8）
+ // 格式化时间（根据当前时区偏移）
function formatTime(timestamp) {
- // 创建中国时区的日期对象
- const date = new Date(timestamp);
-
- // 转换为中国时区（UTC+8）
- const chinaTime = new Date(date.getTime() + (8 * 60 * 60 * 1000) - (date.getTimezoneOffset() * 60 * 1000));
-
- const month = String(chinaTime.getUTCMonth() + 1).padStart(2, '0');
- const day = String(chinaTime.getUTCDate()).padStart(2, '0');
- const hours = String(chinaTime.getUTCHours()).padStart(2, '0');
- const minutes = String(chinaTime.getUTCMinutes()).padStart(2, '0');
+ // timestamp 是 Unix 毫秒，加上时区偏移后用 UTC 方法读取
+ const d = new Date(timestamp + currentTzOffset * 60000);
+ const month = String(d.getUTCMonth() + 1).padStart(2, '0');
+ const day = String(d.getUTCDate()).padStart(2, '0');
+ const hours = String(d.getUTCHours()).padStart(2, '0');
+ const minutes = String(d.getUTCMinutes()).padStart(2, '0');
return `${month}-${day} ${hours}:${minutes}`;
}
diff --git a/src/collector.js b/src/collector.js
new file mode 100644
index 0000000..7e65bc6
--- /dev/null
+++ b/src/collector.js
@@ -0,0 +1,210 @@
+/**
+ * 数据采集工具
+ */
+
+
+// 配置（Node.js环境 不兼容 Workers 环境）
+function getEnv(key, defaultValue) {
+ if (typeof process !== "undefined" && process.env) {
+ return process.env[key] || defaultValue;
+ }
+ return defaultValue;
+}
+
+const CONFIG = {
+ // Cloudflare Worker API 地址（本地开发默认 localhost:8787）
+ PROXY_URL: getEnv("PROXY_URL", "http://localhost:8080"), // 可选的 HTTP 代理 URL
+ PROXY_API_KEY: getEnv("PROXY_API_KEY", "proxy_secret-key-2024"), // 代理 API 密钥
+
+ // WebSocket 地址
+ WS_URLS: {
+ US: "wss://collaboration-ws.leetcode.com/problems/two-sum",
+ CN: "wss://collaboration-ws.leetcode.cn/problems/two-sum",
+ },
+
+ // 请求头配置（绕过反爬虫）
+ WS_HEADERS: {
+ US: {
+ "Accept-Encoding": "gzip, deflate, br, zstd",
+ "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",
+ "Cache-Control": "no-cache",
+ Host: "collaboration-ws.leetcode.com",
+ Pragma: "no-cache",
+ Origin: "https://leetcom.com",
+ "User-Agent":
+ "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.0.0",
+ },
+ CN: {
+ "User-Agent":
+ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36",
+ Origin: "https://leetcode.cn",
+ "Accept-Language": "zh-CN,zh;q=0.9",
+ "Cache-Control": "no-cache",
+ Pragma: "no-cache",
+ Host: "collaboration-ws.leetcode.cn",
+ },
+ },
+
+ // 超时时间（毫秒）
+ TIMEOUT: 30000,
+};
+
+/**
+ * 解析 WebSocket 消息获取在线人数
+ */
+function parseOnlineCount(message) {
+ const count = parseInt(message, 10);
+ return !isNaN(count) && count >= 0 ? count : null;
+}
+
+/**
+ * 从原生 WebSocket 获取在线人数
+ */
+function getOnlineCountFromNative(region, timeout = 5000) {
+ return new Promise((resolve) => {
+ const url = CONFIG.WS_URLS[region];
+ const headers = CONFIG.WS_HEADERS[region] || {};
+
+ console.log(`[${region}] 连接中...`);
+
+ const ws = new WebSocket(url);
+ const timer = setTimeout(() => {
+ ws.close();
+ console.log("连接超时");
+ resolve(null);
+ }, timeout);
+
+ ws.onopen = () => {
+ console.log(`[${region}] WebSocket 连接成功`);
+ // 连接成功后等待第一条消息
+ };
+
+ ws.onmessage = (event) => {
+ clearTimeout(timer);
+ try {
+ // LeetCode WebSocket 通常直接返回数字字符串表示人数
+ const count = parseInt(event.data.toString());
+ ws.close();
+ console.log(`[${region}] 采集成功: ${count}`);
+ resolve(count);
+ } catch (e) {
+ ws.close();
+ console.error(`[${region}] 解析数据失败: ${e.message}`);
+ resolve(null);
+ }
+ };
+
+ ws.onerror = (error) => {
+ clearTimeout(timer);
+ console.error(`[${region}] WebSocket 连接失败: ${error}`);
+ resolve(null);
+ };
+
+ ws.onclose = () => {
+ console.log(`[${region}] WebSocket 连接关闭`);
+ };
+ });
+}
+
+
+/**
+ * 获取在线人数（支持传入 Workers env）
+ * @param {string} region - 地区代码 (US/CN)
+ * @param {object} envConfig - Workers 环境变量（可选）
+ * @returns {Promise}
+ */
+function getOnlineCount(region, env) {
+ if (region === "CN") {
+ return getOnlineCountFromNative(region);
+ } else {
+ return getOnlineCountFromProxy(region, env);
+ }
+}
+
+/**
+ * 从代理 WebSocket 获取在线人数
+ * @param {string} region - 地区代码
+ * @param {object} env - Workers 环境变量（可选）
+ */
+async function getOnlineCountFromProxy(region, env = null) {
+ const url = CONFIG.WS_URLS[region];
+ const headers = CONFIG.WS_HEADERS[region] || {};
+
+ console.log(`[${region}] 通过代理连接中...`);
+
+ try {
+ const result = await sendWSProxyRequest(url, headers, {
+ maxMessages: 1,
+ timeout: Math.floor(CONFIG.TIMEOUT / 1000),
+ }, env);
+
+ if (
+ result &&
+ result.success &&
+ result.messages &&
+ result.messages.length > 0
+ ) {
+ const message = result.messages[0].data;
+ const count = parseOnlineCount(message);
+ if (count !== null) {
+ console.log(`[${region}] 在线人数: ${count}`);
+ return count;
+ }
+ }
+
+ console.warn(`[${region}] 无法从代理响应解析人数`);
+ return null;
+ } catch (error) {
+ console.error(`[${region}] 代理请求失败:`, error.message);
+ return null;
+ }
+}
+
+/**
+ * 通过代理发送 HTTP 请求
+ * @param {string} targetUrl - 目标 URL
+ * @param {object} targetHeaders - 目标请求头
+ * @param {object} options - 其他选项
+ * @param {object} envConfig - Workers 环境变量（可选）
+ * @returns {Promise