-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathserver-test.html
More file actions
181 lines (171 loc) · 8.21 KB
/
Copy pathserver-test.html
File metadata and controls
181 lines (171 loc) · 8.21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firebase 数据库延迟对比测试</title>
<link rel="stylesheet" href="server-test-style.css">
</head>
<body>
<div class="container">
<h1>Firebase 数据库延迟对比测试</h1>
<p class="subtitle">客户端发起 vs. 服务器端 (Cloud Functions) 发起</p>
<!-- 客户端性能测试 -->
<div class="test-section">
<h2>客户端性能测试 (直接从浏览器)</h2>
<div class="test-controls">
<div class="control-group">
<label>测试记录数 (固定为1):</label>
<input type="number" id="clientTestSize" value="1" disabled>
</div>
<button id="runClientComparisonTest" class="primary-button">
<span class="button-icon">🖥️</span> 运行客户端对比测试
</button>
</div>
<div id="clientTestProgress" class="progress-section" style="display: none;">
<div class="progress-bar"><div class="progress-fill"></div></div>
<p class="progress-text">正在执行客户端对比测试...</p>
</div>
<div id="clientComparisonResults" class="results-section" style="display: none;">
<h3>📊 客户端测试结果</h3>
<div class="results-grid two-columns">
<div class="result-card firestore" id="clientFirestoreCard">
<h4>Firestore (客户端)</h4>
<div class="metrics" id="clientFirestoreMetrics"></div>
</div>
<div class="result-card realtime" id="clientRealtimeCard">
<h4>Realtime DB (客户端)</h4>
<div class="metrics" id="clientRealtimeMetrics"></div>
</div>
</div>
<div class="comparison-analysis" id="clientOverallComparison"></div>
</div>
</div>
<!-- 服务器端测试控制 -->
<div class="test-section">
<h2>🚀 服务器端性能测试 (Cloud Functions)</h2>
<div class="test-controls">
<div class="control-group">
<label>测试数据量：</label>
<select id="serverTestSize">
<option value="5">5 条数据</option>
<option value="10" selected>10 条数据</option>
<option value="25">25 条数据</option>
<option value="50">50 条数据</option>
</select>
</div>
<div class="control-group">
<label>测试轮次：</label>
<select id="serverTestRounds">
<option value="1">1 轮</option>
<option value="3" selected>3 轮</option>
<option value="5">5 轮</option>
</select>
</div>
<div class="control-group">
<input type="checkbox" id="enableRedisTest" checked>
<label for="enableRedisTest">启用 Redis 测试 (服务器端)</label>
</div>
<button id="runServerTest" class="primary-button">
<span class="button-icon">▶</span> 运行服务器测试
</button>
</div>
<div id="serverTestProgress" class="progress-section" style="display: none;">
<div class="progress-bar"><div class="progress-fill"></div></div>
<p class="progress-text">正在执行服务器端测试...</p>
</div>
<div id="serverResults" class="results-section" style="display: none;">
<h3>📊 测试结果</h3>
<div class="results-grid three-columns">
<div class="result-card firestore">
<h4>Firestore</h4>
<div class="metrics" id="firestoreServerMetrics"></div>
</div>
<div class="result-card realtime">
<h4>Realtime Database</h4>
<div class="metrics" id="realtimeServerMetrics"></div>
</div>
<div class="result-card redis">
<h4>Redis (Memorystore)</h4>
<div class="metrics" id="redisServerMetrics"></div>
</div>
</div>
<div class="comparison-analysis" id="serverComparison"></div>
</div>
</div>
<!-- 实时性能测试 -->
<div class="test-section">
<h2>🔄 实时更新性能测试</h2>
<div class="test-controls">
<div class="control-group">
<label>测试时长（秒）：</label>
<select id="realtimeDuration">
<option value="5000">5 秒</option>
<option value="10000" selected>10 秒</option>
<option value="20000">20 秒</option>
</select>
</div>
<div class="control-group">
<label>更新间隔（毫秒）：</label>
<select id="updateInterval">
<option value="500">500ms</option>
<option value="1000" selected>1000ms</option>
<option value="2000">2000ms</option>
</select>
</div>
<button id="runRealtimeTest" class="primary-button">
<span class="button-icon">🔄</span> 运行实时测试
</button>
</div>
<!-- 实时测试结果 -->
<div id="realtimeResults" class="results-section" style="display: none;">
<h3>🔄 实时更新测试结果</h3>
<div class="realtime-metrics three-columns">
<div class="metric-box">
<h4>Firestore</h4>
<div class="metric-value" id="firestoreRealtimeMetric">-</div>
<div class="metric-label">平均延迟</div>
</div>
<div class="metric-box">
<h4>Realtime Database</h4>
<div class="metric-value" id="realtimeDbMetric">-</div>
<div class="metric-label">平均延迟</div>
</div>
<div class="metric-box">
<h4>Redis</h4>
<div class="metric-value" id="redisRealtimeMetric">-</div>
<div class="metric-label">平均延迟</div>
</div>
</div>
</div>
</div>
<!-- 客户端 vs 服务器端对比 -->
<div class="test-section">
<h2>🆚 客户端 vs 服务器端延迟对比</h2>
<button id="runBothTests" class="primary-button">
<span class="button-icon">📊</span> 运行完整对比测试
</button>
<div id="fullComparison" class="comparison-section" style="display: none;">
<div class="comparison-grid">
<div class="comparison-item">
<h4>客户端测试</h4>
<div id="clientTestResults"></div>
</div>
<div class="comparison-item">
<h4>服务器端测试</h4>
<div id="serverTestResults"></div>
</div>
</div>
<div class="insights" id="testInsights"></div>
</div>
</div>
<!-- 日志输出 -->
<div class="log-section">
<h3>📝 测试日志</h3>
<div id="testLog" class="log-container"></div>
</div>
</div>
<!-- Firebase SDK -->
<script type="module" src="server-test-app.js"></script>
</body>
</html>