Alibaba DASD-4B Thinking 对话工具 Node.js 环境配置与实时聊天应用开发

Alibaba DASD-4B Thinking 对话工具 Node.js 环境配置与实时聊天应用开发最近在折腾一些AI对话应用发现不少开发者对如何快速接入像Alibaba DASD-4B Thinking这样的对话工具很感兴趣。正好用Node.js来搭建一个实时聊天应用是个挺不错的入门选择。今天我就从一个Node.js开发者的角度带你从零开始一步步完成环境配置并最终构建一个能实时对话的Web应用。整个过程不复杂跟着做你也能快速上手。1. 准备工作搭建你的Node.js开发环境在开始敲代码之前我们得先把“舞台”搭好。对于Node.js项目来说这个舞台就是你的本地开发环境。1.1 安装Node.js与npmNode.js是运行JavaScript代码的服务器端环境而npmNode Package Manager是它的包管理器用来安装和管理项目依赖。现在安装它们非常简单。首先访问Node.js官方网站的下载页面。我建议你直接下载“长期支持版”LTS这个版本更稳定适合大多数生产环境。根据你的操作系统Windows、macOS或Linux选择对应的安装包。下载完成后运行安装程序。安装过程基本就是一路点击“下一步”使用默认设置就行。安装程序会自动把Node.js和npm都装好并且把它们的路径添加到系统环境变量里这样你就可以在命令行里直接使用了。安装完成后怎么验证呢打开你的终端Windows上是命令提示符或PowerShellmacOS或Linux上是Terminal输入下面两条命令node -v npm -v如果安装成功你会看到类似v18.17.0和9.6.7这样的版本号输出。能看到版本号就说明环境已经准备就绪了。1.2 初始化你的项目环境好了我们得找个地方写代码。先在电脑上创建一个新的文件夹名字可以叫dasd-chat-app然后通过终端进入这个文件夹。mkdir dasd-chat-app cd dasd-chat-app接下来我们需要初始化一个Node.js项目。在项目文件夹里运行npm init -y这个命令会快速生成一个package.json文件它是你项目的“身份证”和“说明书”里面记录了项目名称、版本、描述以及最重要的——依赖包列表。-y参数的意思是接受所有默认选项省去了一路回车确认的麻烦。现在你的项目骨架就有了。我们还需要安装一些构建应用必需的“砖瓦”也就是依赖包。1.3 安装核心依赖包我们这个实时聊天应用后端需要一个Web服务器框架前端需要一些基础库还需要一个工具来帮助我们开发时自动重启服务。我们来一一安装。在项目根目录下运行以下命令npm install express axios socket.io npm install --save-dev nodemon我来简单解释一下这几个包是干什么的express: 一个非常流行、极简的Node.js Web框架用来快速搭建我们的后端服务器和API接口。axios: 一个基于Promise的HTTP客户端我们用它来向后端的AI服务也就是DASD-4B Thinking镜像提供的API发送请求。socket.io: 实现实时、双向通信的库。有了它我们的网页前端才能和后端服务器“即时聊天”实现消息的实时推送而不是傻傻地不停刷新页面。nodemon: 一个开发工具。它会监视你项目文件的变动一旦你保存了代码它就自动帮你重启Node.js服务让你无需手动停止再启动开发体验丝滑很多。安装完成后你的package.json文件里dependencies和devDependencies部分就会看到这些包的名字和版本了。2. 构建后端Express服务器与API桥接环境搭好依赖装齐现在可以动手写代码了。我们先从后端服务器开始它是连接前端页面和AI对话能力的桥梁。2.1 创建基础服务器在项目根目录下创建一个名为server.js的文件。这个文件将是我们后端应用的入口。打开server.js写入以下代码来搭建一个最基础的Express服务器// server.js const express require(express); const app express(); const http require(http).createServer(app); const io require(socket.io)(http); const axios require(axios); // 设置端口默认3000 const PORT process.env.PORT || 3000; // 设置静态文件目录这样前端HTML/CSS/JS文件才能被访问 app.use(express.static(public)); // 一个简单的根路由用于测试服务器是否运行 app.get(/, (req, res) { res.send(Chat server is running. Please open the frontend page.); }); // 启动HTTP服务器 http.listen(PORT, () { console.log(Server is listening on http://localhost:${PORT}); });这段代码做了几件事引入了我们安装的express,socket.io,axios。创建了一个Express应用 (app) 和一个HTTP服务器 (http)。将socket.io绑定到这个HTTP服务器上。告诉Express所有放在public文件夹里的文件比如HTML、CSS、JavaScript都是静态资源可以直接通过浏览器访问。定义了一个简单的路由访问根路径时返回一条消息。最后让服务器在3000端口上监听。现在你可以尝试运行一下。在终端里输入node server.js如果看到Server is listening on http://localhost:3000的输出就说明服务器启动成功了。打开浏览器访问http://localhost:3000应该能看到那条测试消息。不过每次都手动node server.js有点麻烦。我们修改一下package.json让npm start命令使用nodemon来启动方便开发。打开package.json找到scripts部分修改或添加如下内容{ scripts: { start: nodemon server.js, dev: nodemon server.js } }现在你只需要在终端运行npm start或npm run dev服务就会启动并且在你修改server.js后自动重启。2.2 连接AI对话服务服务器跑起来了下一步就是让它能和Alibaba DASD-4B Thinking对话工具“说上话”。这里假设你已经通过CSDN星图镜像广场等平台部署好了该服务的镜像并获得了它的API访问地址例如http://your-mirror-address/v1/chat/completions和可能的API密钥。重要提示在实际开发中API密钥等敏感信息绝对不要直接写在代码里然后上传到公开的代码仓库。我们应该使用环境变量来管理。首先在项目根目录创建一个.env文件注意文件名以点开头并写入你的配置# .env AI_API_BASE_URLhttp://your-mirror-address/v1 AI_API_KEYyour_api_key_here然后我们需要一个包来读取这个文件。安装dotenvnpm install dotenv接着在server.js文件的最顶部添加这行代码来加载环境变量require(dotenv).config();现在我们来编写一个核心函数负责将用户的提问转发给AI服务并把AI的回复带回来。在server.js中添加以下函数// 与AI服务对话的函数 async function chatWithAI(userMessage) { try { const response await axios.post( ${process.env.AI_API_BASE_URL}/chat/completions, // 使用环境变量 { model: dasd-4b-thinking, // 模型名称根据实际镜像调整 messages: [{ role: user, content: userMessage }], stream: false // 先使用非流式简单起见 }, { headers: { Content-Type: application/json, Authorization: Bearer ${process.env.AI_API_KEY} // 使用环境变量 } } ); // 从响应中提取AI的回复文本 return response.data.choices[0]?.message?.content || AI没有返回有效内容。; } catch (error) { console.error(调用AI API失败:, error.message); return 抱歉对话服务暂时不可用: ${error.message}; } }这个函数接收用户的userMessage通过axios发送一个POST请求到AI服务的聊天接口然后解析返回的JSON数据提取出AI的回复内容。如果出错它会返回一个友好的错误信息。2.3 建立实时通信通道有了对话能力我们还需要一个“传声筒”在前端和后端之间实时传递消息。这就是socket.io的用武之地。在server.js中我们之前已经初始化了io对象。现在我们来监听客户端的连接事件并处理聊天消息。在启动服务器的代码之前添加以下代码// Socket.io 连接与事件处理 io.on(connection, (socket) { console.log(一个新的用户连接了:, socket.id); // 监听前端发来的 chat message 事件 socket.on(chat message, async (msg) { console.log(收到用户消息:, msg); // 1. 先告诉前端“AI正在思考...” socket.emit(ai thinking, AI正在思考...); // 2. 调用AI服务获取回复 const aiReply await chatWithAI(msg); // 3. 将AI回复以 chat message 事件发回给对应的前端 socket.emit(chat message, { sender: AI, text: aiReply }); }); // 监听断开连接事件 socket.on(disconnect, () { console.log(用户断开连接:, socket.id); }); });这段代码是后端实时逻辑的核心当有浏览器通过前端页面连接进来时触发connection事件。当这个连接收到前端发来的chat message事件里面包含了用户输入的文字时后端会先立刻发回一个ai thinking事件让前端界面显示“正在思考”的提示提升体验。然后调用我们刚才写的chatWithAI函数把用户消息传给AI服务。拿到AI的回复后再以一个chat message事件的形式附加上发送者是“AI”的标识发回给这个特定的浏览器连接。这样一个能接收问题、调用AI、并返回答案的后端就准备好了。3. 打造前端一个简单的聊天界面后端逻辑通了我们还需要一个让用户能输入和看到消息的网页。在项目根目录下创建一个public文件夹所有前端文件都放在这里。3.1 创建HTML结构在public文件夹里创建一个index.html文件。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDASD-4B Thinking 实时聊天/title link relstylesheet hrefstyle.css script src/socket.io/socket.io.js/script /head body div classcontainer header h1 DASD-4B Thinking 对话演示/h1 p classsubtitle基于Node.js Socket.io的实时聊天应用/p /header main !-- 消息显示区域 -- div classchat-box idchatBox !-- 消息会通过JavaScript动态添加到这里 -- div classmessage system p欢迎来到聊天室你可以开始向AI提问了。/p /div /div !-- 输入区域 -- div classinput-area textarea idmessageInput placeholder输入你的问题...按CtrlEnter发送 rows3 /textarea div classbutton-group button idsendButton发送消息/button button idclearButton清空对话/button /div div classstatus idstatus准备就绪/div /div /main /div script srcapp.js/script /body /html这个HTML结构很简单一个标题区一个用来显示聊天记录的chat-box一个包含输入框和按钮的input-area。注意我们通过script src/socket.io/socket.io.js/script引入了socket.io的客户端库这个库的路径是由我们后端的socket.io服务自动提供的。3.2 添加一些基础样式为了让界面好看点在public文件夹下创建style.css文件。/* style.css */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { width: 100%; max-width: 900px; background-color: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; } header { background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%); color: white; padding: 30px; text-align: center; } header h1 { font-size: 2.5rem; margin-bottom: 10px; } .subtitle { font-size: 1.1rem; opacity: 0.9; } main { padding: 30px; } .chat-box { height: 500px; border: 1px solid #e1e8ed; border-radius: 12px; padding: 20px; margin-bottom: 25px; overflow-y: auto; background-color: #fafbfc; } .message { margin-bottom: 20px; padding: 15px; border-radius: 18px; max-width: 80%; line-height: 1.5; animation: fadeIn 0.3s ease; } keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message.user { background-color: #4776E6; color: white; margin-left: auto; border-bottom-right-radius: 5px; } .message.ai { background-color: #e8f4fd; color: #333; border: 1px solid #d1e7ff; margin-right: auto; border-bottom-left-radius: 5px; } .message.system { background-color: #f0f0f0; color: #666; text-align: center; max-width: 100%; font-style: italic; border-radius: 10px; } .input-area { display: flex; flex-direction: column; gap: 15px; } textarea { width: 100%; padding: 18px; border: 2px solid #e1e8ed; border-radius: 12px; font-size: 1rem; resize: vertical; transition: border-color 0.3s; } textarea:focus { outline: none; border-color: #4776E6; } .button-group { display: flex; gap: 15px; } button { padding: 15px 30px; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; flex: 1; } #sendButton { background-color: #4776E6; color: white; } #sendButton:hover { background-color: #3a64cc; transform: translateY(-2px); } #clearButton { background-color: #f1f3f5; color: #666; } #clearButton:hover { background-color: #e1e5e9; } .status { text-align: center; padding: 10px; color: #666; font-size: 0.9rem; min-height: 1.5em; }3.3 编写前端交互逻辑最后也是最关键的一步让网页“活”起来。在public文件夹下创建app.js文件。// public/app.js document.addEventListener(DOMContentLoaded, function() { // 获取DOM元素 const messageInput document.getElementById(messageInput); const sendButton document.getElementById(sendButton); const clearButton document.getElementById(clearButton); const chatBox document.getElementById(chatBox); const statusDiv document.getElementById(status); // 连接到后端的Socket.io服务器 // 这里不需要指定端口因为前端页面和后端服务在同一个域名下 const socket io(); // 更新状态显示 function updateStatus(text) { statusDiv.textContent text; } // 在聊天框中添加一条消息 function appendMessage(sender, text, className) { const messageDiv document.createElement(div); messageDiv.className message ${className}; const textPara document.createElement(p); textPara.textContent text; messageDiv.appendChild(textPara); chatBox.appendChild(messageDiv); // 滚动到最新消息 chatBox.scrollTop chatBox.scrollHeight; } // 发送消息函数 function sendMessage() { const text messageInput.value.trim(); if (!text) { alert(请输入消息内容); return; } // 1. 在本地聊天框显示用户消息 appendMessage(user, text, user); // 2. 通过socket.io发送 chat message 事件到服务器 socket.emit(chat message, text); // 3. 清空输入框 messageInput.value ; messageInput.focus(); // 焦点重新回到输入框 updateStatus(消息已发送等待AI回复...); } // 发送按钮点击事件 sendButton.addEventListener(click, sendMessage); // 输入框按 CtrlEnter 发送 messageInput.addEventListener(keydown, function(e) { if (e.key Enter e.ctrlKey) { sendMessage(); e.preventDefault(); // 防止输入框换行 } }); // 清空聊天记录 clearButton.addEventListener(click, function() { chatBox.innerHTML div classmessage systemp对话已清空。/p/div; updateStatus(对话已清空); }); // 监听服务器发来的事件 // 监听服务器发来的普通聊天消息 socket.on(chat message, function(data) { // data 应该是一个对象例如 { sender: AI, text: ... } const sender data.sender || AI; const text data.text || data; // 兼容字符串格式 appendMessage(sender.toLowerCase(), text, sender.toLowerCase()); updateStatus(AI回复完成); }); // 监听“AI正在思考”状态 socket.on(ai thinking, function(text) { updateStatus(text); }); // Socket连接状态监听 socket.on(connect, function() { console.log(已连接到服务器); updateStatus(已连接到聊天服务器); }); socket.on(disconnect, function() { console.log(与服务器断开连接); updateStatus(连接已断开请刷新页面); }); // 初始化聚焦到输入框 messageInput.focus(); updateStatus(准备就绪请输入消息。); });这个JavaScript文件做了所有前端交互工作建立连接const socket io();这行代码会自动尝试连接到提供当前页面的服务器也就是我们的localhost:3000并建立一个WebSocket长连接。发送消息当用户点击发送或按CtrlEnter时sendMessage函数会将输入框的文字显示在聊天框并通过socket.emit(chat message, text)将消息发送给后端服务器。接收消息通过socket.on(chat message, ...)和socket.on(ai thinking, ...)监听后端发回的事件并更新聊天界面和状态栏。处理UIappendMessage函数负责把新消息漂亮地添加到聊天记录里并自动滚动到底部。4. 运行与测试你的聊天应用所有代码都写完了让我们来看看成果。启动后端服务确保你在项目根目录dasd-chat-app运行npm start终端会显示Server is listening on http://localhost:3000并且因为用了nodemon它会一直运行并监听文件变化。打开前端页面打开你的浏览器访问http://localhost:3000。你会看到一个带有渐变背景的聊天界面。开始对话在底部的文本框中输入一个问题比如“用JavaScript写一个Hello World程序”然后点击“发送消息”按钮或者按CtrlEnter。你会立刻看到你的问题以蓝色气泡用户消息显示在聊天框中。状态栏会变成“AI正在思考...”。稍等片刻AI的回复就会以灰色气泡AI消息的形式显示出来。测试实时性你可以打开两个浏览器窗口同时访问http://localhost:3000。在一个窗口发送消息观察另一个窗口理论上它不会自动更新因为我们设计的是点对点通信。如果要实现聊天室效果需要将socket.emit改为io.emit广播消息。不过这足以验证前后端的实时连接是畅通的。整个流程走下来你应该能感受到从环境搭建到实现一个具备基本功能的实时对话应用其实每一步都有清晰的路径。这个项目虽然简单但涵盖了现代Web开发中几个非常核心的概念Node.js服务器、RESTful API调用、以及基于WebSocket的实时通信。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。