import express from "express";
import fs from "fs";
import path from "path";

const app = express();
const PORT = Number(process.env.PORT || 8787);

// SSE 路由：客户端通过 /sse 订阅增量 Markdown
app.get("/sse", (req, res) => {
  // 1) 基础响应头：保持连接与禁止缓存
  res.setHeader("Content-Type", "text/event-stream; charset=utf-8");
  res.setHeader("Cache-Control", "no-cache, no-transform");
  res.setHeader("Connection", "keep-alive");
  // 若需要跨域：res.setHeader('Access-Control-Allow-Origin', '*');

  // 2) 立即发送一个注释提高兼容性（某些代理需首字节刷新）
  res.write(": ok\n\n");

  // 3) 心跳：每 15s 发送一次注释，防止中间设备断开
  const heartBeat = setInterval(() => {
    res.write(": heartbeat\n\n");
  }, 15000);

  // 4) 将 Markdown 文件按行/块读取并逐块发送
  const mdPath = path.join(__dirname, "content.md");
  const stream = fs.createReadStream(mdPath, { encoding: "utf-8" });

  stream.on("data", (chunk) => {
    // 规范事件格式：event + data + 空行
    // 这里使用事件名 "message"；你也可以使用自定义事件
    res.write(`event: message\n`);
    // 为避免多行破碎，可将 chunk 按行安全封装到 data
    const safe = chunk.replace(/\r?\n/g, "\\n");
    res.write(`data: ${safe}\n\n`);
  });

  stream.on("end", () => {
    // 发送结束信号（可选）：客户端据此停止拼接
    res.write(`event: end\n`);
    res.write(`data: [DONE]\n\n`);
    // 延迟关闭以确保客户端收到尾包
    setTimeout(() => res.end(), 500);
    clearInterval(heartBeat);
  });

  stream.on("error", (err) => {
    res.write(`event: error\n`);
    res.write(`data: ${JSON.stringify({ message: err.message })}\n\n`);
    clearInterval(heartBeat);
    res.end();
  });

  // 5) 连接关闭处理（客户端主动关闭或网络中断）
  req.on("close", () => {
    clearInterval(heartBeat);
    stream.destroy();
  });
});

app.listen(PORT, () => {
  console.log(`SSE server at http://localhost:${PORT}/sse`);
});

import { useEffect, useRef, useState } from "react";
import Streamdown from "streamdown";

export default function App() {
  const [md, setMd] = useState<string>("");
  const esRef = useRef<EventSource | null>(null);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    // 连接到后端接口地址，类似 http 接口
    const es = new EventSource("http://localhost:8787/sse");
    esRef.current = es;

    es.onopen = () => setConnected(true);
    es.onerror = (e) => {
      console.warn("SSE error", e);
      setConnected(false);
      // 由浏览器自动重试；也可在此关闭并手动重连
    };
    es.addEventListener("message", (ev) => {
      try {
        // 这里服务端直接推送原始文本；如果是 JSON，需解析后取字段
        const text = String(ev.data);
        // 增量拼接：避免频繁渲染，可批量缓冲
        setMd((prev) => prev + text);
      } catch (err) {
        console.error(err);
      }
    });
    es.addEventListener("end", () => {
      // 收到结束事件，可做滚动、动画或解锁 UI
      console.info("stream end");
      es.close();
      setConnected(false);
    });

    return () => {
      es.close();
      setConnected(false);
    };
  }, []);

  return (
    <div style={{ padding: 16 }}>
      <h3>SSE + Streamdown Markdown Streaming</h3>
      <p>连接状态：{connected ? "已连接" : "未连接"}</p>
      <Streamdown
        // 核心：容忍未完成 Markdown，边到边渲染
        parseIncompleteMarkdown
        shikiTheme="github-dark"
        // 安全前缀：限制链接与图片前缀，避免 XSS
        components={{
          a: {
            allowedPrefix: ["https://", "http://"],
          },
          img: {
            allowedPrefix: ["https://", "http://"],
          },
        }}
      >
        {md}
      </Streamdown>
    </div>
  );
}

import { useEffect, useRef, useState } from "react";

export function useSSE(url: string, onMessage: (data: string) => void) {
  const [connected, setConnected] = useState(false);
  const esRef = useRef<EventSource | null>(null);
  const retryRef = useRef<number>(2000); // 初始重试间隔

  useEffect(() => {
    function connect() {
      const es = new EventSource(url);
      esRef.current = es;
      es.onopen = () => {
        setConnected(true);
        retryRef.current = 2000; // 连接成功，重置重试间隔
      };
      es.onerror = () => {
        setConnected(false);
        es.close();
        // 指数退避重试，最多 20s
        retryRef.current = Math.min(retryRef.current * 2, 20000);
        setTimeout(connect, retryRef.current);
      };
      es.addEventListener("message", (ev) => onMessage(String(ev.data)));
    }
    connect();
    return () => esRef.current?.close();
  }, [url, onMessage]);

  return { connected };
}