您现在的位置是：网站首页> HTML&JS
chatUI Pro开发智能聊天工具
- HTML&JS
- 2023-06-16
- 730人已阅读
<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<title>滴答小爱</title>
<link rel="stylesheet" href="//g.alicdn.com/chatui/sdk-v2/0.2.4/sdk.css">
</head>
<body>
<div id="root"></div>
<script src="//g.alicdn.com/chatui/sdk-v2/0.2.4/sdk.js"></script>
<script src="//g.alicdn.com/chatui/extensions/0.0.7/isv-parser.js"></script>
<script src="js/setup.js"></script>
<script src="js/jquery-3.6.3.min.js"></script>
<script src="//g.alicdn.com/chatui/icons/0.3.0/index.js" async></script>
</body>
</html>
创建setup.js实现chatUI Pro与后端通信交换
var bot = new ChatSDK({
config: {
// navbar: {
// title: '滴答小爱'
// },
robot: {
avatar: 'images/chat.png'
},
// 用户头像
user: {
avatar: 'images/user.png',
},
// 首屏消息
messages: [
{
type: 'text',
content: {
text: '您好，小爱为您服务，请问有什么可以帮您的？'
}
}
],
// 快捷短语
// quickReplies: [
// { name: '健康码颜色',isHighlight:true },
// { name: '入浙通行申报' },
// { name: '健康码是否可截图使用' },
// { name: '健康通行码适用范围' },
// ],
// 输入框占位符
placeholder: '输入任何您想询问的问题',
},
requests: {
send: function (msg) {
if (msg.type === 'text') {
return {
url: '/ask',
data: {
question: msg.content.text
}
};
}
}
},
handlers: {
/**
*
* 解析请求返回的数据
* @param {object} res - 请求返回的数据
* @param {object} requestType - 请求类型
* @return {array}
*/
parseResponse: function (res, requestType) {
// 根据 requestType 处理数据
if (requestType === 'send' && res.code==0) {
// 用 isv 消息解析器处理数据
$.ajaxSettings.async=false;
var answer="";
var isOK=false;
while(!isOK){
$.get("/answer",{uuid:res.data},function(result){
console.log(result.data)
if(null != result.data){
isOK=true;
answer=result.data;
}
},"json");
if(!isOK){
sleep(5000);
}
}
$.ajaxSettings.async=true;
return [{"_id":res.data,type:"text",content:{text:answer},position:"left"}];
}
},
},
});
function sleep(n) { //n表示的毫秒数
var start = new Date().getTime();
while (true) {
if (new Date().getTime() - start > n) {
break;
}
}
}
bot.run();