JavaScript 中 SSE 怎么配合 EventSource 接收实时日志-js教程-PHP中文网

使用EventSource实现SSE实时日志展示，需服务端返回text/event-stream格式、每条data: JSON日志以双换行结尾；前端监听message事件解析渲染，利用内置重连与可选id断点续传，并优化DOM更新性能。

javascript 中 sse 怎么配合 eventsource 接收实时日志

用 EventSource 接收服务端发送事件（SSE）来展示实时日志，核心是建立长连接、正确处理事件流、容错重连，并解析服务端推送的结构化日志数据。

服务端需按 SSE 格式输出日志流

SSE 要求响应头必须包含 Content-Type: text/event-stream，且每条消息以 data: 开头，用空行分隔。日志建议用 JSON 字符串，便于前端解析：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

每次推送示例：

data: {"level":"INFO","timestamp":"2024-06-15T10:22:33Z","message":"User login succeeded","service":"auth-api"}

data: {"level":"ERROR","timestamp":"2024-06-15T10:22:35Z","message":"DB timeout","service":"order-service"}

每条日志必须以 data: 开头，后跟一个空格和 JSON 字符串
末尾必须有两个换行（\n\n），否则浏览器不会触发 message 事件
避免输出 id: 或 event: 字段，除非需要自定义事件类型或断线续传

前端用 EventSource 建立连接并监听日志

创建 EventSource 实例，监听 message 事件，对每条日志做渲染或过滤：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

const es = new EventSource('/api/logs/stream');

es.onmessage = (event) => {
  try {
    const log = JSON.parse(event.data);
    renderLogEntry(log); // 自定义渲染函数，如追加到 <pre class="brush:php;toolbar:false;"> 或 <div>
  } catch (e) {
    console.warn('Invalid log JSON:', event.data);
  }
};

es.onerror = (err) => {
  console.error('EventSource failed:', err);
  // 连接异常时会自动重试（默认 3s），无需手动调用 es.close() + new
};

<ul>
<li>
<code>event.data</code> 是字符串，需 <code>JSON.parse()</code> 才能获取对象</li>
  <li>不要在 <code>onerror</code> 中主动 <code>close()</code> 并重建 —— <code>EventSource</code> 内置重连机制，频繁手动干预反而导致重复连接</li>
  <li>若需带认证，可用 <code>new EventSource(url, { withCredentials: true })</code>
</li>
</ul>
<h3>支持断线续传（可选但推荐）</h3>
<p>服务端在每次推送时带上 <code>id:</code> 字段（递增数字或时间戳），客户端断开重连时浏览器会自动在请求头带上 <code>Last-Event-ID</code>。服务端据此从断点继续推送：</p>
<font size="2">
<pre class="brush:php;toolbar:false;">
id: 12345
data: {"level":"WARN","message":"High memory usage"}

id: 12346
data: {"level":"INFO","message":"Cache refreshed"}