模仿雷同 DeepSeek 的对话

以下是一个完备的 JavaScript 数据流式获取实现方案，模仿雷同 DeepSeek 的对话式逐段返回效果。包罗前端实现、后端模仿和详细解释：

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>流式对话演示</title>
6.     <style>
7.         #output {
8.             border: 1px solid #ccc;
9.             padding: 20px;
10.             margin: 20px;
11.             min-height: 200px;
12.             font-family: monospace;
13.             white-space: pre-wrap;
14.         }
15.         .loading {
16.             display: none;
17.             color: #666;
18.         }
19.     </style>
20. </head>
21. <body>
22.     <button onclick="startStream()">开始对话</button>
23.     <div id="output"></div>
24.     <div id="loading" class="loading">思考中...</div>
26.     <script>
27.         // 流式对话核心逻辑
28.         class StreamDialog {
29.             constructor() {
30.                 this.output = document.getElementById('output');
31.                 this.loading = document.getElementById('loading');
32.                 this.controller = null;  // 用于中止请求
33.             }
35.             // 开始流式对话
36.             async start() {
37.                 try {
38.                     this.showLoading();
39.                     this.output.textContent = '';
40.                     
41.                     // 创建中止控制器
42.                     this.controller = new AbortController();
43.                     
44.                     // 发起 fetch 请求
45.                     const response = await fetch('/stream', {
46.                         signal: this.controller.signal,
47.                         headers: {
48.                             'Content-Type': 'application/json'
49.                         }
50.                     });
52.                     if (!response.ok) throw new Error(response.statusText);
53.                     if (!response.body) throw new Error("ReadableStream not supported");
55.                     // 创建读取器
56.                     const reader = response.body.getReader();
57.                     const decoder = new TextDecoder();
58.                     
59.                     // 持续读取流数据
60.                     while (true) {
61.                         const { done, value } = await reader.read();
62.                         if (done) break;
63.                         
64.                         // 解析数据块
65.                         const chunk = decoder.decode(value);
66.                         const lines = chunk.split('\n').filter(line => line.trim());
67.                         
68.                         for (const line of lines) {
69.                             try {
70.                                 const event = JSON.parse(line.replace('data: ', ''));
71.                                 this.appendContent(event.content);
72.                             } catch (e) {
73.                                 console.error('解析错误:', e);
74.                             }
75.                         }
76.                     }
77.                 } catch (error) {
78.                     if (error.name !== 'AbortError') {
79.                         this.appendContent('\n[对话异常终止]');
80.                     }
81.                 } finally {
82.                     this.hideLoading();
83.                     this.controller = null;
84.                 }
85.             }
87.             // 中止对话
88.             abort() {
89.                 if (this.controller) {
90.                     this.controller.abort();
91.                 }
92.             }
94.             // 添加内容到输出区
95.             appendContent(text) {
96.                 // 模拟打字机效果
97.                 let currentIndex = 0;
98.                 const animate = () => {
99.                     if (currentIndex < text.length) {
100.                         this.output.textContent += text[currentIndex];
101.                         currentIndex++;
102.                         requestAnimationFrame(animate);
103.                         this.output.scrollTop = this.output.scrollHeight; // 自动滚动
104.                     }
105.                 };
106.                 animate();
107.             }
109.             showLoading() {
110.                 this.loading.style.display = 'block';
111.             }
113.             hideLoading() {
114.                 this.loading.style.display = 'none';
115.             }
116.         }
118.         // 初始化对话实例
119.         const dialog = new StreamDialog();
121.         // 启动对话
122.         function startStream() {
123.             dialog.start();
124.         }
126.         // 中止对话
127.         function stopStream() {
128.             dialog.abort();
129.         }
130.     </script>
131. </body>
132. </html>

复制代码

后端 Node.js 实现（Express）：

1. const express = require('express');
2. const app = express();
3. const port = 3000;
5. // 允许跨域
6. app.use((req, res, next) => {
7.     res.header('Access-Control-Allow-Origin', '*');
8.     next();
9. });
11. // 流式端点
12. app.get('/stream', (req, res) => {
13.     // 设置流式响应头
14.     res.writeHead(200, {
15.         'Content-Type': 'text/event-stream',
16.         'Cache-Control': 'no-cache',
17.         'Connection': 'keep-alive'
18.     });
20.     // 模拟的对话数据
21.     const responseText = [
22.         "你好！我是 DeepSeek 的智能助手。",
23.         "我正在分析您的问题...",
24.         "根据现有数据，建议如下：\n",
25.         "1. 首先检查网络连接\n",
26.         "2. 验证 API 密钥有效性\n",
27.         "3. 查看服务状态面板\n",
28.         "\n需要更详细的帮助吗？"
29.     ];
31.     // 发送流式数据
32.     let index = 0;
33.     const sendChunk = () => {
34.         if (index < responseText.length) {
35.             const chunk = {
36.                 content: responseText[index],
37.                 finished: index === responseText.length - 1
38.             };
39.             
40.             // SSE 格式要求
41.             res.write(`data: ${JSON.stringify(chunk)}\n\n`);
42.             
43.             index++;
44.             setTimeout(sendChunk, 500); // 控制发送速度
45.         } else {
46.             res.end();
47.         }
48.     };
50.     sendChunk();
52.     // 处理客户端断开连接
53.     req.on('close', () => {
54.         console.log('客户端断开连接');
55.         res.end();
56.     });
57. });
59. app.listen(port, () => {
60.     console.log(`服务运行在 http://localhost:${port}`);
61. });

复制代码

焦点实现原理：

• 前端实现：
  

• 利用 Fetch API + ReadableStream 处理处罚流式数据
  
• 支持哀求停止（AbortController）
  
• 实现打字机动画效果
  
• 自动滚动保持内容可见
  
• 加载状态指示
  

• 后端实现：
  

• 利用 Server-Sent Events (SSE) 协议
  
• 分块发送 JSON 格式数据
  
• 模仿真实相应延长（500ms/块）
  
• 支持客户端断开检测
  

• 数据格式：
  

1. {
2.   "content": "当前内容片段",
3.   "finished": false
4. }

复制代码

优化扩展发起：

• 性能优化：
  

1. // 添加节流控制
2. const throttle = (func, limit) => {
3.   let lastFunc;
4.   let lastRan;
5.   return function(...args) {
6.     if (!lastRan) {
7.       func.apply(this, args);
8.       lastRan = Date.now();
9.     } else {
10.       clearTimeout(lastFunc);
11.       lastFunc = setTimeout(() => {
12.         if ((Date.now() - lastRan) >= limit) {
13.           func.apply(this, args);
14.           lastRan = Date.now();
15.         }
16.       }, limit - (Date.now() - lastRan));
17.     }
18.   };
19. };
21. // 在 appendContent 中使用
22. this.appendContent = throttle(this.appendContent, 50);

复制代码

• 错误处理处罚增强：
  

1. // 前端添加错误处理
2. async start() {
3.     try {
4.         // ...原有逻辑...
5.     } catch (error) {
6.         if (error.name === 'AbortError') {
7.             this.appendContent('\n[对话已中止]');
8.         } else {
9.             this.appendContent(`\n[错误: ${error.message}]`);
10.             console.error('Stream Error:', error);
11.         }
12.     }
13. }
15. // 后端添加错误模拟
16. app.get('/stream', (req, res) => {
17.     // 10% 概率模拟错误
18.     if (Math.random() < 0.1) {
19.         res.writeHead(500);
20.         res.end();
21.         return;
22.     }
23.     // ...原有逻辑...
24. });

复制代码

• 功能扩展：
  

1. // 添加 Markdown 支持
2. appendContent(text) {
3.     // 简单 Markdown 解析
4.     const parsed = text
5.         .replace(/#{3}/g, '<h3>')
6.         .replace(/#{2}/g, '<h2>')
7.         .replace(/#{1}/g, '<h1>')
8.         .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
9.    
10.     // 使用 DocumentFragment 优化渲染
11.     const fragment = document.createDocumentFragment();
12.     const span = document.createElement('span');
13.     span.innerHTML = parsed;
14.     fragment.appendChild(span);
15.    
16.     this.output.appendChild(fragment);
17. }

复制代码

这个实现方案完备展示了：

• 前后端流式通讯的全流程
  
• 实时内容渲染优化本领
  
• 完备的错误处理处罚机制
  
• 可扩展的架构筹划
  
• 用户体验优化细节
  

实际摆设时，发起：

• 利用 WebSocket 更换 SSE 实现双向通讯
  
• 添加 JWT 鉴权
  
• 实现速率限定（Rate Limiting）
  
• 摆设到支持 HTTP/2 的服务器
  
• 添加前端缓存战略