ChatSSE浏览器端SSE消息获取

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

1. 引入前端资源：

   1. <script src="https://g.alicdn.com/beebotfe/chat-sdk/1.0.7/ChatSSE.js"></script>

   2. <script src="https://g.alicdn.com/beebotfe/chat-sdk/1.0.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