自动回复文字、图片、视频的JS聊天机器人框架BotUI

来源:https://www.sucaihuo.com/js/2519.html 2017-07-23 23:58浏览(3245) 收藏

一款自动回复文字、图片、视频的JS聊天机器人框架BotUI,可以自由设置多种选项、触发关键词、输入框等内容,聊天内容或范围也可以自由设置,回复内容可以是文字、图片(GIF亦可)、视频,感觉应用的场景还是挺多的,自动问答客服什么的都可以做出来,喜欢的童鞋请收下吧。
自动回复文字、图片、视频的JS聊天机器人框架BotUI
分类:表单代码 > 输入框 难易:初级
查看演示 下载资源 下载积分: 40 积分

页面的head部分,需要引入多个CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="dist/botui.min.css">
<link type="text/css" rel="stylesheet" href="dist/botui-theme-default.css">

页面的body部分,结构比较简单,设置好聊天机器人的对话容器即可,代码如下:

<div class="htmleaf-container">
	<div class="htmleaf-content">
		<div class="botui-app-container" id="home-demo">
		      <bot-ui></bot-ui>
		</div>
	</div>
</div>

页面的底部,需远程调用vue.js文件,这里强调一下,不能用高版本的vue,否则回复图片无效,接着引入一个botui插件,启用插件并设置好预回复的内容等等,代码如下:

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript" src="dist/botui.min.js"></script>
<script type="text/javascript">
	var botui = BotUI('home-demo');

	botui.message.add({
	  content: '大家好,我是千颂伊!'
	}).then(function () {
	  return botui.message.add({
	    delay: 1500,
	    content: '![千颂伊](http://img3.duitang.com/uploads/blog/201402/15/20140215120608_BzmRN.gif)'
	  });
	}).then(function () {
	  return botui.action.button({
	    delay: 1000,
	    action: [{
	      text: '继续聊 💕',
	      value: 'sure'
	    }, {
	      text: '下回聊 💔',
	      value: 'skip'
	    }]
	  });
	}).then(function (res) {
	  if(res.value == 'sure') {
	    tutorial();
	  }
	  if(res.value == 'skip') {
	    end();
	  }
	});

	var tutorial = function () {
	  botui.message.add({
	    delay: 1000,
	    content: "太棒了,让我们简单互动一下吧。"
	  }).then(function () {
	    return botui.message.add({
	      delay: 1000,
	      content: '请问我男票是谁?(输入名字后按回车键!)'
	    });
	  }).then(function () {
	    return botui.action.text({
	      delay: 800,
	      action: {
	        value: '都敏俊',
	        placeholder: '千颂伊的男朋友'
	      }
	    });
	  }).then(function (res) {
	    return botui.message.bot({
	      delay: 500,
	      content: '没错,就是' + res.value + '!'
	    });
	  }).then(function (res) {
	    return botui.message.bot({
	      delay: 1400,
	      content: '별에서 온 그대 ![合影](http://www.hanyouwang.com/uploads/2014/0303/20140303032047599.jpg)'
	    });
	  }).then(function (res) {
	    return botui.message.add({
	      delay: 1200,
	      type: 'embed',
	      content: 'http://player.youku.com/embed/XNjc4ODY5NzY4'
	    });
	  }).then(function (res) {
	    return botui.message.bot({
	      delay: 2500,
	      content: '祝天下有情人终成眷属!'
	    });
	  }).then(function (res) {
	    return botui.message.bot({
	      delay: 3888,
	      content: '我为BotUI带盐(注意:vue.js为2.0.5)'
	    });
	  }).then(end);
	};

	var end = function () {
	  botui.message.add({
	    delay: 3888,
	    content: '!(book) [帮助文档](https:///docs.botui.org),查看 [示例](https:///examples.botui.org) 或 [点击浏览代码](https://github.com/moinism/botui)'
	  });
	};
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2