通义千问流式回复api调用

Object_summer_24

293人浏览 · 2025-10-21 10:53:40

Object_summer_24 · 2025-10-21 10:53:40 发布

1、首先要登录阿里云百炼控制台去获取一个apikey用于api接口的调用

地址：https://bailian.console.aliyun.com/?tab=home&utm_content=se_1022043684#/home

2、登录进入控制台之后，左侧菜单最底下找到密钥管理并创建密钥

3、这样就获取到了密钥了，目前版本只需要一个密钥就可以调用api了，api文档里面有示例代码如何调用流式回复。

4、这是一个简单的demo页面，把密钥换成你自己的就可以直接在浏览器打开体验了。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流式回复演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .chat-container {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            height: 500px;
            overflow-y: auto;
            margin-bottom: 20px;
        }
        .message {
            margin: 10px 0;
            padding: 10px 15px;
            border-radius: 6px;
            max-width: 80%;
        }
        .user-message {
            background-color: #007bff;
            color: white;
            margin-left: auto;
        }
        .assistant-message {
            background-color: #f1f1f1;
            color: #333;
        }
        .input-area {
            display: flex;
            gap: 10px;
        }
        #user-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 12px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        .loading {
            color: #666;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>流式回复演示</h1>
    <div class="chat-container" id="chat-container"></div>
    <div class="input-area">
        <input type="text" id="user-input" placeholder="请输入消息...">
        <button id="send-btn">发送</button>
    </div>

    <script>
        const chatContainer = document.getElementById('chat-container');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');
        const apiKey = '这里替换为你的密钥'; // API Key
        const baseUrl = 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions';
        const model = 'qwen-plus';

        // 发送消息
        sendBtn.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });

        async function sendMessage() {
            const message = userInput.value.trim();
            if (!message) return;

            // 添加用户消息到界面
            addMessageToUI('user', message);
            userInput.value = '';
            sendBtn.disabled = true;

            // 添加加载状态
            const loadingElement = addLoadingState();

            try {
                // 构建请求参数
                const requestData = {
                    model: model,
                    messages: [
                        { role: 'system', content: '你是一个 helpful 的助手。' },
                        { role: 'user', content: message }
                    ],
                    stream: true,
                    stream_options: { include_usage: true }
                };

                // 发送请求
                const response = await fetch(baseUrl, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${apiKey}`,
                        'Content-Type': 'application/json',
                        'Accept': 'text/event-stream'
                    },
                    body: JSON.stringify(requestData)
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                // 移除加载状态
                chatContainer.removeChild(loadingElement);

                // 创建助手消息元素
                const assistantMessageElement = addMessageToUI('assistant', '');
                
                // 处理流式响应
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let complete = false;

                while (!complete) {
                    const { done, value } = await reader.read();
                    complete = done;

                    if (value) {
                        const chunk = decoder.decode(value, { stream: true });
                        const lines = chunk.split('\n');
                        
                        for (const line of lines) {
                            if (line.startsWith('data: ')) {
                                const data = line.slice(5).trim();
                                if (data === '[DONE]') {
                                    complete = true;
                                    break;
                                }
                                
                                try {
                                    const json = JSON.parse(data);
                                    // 提取助手回复内容
                                    const content = json.choices[0]?.delta?.content;
                                    if (content) {
                                        // 实时更新UI
                                        assistantMessageElement.textContent += content;
                                        // 滚动到底部
                                        chatContainer.scrollTop = chatContainer.scrollHeight;
                                    }
                                } catch (e) {
                                    console.error('解析JSON失败:', e);
                                }
                            }
                        }
                    }
                }
            } catch (error) {
                console.error('请求错误:', error);
                // 显示错误消息
                chatContainer.removeChild(loadingElement);
                addMessageToUI('assistant', `发生错误: ${error.message}`);
            } finally {
                sendBtn.disabled = false;
                // 滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        }

        // 添加消息到UI
        function addMessageToUI(role, content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${role}-message`;
            messageDiv.textContent = content;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            return messageDiv;
        }

        // 添加加载状态
        function addLoadingState() {
            const loadingDiv = document.createElement('div');
            loadingDiv.className = 'message assistant-message loading';
            loadingDiv.textContent = '正在思考...';
            chatContainer.appendChild(loadingDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            return loadingDiv;
        }
    </script>
</body>
</html>

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

冻库低温环境下的机器人搬运技术测评

DAMO开发者矩阵

console.log不可用解决

总的来说，这两个脚本共同构建了一个双层检测体系：第一个脚本用于识别"谁在访问"（即生成设备指纹），第二个脚本用于判断"是不是真人"（即检测机器人）。它们是Cloudflare机器人管理系统中不可或缺的一环。

DAMO开发者矩阵

ROS2 从零到一完整学习

ROS2 = Robot Operating System 2，机器人开发中间件，不是真正操作系统，运行在 Linux（主力 Ubuntu）上。作用：统一机器人硬件驱动、传感器通信、算法调度、仿真、上位机交互，支持机械臂、移动小车、人形机器人、自动驾驶。对比 ROS1：抛弃 Master 单点故障，采用 DDS 分布式通信，支持多机、实时性、嵌入式（Jetson / 单片机）。