1. 背景与痛点
在开发分布式系统时，日志分散在多个服务节点中，传统轮询查询方式存在延迟高、资源浪费的问题。某次线上故障中，因未能实时发现错误日志，导致问题排查时间延长2小时。因此，决定自研一套低成本、实时性高的日志监控系统。
2. 技术选型
- 数据存储：Elasticsearch（高效检索与聚合）
- 实时推送：WebSocket（全双工通信，避免HTTP轮询）
- 后端服务：Node.js + Express（轻量级，适合快速开发）
- 前端展示：Vue.js + ECharts（可视化日志趋势）
3. 核心实现步骤（附代码片段与关键配置）
3.1 Elasticsearch索引设计
json
// 日志索引模板（按时间分片） PUT /log-template { "index_patterns": ["logs-*"], "settings": { "number_of_shards": 3 }, "mappings": { "properties": { "timestamp": { "type": "date" }, "level": { "type": "keyword" }, "message": { "type": "text", "analyzer": "ik_max_word" } } } }3.2 WebSocket服务端实现
javascript
// Node.js WebSocket服务器 const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { console.log('New client connected'); // 订阅Elasticsearch日志变更（通过_changes API或轮询模拟） setInterval(() => { // 模拟获取新日志（实际可通过ES的search_after或滚动查询） const newLogs = fetchNewLogsFromES(); ws.send(JSON.stringify(newLogs)); }, 1000); });3.3 前端实时渲染优化
javascript
// Vue.js WebSocket客户端 const socket = new WebSocket('ws://localhost:8080'); socket.onmessage = (event) => { const logs = JSON.parse(event.data); // 使用虚拟滚动列表优化性能（避免DOM爆炸） this.logs.unshift(...logs); // 追加到列表顶部 if (this.logs.length > 1000) this.logs.pop(); // 限制数量 };4. 性能优化与坑点
- ES查询优化：使用
search_after替代from/size，避免深度分页性能问题。 - WebSocket断连重试：前端实现指数退避重连机制。
- 数据压缩：对大文本日志启用Gzip压缩，减少带宽占用。
5. 最终效果
- 实时性：日志从产生到展示延迟 < 1秒
- 吞吐量：单WebSocket连接支持500条/秒日志推送
- 成本：3节点ES集群（4C16G）可支撑日志量100GB/天
6. 扩展思考
- 如何结合Prometheus实现告警阈值动态配置？
- 针对海量日志场景，是否需要引入Kafka作为消息队列？
