SSE 模仿 GPT 响应

后端代码

js 复制代码

const express = require('express')
const cors = require('cors');

const app = express();
app.use(cors());
const port = 3000;

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

const msg = `
全国同胞们，
尊敬的各位国家元首、政府首脑和国际组织代表，
尊敬的各位来宾，
全体受阅将士们，
同志们、朋友们：
今天，我们隆重集会，纪念中国人民抗日战争暨世界反法西斯战争胜利80周年，共同铭记历史、缅怀先烈、珍爱和平、开创未来。
我代表中共中央、全国人大、国务院、全国政协、中央军委，向全国参加过抗日战争的老战士、老同志、爱国人士和抗日将领，向为中国人民抗日战争胜利作出重大贡献的海内外中华儿女，致以崇高敬意！向支援和帮助过中国人民抵抗侵略的外国政府和国际友人，表示衷心感谢！向参加今天大会的各国来宾，表示热烈欢迎！
同志们、朋友们！
中国人民抗日战争是艰苦卓绝的伟大战争。在中国共产党倡导建立的抗日民族统一战线旗帜下，中国人民以铮铮铁骨战强敌、以血肉之躯筑长城，取得近代以来反抗外敌入侵的第一次完全胜利。
中国人民抗日战争是世界反法西斯战争的重要组成部分，中国人民以巨大的民族牺牲，为拯救人类文明、保卫世界和平作出了重大贡献。
历史警示我们，人类命运休戚与共，各个国家、各个民族只有平等相待、和睦相处、守望相助，才能维护共同安全，消弭战争根源，不让历史悲剧重演！
同志们、朋友们！
中华民族是不畏强暴、自立自强的伟大民族。当年，面对正义与邪恶、光明与黑暗、进步与反动的生死较量，中国人民同仇敌忾、奋起反抗，为国家生存而战，为民族复兴而战，为人类正义而战。今天，人类又面临和平还是战争、对话还是对抗、共赢还是零和的抉择。中国人民坚定站在历史正确一边、站在人类文明进步一边，坚持走和平发展道路，与各国人民携手构建人类命运共同体。
中国人民解放军始终是党和人民完全可以信赖的英雄部队。全军将士要忠实履行神圣职责，加快建设世界一流军队，坚决维护国家主权、统一、领土完整，为实现中华民族伟大复兴提供战略支撑，为世界和平与发展作出更大贡献！
历史承载过去，也启迪未来。新时代新征程，全国各族人民要在中国共产党坚强领导下，坚持马克思列宁主义、毛泽东思想、邓小平理论、"三个代表"重要思想、科学发展观，全面贯彻新时代中国特色社会主义思想，坚定不移走中国特色社会主义道路，传承和弘扬伟大抗战精神，踔厉奋发、勇毅前行，为以中国式现代化全面推进强国建设、民族复兴伟业而团结奋斗！
中华民族伟大复兴势不可挡！人类和平与发展的崇高事业必将胜利！
`;

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();

  let counter = 0;
  const interval = setInterval(() => {
    counter++;
    res.write(`data: ${msg[counter]}\n\n`);
    console.log('Sent event:', msg[counter], msg.length, counter);
    if(counter === msg.length) {
      clearInterval(interval);
      res.end();
    }
  }, 100);

  req.on('close', () => {
    clearInterval(interval);
    console.log('SSE connection closed');
  });
});

前端代码

js 复制代码

  const [str, setStr] = useState('')
  const sseRef = useRef<EventSource | null>(null)

  const startSSE = () => {
    const evtSource = new EventSource("http://localhost:3000/events")
    sseRef.current = evtSource
    evtSource.onopen = () => console.log("SSE 已连接")
    evtSource.onmessage = e => console.log("收到:", e.data)
    evtSource.onerror = err => {
      evtSource.close();
      console.log('error', err)
    };
  }

  useEffect(() => {
    return () => {
       console.log('close sse')
       evtSource.close()
    }
  }, [])

  return (
		<>
			<Button onClick={startSSE}>开始SSE</Button>
			<Button onClick={() => { sseRef.current?.close() }} >停止 SSE</Button>
			{str}
		</>
	)