javascript中使用sse实现实时日志输出需服务端返回text/event-stream流并按协议格式发送data:日志、id:标识、event:类型，前端用eventsource监听message或自定义事件解析data并追加到dom，配合css white-space: pre-wrap显示换行，同时处理自动重连、换行转义及高频日志节流。
JavaScript 中使用 SSE（Server-Sent Events）实现实时日志输出，核心是建立单向长连接，让服务端持续推送日志片段，前端逐条接收并打印。关键在于服务端按规范发送事件流（text/event-stream），前端用 EventSource 监听并处理数据，同时做好连接管理与错误恢复。
服务端需按 SSE 协议返回日志流
服务端响应头必须包含 Content-Type: text/event-stream 和 Cache-Control: no-cache，每条日志以 data: 开头，结尾用双换行符分隔。可选加 id: 用于断线重连，加 event: 区分日志类型（如 log、error）。
示例响应片段：
id: 123<br> event: log<br> data: [INFO] 启动完成<br><br> id: 124<br> data: [DEBUG] 请求 /api/users 返回 200<br><br>
前端用 EventSource 接收并逐条打印
创建 EventSource 实例，监听 message 或自定义事件名（如 log），在回调中解析 event.data 并追加到 DOM（如 <pre class="brush:php;toolbar:false;" id="log"></pre>）或控制台。
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 用
textContent += data + '\n'追加日志，避免频繁重排版；开启white-space: pre-wrapCSS 保持换行和空格 - 监听
error事件：连接失败时自动重试（浏览器默认重连，但可监听后手动干预） - 监听
open事件确认连接建立成功 - 调用
eventSource.close()可主动断开（如页面卸载前）
处理断线、重复与性能问题
SSE 天然支持断线自动重连，但需注意实际行为：
- 服务端应记录最后发送的
id，客户端重连时带Last-Event-ID请求头，服务端据此补推丢失日志 - 避免日志内容含换行符未转义——SSE 中
data:行内换行会被视为新字段，应将换行转为\n字符串再发送 - 高频日志（如每秒多条）建议批量合并发送，或前端节流显示（如每 100ms 合并渲染一次），防止 DOM 频繁更新卡顿
替代方案与注意事项
若需双向通信或更可靠传输（如日志不丢），SSE 不适用，应改用 WebSocket；若服务端不支持流式响应（如某些静态托管或无状态函数），SSE 不可行，需退回到轮询（fetch + setTimeout）。
兼容性方面，现代浏览器均支持 EventSource，IE 全系不支持，需用 polyfill 或降级方案。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
