实时交互应用开发使用Node.js搭建Cosmos-Reason1-7B的流式输出API你有没有遇到过这种情况向一个AI模型提问一个稍微复杂点的问题然后就是漫长的等待。屏幕上只有一个加载中的圆圈在转你完全不知道它是在思考还是卡住了或者干脆已经崩溃了。这种体验尤其是在构建聊天机器人或者交互式应用时非常糟糕。传统的AI模型API调用方式通常是“请求-等待-响应”的模式。模型需要生成完整的答案后才一次性返回给前端。对于像Cosmos-Reason1-7B这样擅长长文本推理的模型生成一段几百字的回答可能需要好几秒甚至十几秒。用户的耐心就在这无声的等待中被消耗殆尽。今天我们就来解决这个问题。我将带你一步步用Node.js为Cosmos-Reason1-7B模型搭建一个支持流式输出的API。简单来说就是实现类似ChatGPT的“打字机”效果答案不是一次性蹦出来而是一个词一个词、一句话一句话地实时显示出来。这不仅能极大提升用户体验让等待变得“可见”和“可预期”还能让你的应用显得更加智能和生动。1. 为什么需要流式输出不仅仅是“打字机效果”你可能觉得流式输出就是为了那个酷酷的打字效果。没错视觉效果很重要但它的价值远不止于此。想象一下两个场景场景A传统方式用户问“请用500字介绍太阳系。” 前端显示“思考中...”10秒后一整段文字突然出现。场景B流式方式用户问同样的问题。前端立刻开始显示“好的太阳系是...”文字逐行出现用户可以看到“水星”、“金星”、“地球”这些关键词依次蹦出甚至在模型写到“火星”时用户就能提前开始阅读关于“水星”的部分。场景B的优势显而易见降低等待焦虑用户知道程序正在工作没有卡死。进度是可见的。提前获取信息用户不必等到所有内容生成完毕。对于长回答他们可以边生成边阅读整体感知的响应时间大大缩短。更自然的交互像真人对话一样对方是一边想一边说而不是沉默良久后突然背诵一大段文章。这种交互感更符合人类习惯。适用于实时场景对于需要实时反馈的对话、代码补全、实时翻译等场景流式输出是唯一可行的方式。理解了“为什么”接下来我们看看“怎么做”。核心就是用WebSocket或者Server-Sent Events (SSE) 这类技术在模型生成文本的过程中不断地把刚生成出来的部分推送给前端。2. 搭建你的开发环境工欲善其事必先利其器。我们先来把开发环境准备好。这里假设你已经有了一些Node.js的基础如果没有也别担心跟着步骤走就行。2.1 Node.js安装及环境配置首先确保你的电脑上安装了Node.js。这是我们的运行时环境。下载与安装访问Node.js官网下载最新的长期支持版本。安装过程很简单一直点“下一步”即可。安装完成后打开你的命令行工具Windows上是CMD或PowerShellMac/Linux上是Terminal。验证安装 在命令行里输入以下两个命令如果能看到版本号说明安装成功。node -v npm -vnpm是Node.js的包管理器会随Node.js一起安装我们之后安装第三方库全靠它。创建项目目录 找一个你喜欢的地方新建一个文件夹作为我们的项目根目录比如叫做cosmos-stream-api。mkdir cosmos-stream-api cd cosmos-stream-api初始化项目 在这个目录下运行以下命令来创建一个package.json文件这个文件记录了项目的依赖和信息。npm init -y执行完后你会看到目录下多了一个package.json文件。2.2 安装核心依赖库我们的项目主要依赖以下几个库express: 一个非常流行的Node.js Web框架用来搭建我们的HTTP服务器和API接口。ws: 一个简单好用的WebSocket库用于实现全双工的流式通信。axios: 用于向Cosmos-Reason1-7B模型的后端服务比如用Xinference、vLLM等框架启动的API发送HTTP请求。cors: 用来处理跨域请求方便前端调试。dotenv: 用来管理环境变量比如我们的模型API地址、端口号等。在项目根目录下运行以下命令一次性安装它们npm install express ws axios cors dotenv安装完成后你的package.json文件里的dependencies部分就会看到这些库。2.3 准备Cosmos-Reason1-7B模型服务流式API本身不运行模型它只是一个“中间人”或“适配器”。你需要一个已经部署好的Cosmos-Reason1-7B模型服务并且这个服务必须支持流式输出。常见的部署方式比如使用Xinference、vLLM或TGI来启动模型它们通常都提供了流式输出的接口。这里以假设你的模型服务运行在http://localhost:8000为例并且它有一个/v1/chat/completions的兼容OpenAI格式的流式接口。你需要知道这个服务的基础URL例如http://localhost:8000流式端点例如/v1/chat/completions请求格式通常是发送一个JSON其中包含stream: true参数。如果你还没有部署模型需要先完成这一步。可以参考模型提供的官方文档用上述任一框架将其启动。3. 构建流式API服务器环境准备好了模型服务也假设在运行了现在开始写代码。我们会从最简单的HTTP服务器开始逐步增加WebSocket和流式转发功能。3.1 创建基础Express服务器在项目根目录下创建一个名为server.js的文件。这是我们的主服务器文件。// server.js require(‘dotenv’).config(); // 加载环境变量 const express require(‘express’); const cors require(‘cors’); const { createServer } require(‘http’); const { WebSocketServer } require(‘ws’); const app express(); const PORT process.env.PORT || 3000; // 中间件 app.use(cors()); // 允许跨域 app.use(express.json()); // 解析JSON格式的请求体 // 创建一个简单的健康检查端点 app.get(‘/health’, (req, res) { res.json({ status: ‘ok’, message: ‘Stream API server is running’ }); }); // 创建HTTP服务器并将Express app作为请求处理器 const server createServer(app); // 启动HTTP服务器 server.listen(PORT, () { console.log( HTTP Server is running on http://localhost:${PORT}); });现在在命令行运行node server.js访问http://localhost:3000/health你应该能看到一个JSON响应。基础架子搭好了。3.2 集成WebSocket服务接下来我们在同一个HTTP服务器上附加WebSocket服务。这样同一个端口既能处理普通的HTTP请求如健康检查也能处理WebSocket连接。修改server.js// ... 前面的require和app初始化代码不变 ... const server createServer(app); // 创建WebSocket服务器将其绑定到我们的HTTP server上 const wss new WebSocketServer({ server }); // 监听WebSocket连接 wss.on(‘connection’, (ws, request) { console.log(‘ New WebSocket client connected’); // 监听客户端发来的消息 ws.on(‘message’, (message) { console.log(‘ Received:’, message.toString()); // 这里暂时简单回声 ws.send(Echo: ${message}); }); // 连接关闭 ws.on(‘close’, () { console.log(‘❌ WebSocket client disconnected’); }); // 连接错误 ws.on(‘error’, (error) { console.error(‘ WebSocket error:’, error); }); }); // 启动服务器 server.listen(PORT, () { console.log( HTTP Server is running on http://localhost:${PORT}); console.log(️ WebSocket Server is also running on ws://localhost:${PORT}); });重启服务器 (node server.js)。现在你的服务器同时支持WebSocket了。你可以用任何WebSocket客户端工具比如浏览器插件“Simple WebSocket Client”连接到ws://localhost:3000发送一条消息会收到一个带“Echo:”前缀的回复。这说明WebSocket通路已经打通。3.3 实现核心流式转发逻辑这是最关键的一步。当客户端通过WebSocket发送一个聊天请求过来时我们需要将这个请求转发给后端的Cosmos-Reason1-7B模型服务支持流式。将模型服务返回的流式数据一段一段的文本实时地转发回WebSocket客户端。我们需要用到axios来发送请求并且要处理流式响应。修改server.js中的WebSocket消息处理部分const axios require(‘axios’); // 你的模型服务地址可以从环境变量读取 const MODEL_API_BASE process.env.MODEL_API_BASE || ‘http://localhost:8000’; wss.on(‘connection’, (ws, request) { console.log(‘ New WebSocket client connected’); ws.on(‘message’, async (message) { try { const userMessage message.toString(); console.log(‘ Received user query:’, userMessage); // 1. 构造发送给模型服务的请求体 const requestBody { model: ‘cosmos-reason1-7b’, // 模型名称根据你的实际服务调整 messages: [{ role: ‘user’, content: userMessage }], stream: true, // 关键参数开启流式输出 max_tokens: 1024, // 最大生成长度 temperature: 0.7, // 随机性 }; // 2. 使用axios向模型服务发起流式请求 const response await axios({ method: ‘post’, url: ${MODEL_API_BASE}/v1/chat/completions, // 模型流式端点 data: requestBody, responseType: ‘stream’, // 关键指定响应类型为流 headers: { ‘Content-Type’: ‘application/json’, }, }); // 3. 监听模型返回的数据流 const stream response.data; stream.on(‘data’, (chunk) { // 模型返回的数据通常是多个JSON对象用\n分隔 const lines chunk.toString().split(‘\n’).filter(line line.trim() ! ‘’); for (const line of lines) { if (line.startsWith(‘data: ‘)) { const dataStr line.slice(6); // 去掉 ‘data: ‘ 前缀 if (dataStr ‘[DONE]’) { // 流式传输结束 ws.send(JSON.stringify({ type: ‘done’ })); console.log(‘✅ Stream finished’); return; } try { const data JSON.parse(dataStr); // 提取模型生成的文本增量 const content data.choices[0]?.delta?.content || ‘’; if (content) { // 4. 将文本增量实时发送给WebSocket客户端 ws.send(JSON.stringify({ type: ‘chunk’, content: content })); } } catch (e) { console.error(‘Failed to parse stream data:’, e, ‘Raw line:’, dataStr); } } } }); stream.on(‘end’, () { console.log(‘ Model stream ended.’); }); stream.on(‘error’, (error) { console.error(‘ Error in model stream:’, error); ws.send(JSON.stringify({ type: ‘error’, message: ‘Model stream error’ })); }); } catch (error) { console.error(‘ Failed to call model API:’, error); ws.send(JSON.stringify({ type: ‘error’, message: ‘Failed to connect to model’ })); } }); // ... ws.on(‘close’) 和 ws.on(‘error’) 保持不变 ... });代码逻辑解读接收请求当WebSocket客户端发来用户消息时我们将其包装成模型服务能识别的格式这里模仿了OpenAI的格式。发起流式请求使用axios向模型服务发起POST请求关键是将responseType设置为‘stream’这样我们拿到的是一个可读流而不是等待完整的响应。处理数据流监听流的‘data’事件。模型服务会源源不断地发送数据块过来。每个数据块可能包含多行每行格式通常是data: {JSON}或data: [DONE]。解析与转发我们解析每一行JSON提取出本次生成的文本片段delta.content然后立即将其包装成一个简单的JSON对象如{type: ‘chunk’, content: ‘…’}通过WebSocket发送回前端。结束与错误处理当收到[DONE]或流结束时通知前端生成完毕。过程中任何错误也需捕获并通知前端。4. 前端示例连接与展示后端API已经就绪我们还需要一个简单的前端页面来测试效果。在项目根目录下创建一个public文件夹并在里面创建一个index.html文件。!DOCTYPE html html lang“zh-CN” head meta charset“UTF-8” meta name“viewport” content“widthdevice-width, initial-scale1.0” titleCosmos-Reason1-7B 流式对话测试/title style body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } #chatBox { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 15px; margin-bottom: 20px; } .message { margin-bottom: 15px; } .user { text-align: right; color: #0066cc; } .assistant { text-align: left; color: #333; } #inputArea { display: flex; } #userInput { flex-grow: 1; padding: 10px; font-size: 16px; } button { padding: 10px 20px; font-size: 16px; margin-left: 10px; } .status { font-size: 0.9em; color: #666; margin-top: 10px; } /style /head body h1 Cosmos-Reason1-7B 流式对话演示/h1 div id“chatBox”/div div id“inputArea” input type“text” id“userInput” placeholder“输入你的问题…” / button onclick“sendMessage()”发送/button /div div id“status” class“status”状态未连接/div script let ws null; let currentAssistantMessageDiv null; function connectWebSocket() { // 连接到我们刚刚搭建的WebSocket服务器 const wsUrl ws://${window.location.hostname}:3000; ws new WebSocket(wsUrl); ws.onopen () { updateStatus(‘已连接’); console.log(‘WebSocket连接已打开’); }; ws.onmessage (event) { const data JSON.parse(event.data); if (data.type ‘chunk’) { // 收到一个文本片段追加到当前回答中 if (!currentAssistantMessageDiv) { // 如果是回答的开始创建一个新的消息区域 currentAssistantMessageDiv document.createElement(‘div’); currentAssistantMessageDiv.className ‘message assistant’; currentAssistantMessageDiv.innerHTML strongAI:/strong span id“currentAnswer”/span; document.getElementById(‘chatBox’).appendChild(currentAssistantMessageDiv); } document.getElementById(‘currentAnswer’).textContent data.content; // 滚动到底部 const chatBox document.getElementById(‘chatBox’); chatBox.scrollTop chatBox.scrollHeight; } else if (data.type ‘done’) { // 回答生成完毕 updateStatus(‘回答生成完毕’); currentAssistantMessageDiv null; // 重置准备接收下一条 } else if (data.type ‘error’) { updateStatus(‘错误: ‘ data.message); currentAssistantMessageDiv null; } }; ws.onerror (error) { console.error(‘WebSocket错误:’, error); updateStatus(‘连接错误’); }; ws.onclose () { console.log(‘WebSocket连接关闭’); updateStatus(‘连接已断开’); }; } function sendMessage() { const input document.getElementById(‘userInput’); const message input.value.trim(); if (!message || !ws || ws.readyState ! WebSocket.OPEN) { alert(‘请先连接或输入有效内容’); return; } // 显示用户消息 const userDiv document.createElement(‘div’); userDiv.className ‘message user’; userDiv.innerHTML strong你:/strong ${message}; document.getElementById(‘chatBox’).appendChild(userDiv); // 发送消息到后端 ws.send(message); updateStatus(‘正在思考…’); // 清空输入框 input.value ‘’; // 滚动到底部 const chatBox document.getElementById(‘chatBox’); chatBox.scrollTop chatBox.scrollHeight; } function updateStatus(text) { document.getElementById(‘status’).textContent 状态${text}; } // 页面加载时自动连接 window.onload connectWebSocket; /script /body /html为了让Express能够提供这个HTML文件我们需要添加一个静态文件中间件。在server.js的中间件部分添加// ... 在 app.use(express.json()); 之后添加 ... app.use(express.static(‘public’)); // 提供静态文件现在重启服务器在浏览器中访问http://localhost:3000你就能看到一个简单的聊天界面。输入问题就能看到答案像打字一样逐字出现了5. 优化与生产环境考量我们完成了一个可用的原型。但要用于实际项目还需要考虑更多。5.1 性能与稳定性优化连接管理我们的简单示例没有处理多用户、连接重连、心跳检测。生产环境需要使用更健壮的WebSocket库如Socket.IO它内置了这些功能。错误处理与重试网络波动、模型服务重启都可能造成中断。前端需要监听错误并尝试重连后端也需要优雅地处理模型服务不可用的情况。限流与队列如果用户量很大直接转发所有请求可能压垮模型服务。需要在Node.js层实现请求队列或限流机制。日志与监控记录请求量、响应时间、错误率这对于排查问题至关重要。5.2 扩展功能支持多轮对话目前只处理单条消息。需要修改后端将整个对话历史包括AI之前的回复都发送给模型才能实现连贯的多轮对话。支持不同的流式协议除了WebSocket也可以实现Server-Sent Events接口SSE更简单但它是单向的服务器推送到客户端。添加身份验证为你的API添加API Key验证防止被滥用。前端体验增强可以添加停止生成、重新生成、复制答案、调整生成参数如temperature等功能。5.3 部署建议使用进程管理器不要直接用node server.js运行。使用pm2或forever来管理Node.js进程实现崩溃自动重启、日志管理。使用反向代理在生产环境中通常会在Node.js服务器前放置Nginx或Apache处理SSL、负载均衡、静态文件等让Node.js专注于业务逻辑。环境变量配置将模型地址、端口、密钥等敏感信息全部放入环境变量或配置文件中不要硬编码在代码里。整体走下来你会发现搭建一个流式API的核心思路并不复杂建立一个双向的实时通道WebSocket然后当好模型服务和前端之间的“传声筒”。难点在于对各种边界情况的处理比如网络中断、数据解析错误、模型服务异常等。实际用起来流式输出带来的体验提升是巨大的。用户不再面对一个“沉默”的界面而是能感受到AI思考的“脉搏”。对于需要处理长文本、复杂推理的Cosmos-Reason1-7B这类模型来说这几乎是提升用户体验的必备功能。你可以基于今天这个基础版本根据自己的业务需求添加更多功能。比如为不同的对话session管理上下文或者加入对多个不同模型的支持。希望这个实战指南能帮你顺利迈出构建实时AI应用的第一步。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
实时交互应用开发：使用Node.js搭建Cosmos-Reason1-7B的流式输出API
发布时间：2026/7/16 18:04:00
实时交互应用开发使用Node.js搭建Cosmos-Reason1-7B的流式输出API你有没有遇到过这种情况向一个AI模型提问一个稍微复杂点的问题然后就是漫长的等待。屏幕上只有一个加载中的圆圈在转你完全不知道它是在思考还是卡住了或者干脆已经崩溃了。这种体验尤其是在构建聊天机器人或者交互式应用时非常糟糕。传统的AI模型API调用方式通常是“请求-等待-响应”的模式。模型需要生成完整的答案后才一次性返回给前端。对于像Cosmos-Reason1-7B这样擅长长文本推理的模型生成一段几百字的回答可能需要好几秒甚至十几秒。用户的耐心就在这无声的等待中被消耗殆尽。今天我们就来解决这个问题。我将带你一步步用Node.js为Cosmos-Reason1-7B模型搭建一个支持流式输出的API。简单来说就是实现类似ChatGPT的“打字机”效果答案不是一次性蹦出来而是一个词一个词、一句话一句话地实时显示出来。这不仅能极大提升用户体验让等待变得“可见”和“可预期”还能让你的应用显得更加智能和生动。1. 为什么需要流式输出不仅仅是“打字机效果”你可能觉得流式输出就是为了那个酷酷的打字效果。没错视觉效果很重要但它的价值远不止于此。想象一下两个场景场景A传统方式用户问“请用500字介绍太阳系。” 前端显示“思考中...”10秒后一整段文字突然出现。场景B流式方式用户问同样的问题。前端立刻开始显示“好的太阳系是...”文字逐行出现用户可以看到“水星”、“金星”、“地球”这些关键词依次蹦出甚至在模型写到“火星”时用户就能提前开始阅读关于“水星”的部分。场景B的优势显而易见降低等待焦虑用户知道程序正在工作没有卡死。进度是可见的。提前获取信息用户不必等到所有内容生成完毕。对于长回答他们可以边生成边阅读整体感知的响应时间大大缩短。更自然的交互像真人对话一样对方是一边想一边说而不是沉默良久后突然背诵一大段文章。这种交互感更符合人类习惯。适用于实时场景对于需要实时反馈的对话、代码补全、实时翻译等场景流式输出是唯一可行的方式。理解了“为什么”接下来我们看看“怎么做”。核心就是用WebSocket或者Server-Sent Events (SSE) 这类技术在模型生成文本的过程中不断地把刚生成出来的部分推送给前端。2. 搭建你的开发环境工欲善其事必先利其器。我们先来把开发环境准备好。这里假设你已经有了一些Node.js的基础如果没有也别担心跟着步骤走就行。2.1 Node.js安装及环境配置首先确保你的电脑上安装了Node.js。这是我们的运行时环境。下载与安装访问Node.js官网下载最新的长期支持版本。安装过程很简单一直点“下一步”即可。安装完成后打开你的命令行工具Windows上是CMD或PowerShellMac/Linux上是Terminal。验证安装 在命令行里输入以下两个命令如果能看到版本号说明安装成功。node -v npm -vnpm是Node.js的包管理器会随Node.js一起安装我们之后安装第三方库全靠它。创建项目目录 找一个你喜欢的地方新建一个文件夹作为我们的项目根目录比如叫做cosmos-stream-api。mkdir cosmos-stream-api cd cosmos-stream-api初始化项目 在这个目录下运行以下命令来创建一个package.json文件这个文件记录了项目的依赖和信息。npm init -y执行完后你会看到目录下多了一个package.json文件。2.2 安装核心依赖库我们的项目主要依赖以下几个库express: 一个非常流行的Node.js Web框架用来搭建我们的HTTP服务器和API接口。ws: 一个简单好用的WebSocket库用于实现全双工的流式通信。axios: 用于向Cosmos-Reason1-7B模型的后端服务比如用Xinference、vLLM等框架启动的API发送HTTP请求。cors: 用来处理跨域请求方便前端调试。dotenv: 用来管理环境变量比如我们的模型API地址、端口号等。在项目根目录下运行以下命令一次性安装它们npm install express ws axios cors dotenv安装完成后你的package.json文件里的dependencies部分就会看到这些库。2.3 准备Cosmos-Reason1-7B模型服务流式API本身不运行模型它只是一个“中间人”或“适配器”。你需要一个已经部署好的Cosmos-Reason1-7B模型服务并且这个服务必须支持流式输出。常见的部署方式比如使用Xinference、vLLM或TGI来启动模型它们通常都提供了流式输出的接口。这里以假设你的模型服务运行在http://localhost:8000为例并且它有一个/v1/chat/completions的兼容OpenAI格式的流式接口。你需要知道这个服务的基础URL例如http://localhost:8000流式端点例如/v1/chat/completions请求格式通常是发送一个JSON其中包含stream: true参数。如果你还没有部署模型需要先完成这一步。可以参考模型提供的官方文档用上述任一框架将其启动。3. 构建流式API服务器环境准备好了模型服务也假设在运行了现在开始写代码。我们会从最简单的HTTP服务器开始逐步增加WebSocket和流式转发功能。3.1 创建基础Express服务器在项目根目录下创建一个名为server.js的文件。这是我们的主服务器文件。// server.js require(‘dotenv’).config(); // 加载环境变量 const express require(‘express’); const cors require(‘cors’); const { createServer } require(‘http’); const { WebSocketServer } require(‘ws’); const app express(); const PORT process.env.PORT || 3000; // 中间件 app.use(cors()); // 允许跨域 app.use(express.json()); // 解析JSON格式的请求体 // 创建一个简单的健康检查端点 app.get(‘/health’, (req, res) { res.json({ status: ‘ok’, message: ‘Stream API server is running’ }); }); // 创建HTTP服务器并将Express app作为请求处理器 const server createServer(app); // 启动HTTP服务器 server.listen(PORT, () { console.log( HTTP Server is running on http://localhost:${PORT}); });现在在命令行运行node server.js访问http://localhost:3000/health你应该能看到一个JSON响应。基础架子搭好了。3.2 集成WebSocket服务接下来我们在同一个HTTP服务器上附加WebSocket服务。这样同一个端口既能处理普通的HTTP请求如健康检查也能处理WebSocket连接。修改server.js// ... 前面的require和app初始化代码不变 ... const server createServer(app); // 创建WebSocket服务器将其绑定到我们的HTTP server上 const wss new WebSocketServer({ server }); // 监听WebSocket连接 wss.on(‘connection’, (ws, request) { console.log(‘ New WebSocket client connected’); // 监听客户端发来的消息 ws.on(‘message’, (message) { console.log(‘ Received:’, message.toString()); // 这里暂时简单回声 ws.send(Echo: ${message}); }); // 连接关闭 ws.on(‘close’, () { console.log(‘❌ WebSocket client disconnected’); }); // 连接错误 ws.on(‘error’, (error) { console.error(‘ WebSocket error:’, error); }); }); // 启动服务器 server.listen(PORT, () { console.log( HTTP Server is running on http://localhost:${PORT}); console.log(️ WebSocket Server is also running on ws://localhost:${PORT}); });重启服务器 (node server.js)。现在你的服务器同时支持WebSocket了。你可以用任何WebSocket客户端工具比如浏览器插件“Simple WebSocket Client”连接到ws://localhost:3000发送一条消息会收到一个带“Echo:”前缀的回复。这说明WebSocket通路已经打通。3.3 实现核心流式转发逻辑这是最关键的一步。当客户端通过WebSocket发送一个聊天请求过来时我们需要将这个请求转发给后端的Cosmos-Reason1-7B模型服务支持流式。将模型服务返回的流式数据一段一段的文本实时地转发回WebSocket客户端。我们需要用到axios来发送请求并且要处理流式响应。修改server.js中的WebSocket消息处理部分const axios require(‘axios’); // 你的模型服务地址可以从环境变量读取 const MODEL_API_BASE process.env.MODEL_API_BASE || ‘http://localhost:8000’; wss.on(‘connection’, (ws, request) { console.log(‘ New WebSocket client connected’); ws.on(‘message’, async (message) { try { const userMessage message.toString(); console.log(‘ Received user query:’, userMessage); // 1. 构造发送给模型服务的请求体 const requestBody { model: ‘cosmos-reason1-7b’, // 模型名称根据你的实际服务调整 messages: [{ role: ‘user’, content: userMessage }], stream: true, // 关键参数开启流式输出 max_tokens: 1024, // 最大生成长度 temperature: 0.7, // 随机性 }; // 2. 使用axios向模型服务发起流式请求 const response await axios({ method: ‘post’, url: ${MODEL_API_BASE}/v1/chat/completions, // 模型流式端点 data: requestBody, responseType: ‘stream’, // 关键指定响应类型为流 headers: { ‘Content-Type’: ‘application/json’, }, }); // 3. 监听模型返回的数据流 const stream response.data; stream.on(‘data’, (chunk) { // 模型返回的数据通常是多个JSON对象用\n分隔 const lines chunk.toString().split(‘\n’).filter(line line.trim() ! ‘’); for (const line of lines) { if (line.startsWith(‘data: ‘)) { const dataStr line.slice(6); // 去掉 ‘data: ‘ 前缀 if (dataStr ‘[DONE]’) { // 流式传输结束 ws.send(JSON.stringify({ type: ‘done’ })); console.log(‘✅ Stream finished’); return; } try { const data JSON.parse(dataStr); // 提取模型生成的文本增量 const content data.choices[0]?.delta?.content || ‘’; if (content) { // 4. 将文本增量实时发送给WebSocket客户端 ws.send(JSON.stringify({ type: ‘chunk’, content: content })); } } catch (e) { console.error(‘Failed to parse stream data:’, e, ‘Raw line:’, dataStr); } } } }); stream.on(‘end’, () { console.log(‘ Model stream ended.’); }); stream.on(‘error’, (error) { console.error(‘ Error in model stream:’, error); ws.send(JSON.stringify({ type: ‘error’, message: ‘Model stream error’ })); }); } catch (error) { console.error(‘ Failed to call model API:’, error); ws.send(JSON.stringify({ type: ‘error’, message: ‘Failed to connect to model’ })); } }); // ... ws.on(‘close’) 和 ws.on(‘error’) 保持不变 ... });代码逻辑解读接收请求当WebSocket客户端发来用户消息时我们将其包装成模型服务能识别的格式这里模仿了OpenAI的格式。发起流式请求使用axios向模型服务发起POST请求关键是将responseType设置为‘stream’这样我们拿到的是一个可读流而不是等待完整的响应。处理数据流监听流的‘data’事件。模型服务会源源不断地发送数据块过来。每个数据块可能包含多行每行格式通常是data: {JSON}或data: [DONE]。解析与转发我们解析每一行JSON提取出本次生成的文本片段delta.content然后立即将其包装成一个简单的JSON对象如{type: ‘chunk’, content: ‘…’}通过WebSocket发送回前端。结束与错误处理当收到[DONE]或流结束时通知前端生成完毕。过程中任何错误也需捕获并通知前端。4. 前端示例连接与展示后端API已经就绪我们还需要一个简单的前端页面来测试效果。在项目根目录下创建一个public文件夹并在里面创建一个index.html文件。!DOCTYPE html html lang“zh-CN” head meta charset“UTF-8” meta name“viewport” content“widthdevice-width, initial-scale1.0” titleCosmos-Reason1-7B 流式对话测试/title style body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } #chatBox { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 15px; margin-bottom: 20px; } .message { margin-bottom: 15px; } .user { text-align: right; color: #0066cc; } .assistant { text-align: left; color: #333; } #inputArea { display: flex; } #userInput { flex-grow: 1; padding: 10px; font-size: 16px; } button { padding: 10px 20px; font-size: 16px; margin-left: 10px; } .status { font-size: 0.9em; color: #666; margin-top: 10px; } /style /head body h1 Cosmos-Reason1-7B 流式对话演示/h1 div id“chatBox”/div div id“inputArea” input type“text” id“userInput” placeholder“输入你的问题…” / button onclick“sendMessage()”发送/button /div div id“status” class“status”状态未连接/div script let ws null; let currentAssistantMessageDiv null; function connectWebSocket() { // 连接到我们刚刚搭建的WebSocket服务器 const wsUrl ws://${window.location.hostname}:3000; ws new WebSocket(wsUrl); ws.onopen () { updateStatus(‘已连接’); console.log(‘WebSocket连接已打开’); }; ws.onmessage (event) { const data JSON.parse(event.data); if (data.type ‘chunk’) { // 收到一个文本片段追加到当前回答中 if (!currentAssistantMessageDiv) { // 如果是回答的开始创建一个新的消息区域 currentAssistantMessageDiv document.createElement(‘div’); currentAssistantMessageDiv.className ‘message assistant’; currentAssistantMessageDiv.innerHTML strongAI:/strong span id“currentAnswer”/span; document.getElementById(‘chatBox’).appendChild(currentAssistantMessageDiv); } document.getElementById(‘currentAnswer’).textContent data.content; // 滚动到底部 const chatBox document.getElementById(‘chatBox’); chatBox.scrollTop chatBox.scrollHeight; } else if (data.type ‘done’) { // 回答生成完毕 updateStatus(‘回答生成完毕’); currentAssistantMessageDiv null; // 重置准备接收下一条 } else if (data.type ‘error’) { updateStatus(‘错误: ‘ data.message); currentAssistantMessageDiv null; } }; ws.onerror (error) { console.error(‘WebSocket错误:’, error); updateStatus(‘连接错误’); }; ws.onclose () { console.log(‘WebSocket连接关闭’); updateStatus(‘连接已断开’); }; } function sendMessage() { const input document.getElementById(‘userInput’); const message input.value.trim(); if (!message || !ws || ws.readyState ! WebSocket.OPEN) { alert(‘请先连接或输入有效内容’); return; } // 显示用户消息 const userDiv document.createElement(‘div’); userDiv.className ‘message user’; userDiv.innerHTML strong你:/strong ${message}; document.getElementById(‘chatBox’).appendChild(userDiv); // 发送消息到后端 ws.send(message); updateStatus(‘正在思考…’); // 清空输入框 input.value ‘’; // 滚动到底部 const chatBox document.getElementById(‘chatBox’); chatBox.scrollTop chatBox.scrollHeight; } function updateStatus(text) { document.getElementById(‘status’).textContent 状态${text}; } // 页面加载时自动连接 window.onload connectWebSocket; /script /body /html为了让Express能够提供这个HTML文件我们需要添加一个静态文件中间件。在server.js的中间件部分添加// ... 在 app.use(express.json()); 之后添加 ... app.use(express.static(‘public’)); // 提供静态文件现在重启服务器在浏览器中访问http://localhost:3000你就能看到一个简单的聊天界面。输入问题就能看到答案像打字一样逐字出现了5. 优化与生产环境考量我们完成了一个可用的原型。但要用于实际项目还需要考虑更多。5.1 性能与稳定性优化连接管理我们的简单示例没有处理多用户、连接重连、心跳检测。生产环境需要使用更健壮的WebSocket库如Socket.IO它内置了这些功能。错误处理与重试网络波动、模型服务重启都可能造成中断。前端需要监听错误并尝试重连后端也需要优雅地处理模型服务不可用的情况。限流与队列如果用户量很大直接转发所有请求可能压垮模型服务。需要在Node.js层实现请求队列或限流机制。日志与监控记录请求量、响应时间、错误率这对于排查问题至关重要。5.2 扩展功能支持多轮对话目前只处理单条消息。需要修改后端将整个对话历史包括AI之前的回复都发送给模型才能实现连贯的多轮对话。支持不同的流式协议除了WebSocket也可以实现Server-Sent Events接口SSE更简单但它是单向的服务器推送到客户端。添加身份验证为你的API添加API Key验证防止被滥用。前端体验增强可以添加停止生成、重新生成、复制答案、调整生成参数如temperature等功能。5.3 部署建议使用进程管理器不要直接用node server.js运行。使用pm2或forever来管理Node.js进程实现崩溃自动重启、日志管理。使用反向代理在生产环境中通常会在Node.js服务器前放置Nginx或Apache处理SSL、负载均衡、静态文件等让Node.js专注于业务逻辑。环境变量配置将模型地址、端口、密钥等敏感信息全部放入环境变量或配置文件中不要硬编码在代码里。整体走下来你会发现搭建一个流式API的核心思路并不复杂建立一个双向的实时通道WebSocket然后当好模型服务和前端之间的“传声筒”。难点在于对各种边界情况的处理比如网络中断、数据解析错误、模型服务异常等。实际用起来流式输出带来的体验提升是巨大的。用户不再面对一个“沉默”的界面而是能感受到AI思考的“脉搏”。对于需要处理长文本、复杂推理的Cosmos-Reason1-7B这类模型来说这几乎是提升用户体验的必备功能。你可以基于今天这个基础版本根据自己的业务需求添加更多功能。比如为不同的对话session管理上下文或者加入对多个不同模型的支持。希望这个实战指南能帮你顺利迈出构建实时AI应用的第一步。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
