文档

ChatSSE浏览器端SSE消息获取

更新时间:

ChatSSE用于在浏览器端对接通义版本的智能对话机器人的sse对话消息,注意使用ChatSSE拿到消息后,还需要通过ChatUI或者自定义方法将消息渲染到页面上,最终页面才能正常展示消息。

  1. 引入前端资源:

    1. <script src="https://g.alicdn.com/code/npm/@ali/chatui-sdk/6.1.7/ChatSSE.js"></script>

    2. <script src="https://g.alicdn.com/code/npm/@ali/chatui-sdk/6.1.7/isvParser.js"></script>

  2. 示例代码

const url = 'https://alime-ws.aliyuncs.com/sse/paas4Json/xx/xx/xx/1706787526795';

// SessionId,保持上下文使用,假如页面存在重置等动作,则需要自己重新生成
const SessionId = uuid();

ChatSSE.fetchBeebotSSE({
  // url使用官方文档中的sse流式接口,需要修改为自己生成的地址
  // 生成过程参考文档:https://help.aliyun.com/zh/beebot/intelligent-dialogue-robot-tongyi-version/sse
  url: 'https://alime-ws.aliyuncs.com/sse/paas4Json/xx/xx/xx/1706787526795',
  // action固定为TongyiBeebotChat
  action: 'TongyiBeebotChat',
  // 传给后端的参数,参考https://help.aliyun.com/zh/beebot/intelligent-dialogue-robot-tongyi-version/tongyibeebotchat
  json: {
    // 机器人实例Id,根据实际使用的机器人进行替换
    "InstanceId": "chatbot-cn-xxxx",
    // 用户query问法
    "Utterance": "日常通用知识",
    // SessionId, 会话ID,用于标识一个访问者的会话和保持上下文信息
    SessionId: SessionId,
    // 更多其他参数,请根据需求参考文档传入
  },
  onJsonText(data) {
    // 接收到消息的回调,一次请求,会触发多次onJsonText调用
    console.log('receiver:', data);
    onMessage(data);
  },
  onerror(err) {
    // 接收消息出错时处理
    console.log('error', err);
  }
})

const msgs = [];
function onMessage(data) {
  const msg = window.isvParser({data});
  const msgId = msg._id;
  // bot为chatui中创建的机器人实例,参考文档:https://chatui.io/sdk/getting-started
  // 假如不使用chatui渲染消息,则自己实现更新消息和追加消息的逻辑即可
  if (msgs.includes(msgId)){
    bot.getCtx().updateMessage(msgId, msg);
  }
  else {
    bot.getCtx().appendMessage(msg);
  }
}

function uuid() {
  var temp_url = URL.createObjectURL(new Blob());
  var uuid = temp_url.toString(); // blob:https://xxx.com/b250d159-e1b6-4a87-9002-885d90033be3
  URL.revokeObjectURL(temp_url);
  return uuid.substr(uuid.lastIndexOf("/") + 1);
}

常见问题

  1. 发送消息后,仅返回了一次响应

    1. 注意检查参数中InstanceId是否改为实际使用的机器人的id

    2. url中的token确认是否有效

  2. 如何使用Node服务收发SSE消息

    1. 将ChatSDK.js下载到本地,在node中引用这个文件,然后调用其中API

  3. 更新记录参考ChatSDK的Changelog

  • 本页导读 (0)