【集成示例】网页端

效果展示

概览

1. 调用ApplyForStreamAccessToken接口。参考文档：ApplyForStreamAccessToken - 获取流式调用的连接信息

2. ApplyForStreamAccessToken接口，返回的连接签名信息有效期2小时，必须在到期前重新获取

3. 接收到用户发送的消息，并调用自定义的代理SSE接口

4. 计算会话接口签名。参考文档：会话接口签名

5. 调用会话接口，监听SSE事件，获取大模型流式输出。参考文档：流式会话接口

6. 大模型流式接口会多次返回，由前端SDK解析并渲染大模型的回复。前端SDK

示例

示例工程中的参数

获取智能对话机器人配置

1. 获取机器人id，地址：智能对话机器人控制台

   1. 如果您购买的为 敏捷版（千问），则从左侧菜单“构建”标签进入页面后，如图查看机器人id：

      

   2. 如果您购买的为 其它版本（千问），则从左侧菜单“机器人”标签进入页面后，创建机器人，发布机器人（如无发布按钮则跳过本步骤），如图查看机器人id：

      

2. 获取业务空间AgentKey，地址：业务空间管理

   

3. 阿里云账号AKSK获取，地址：AccessKey

前端SDK使用常见问题

1. 如何支持Post请求

   1. requests.send方法中写请求处理，返回Promise结果，Promise结果要求将对话机器人的返回结果原样返回，注意首字母要保持大写。

2. 对头像等样式不满意，如何自定义样式

   1. 通过css选择器对头像等进行样式覆盖

3. 头像没有展示

   1. ChatSDK的config.avatarWhiteList参数需要配置下要展示头像的卡片列表

4. 点赞点踩没有展示

   1. ChatSDK需要配置requests.evaluate请求方法，并且检查下答案经过isvParser转换后的数据的meta.evaluable是否为true

      

4. 假如返回结果经过后端处理，将首字母改为了小写，则isvParser处理前需要先将首字母改为大写，处理代码参考

   function upperCaseBotMsg(msg) {
     let newMsg = msg;
     if (msg instanceof Array) {
       newMsg = msg.map((item) => {
         return upperCaseBotMsg(item);
       });
     } else if (typeof msg == 'object' && msg) {
       newMsg = {};
       for (const key in msg) {
         newMsg[key.substring(0, 1).toUpperCase() + key.substring(1)] = upperCaseBotMsg(msg[key]);
       }
     }
     return newMsg;
   }