某些业务会使用到页面里存在一个机器人,类似于假客服一样,可以回复游客的问题.
那么如何自己写一个自动回复消息的机器人呢?
源码献上
/**
* 基于jq的自动对话机器人
* @param {Object} parmas 初始化配置
* parmas.talkModal 对话框弹出主体 classname
* parmas.talkBox 对话框内容区域 classname
* parmas.awakeBtn 唤醒按钮 用于显示对话框主体 classname
* parmas.exitBtn 隐藏按钮 用户隐藏对话框按钮 classname
* parmas.sendBtn 发送消息按钮 classname
* parmas.autoConent 自动对话框内容 Array
* parmas.input 内容输入框 classname
* parmas.openReply 在打开的时候自动回复一句 true or false 默认true
* parmas.replyName 自动回复的dom类名 classname
* parmas.userName 用户回复的dom类名 classname
* parmas.isChangeBtnStatus 是否在点击 唤醒和隐藏的时候隐藏相反的按钮 true or false 默认true
* parmas.fixedMsg 固定回复语句 string or dom
*
*/
function Talk(parmas) {
if (typeof $ === "undefined") {
throw new Error("Please load JQ API before use the Talk function!")
}
this.talkModal = $('.' + parmas.talkModal);
this.talkContent = $("." + parmas.talkBox)
this.awakeBtn = $("." + parmas.awakeBtn)
this.autoConent = parmas.autoConent || ['你好', "欢迎你", "谢谢", "再见"]
this.exitBtn = $("." + parmas.exitBtn)
this.input = $("." + parmas.input)
this.sendBtn = $("." + parmas.sendBtn)
this.contentDefaultHeight = 0 // 对话框内容区域高度
this.autoTimer = null; // 自动回复定时器
this.autoIndexArr = Array.from({ length: this.autoConent.length }, (v, k) => k) //随机索引,先默认数组索引下标排列
this.contentIndex = 0;
this.openReply = parmas.openReply !== undefined ? parmas.openReply : true;
this.fixedMsg = parmas.fixedMsg || "收到";
this.isFixedReply = false;
this.changeBtnStatus = parmas.isChangeBtnStatus !== undefined ? parmas.isChangeBtnStatus : true
this.replyClassName = parmas.replyName || 'reply'
this.userClassName = parmas.userName || 'customer-txt'
// 检查绑定的dom是否符合规范
this.isInvalid()
// 绑定监听事件
this.addEvent()
// 生成自动回复索引
this.randomIndex()
}
// 检查绑定的dom是否符合规范
Talk.prototype.isInvalid = function () {
if (this.talkModal.length === 0) {
throw new Error('The TalkModal is not found.Please check out the binding TalkModel.')
}
if (this.talkContent.length === 0) {
throw new Error("The TalkModal's contentBox is not found.Please check out the binding TalkModal's contentBox.")
}
if (this.awakeBtn.length === 0) {
throw new Error("The TalkModal's awake Button is not found.Please check out the binding TalkModal's awake Button.")
}
if (this.input.length === 0) {
throw new Error("The TalkModal's input is not found.Please check out the binding TalkModal's input.")
}
if (this.talkModal.length !== 1) {
throw new Error("The TalkModal is not unique classname,Please check out the dom's classname.")
}
if (this.talkContent.length !== 1) {
throw new Error("The TalkModal's contentBox is not unique classname,Please check out the dom's classname.")
}
if (this.awakeBtn.length !== 1) {
throw new Error("The TalkModal's awake Button is not unique classname,Please check out the dom's classname.")
}
if (this.input.length !== 1) {
throw new Error("The TalkModal's input is not unique classname,Please check out the dom's classname.")
}
}
// 绑定事件
Talk.prototype.addEvent = function () {
// 唤醒对话框按钮绑定事件
this.awakeBtn.click(function (e) {
e.stopPropagation || e.stopPropagation()
this.showModal()
}.bind(this))
// 关闭对话框按钮 绑定事件
this.exitBtn.click(function (e) {
e.stopPropagation || e.stopPropagation()
this.hiddenModal()
}.bind(this))
// 发送消息按钮 绑定事件
this.sendBtn.click(function (e) {
e.stopPropagation || e.stopPropagation()
this.sendMsg()
}.bind(this))
// 输入框按钮监听回车
this.input.on("keypress", function (event) {
if (event.keyCode == "13") {
this.sendMsg()
}
}.bind(this))
}
// 显示对话框
Talk.prototype.showModal = function () {
this.talkModal.fadeIn(300)
if (this.changeBtnStatus) {
this.awakeBtn.hide()
this.exitBtn.show()
}
if (this.openReply) {
this.autoReply()
}
if (this.contentDefaultHeight === 0) {
this.contentDefaultHeight = this.talkContent.height()
}
}
// 隐藏对话框
Talk.prototype.hiddenModal = function () {
clearTimeout(this.autoTimer)
this.talkModal.fadeOut(0)
if (this.changeBtnStatus) {
this.exitBtn.hide()
this.awakeBtn.show()
}
}
// 用户主动发送消息
Talk.prototype.sendMsg = function () {
var val = this.input.val()
if (!val || !val.trim()) {
return
}
this.appendContent(this.userClassName, val)
this.input.val('')
this.isFixedReply = false
// ...这里可以判断用户输入信息进行其他处理
this.dealMsg(val)
}
/**
* 处理用户输入信息 根据信息来回复
* @param {String} msg 用户输入信息
*/
Talk.prototype.dealMsg = function (msg) {
// ...do Ajax or on the msg,according to directed reply
if (msg === "你好") {
var str = '我不好'
this.autoReply(str)
return
}
if (msg === "18888888888") {
this.isFixedReply = true
}
// auto reply
this.autoReply()
}
/**
* 追加文本,每次聊天后滚动聊天区域
* @param {String} classname 回复的类名 用于显示不同的对话
* @param {String} content 内容,即聊天内容
*/
Talk.prototype.appendContent = function (classname, content) {
this.talkContent.append('<div><p class="' + classname + '">' + content + '</p></div>')
this.srcollContent()
}
// 滚动聊天内容区域
Talk.prototype.srcollContent = function () {
var height = this.talkContent.prop("scrollHeight")
if (this.contentDefaultHeight > height) {
return
}
this.talkContent.animate({ scrollTop: height }, 400);
}
/**
* 机器人自动回复
* @param {String} str 需要回复的内容 若没有则自动回复
*/
Talk.prototype.autoReply = function (str) {
clearTimeout(this.autoTimer)
this.autoTimer = setTimeout(function () {
if (this.isFixedReply) {
return this.appendContent(this.replyClassName, this.fixedMsg)
}
if (str) {
return this.appendContent(this.replyClassName, str)
}
var content = this.autoConent[this.autoIndexArr[this.contentIndex]]
this.contentIndex += 1
this.appendContent(this.replyClassName, content)
if (this.contentIndex === this.autoConent.length) {
this.randomIndex()
this.contentIndex = 0
}
}.bind(this), 1500)
}
// 生成随机的消息索引数组
Talk.prototype.randomIndex = function () {
var len = this.autoConent.length;
var temp = this.autoIndexArr
for (var i = 0; i < len + 10; i++) {
var rdm = Math.floor(Math.random() * temp.length)
temp.push(temp[rdm])
temp.splice(rdm, 1)
}
if (temp[0] === this.autoIndexArr[len - 1]) {
this.randomIndex()
} else {
this.autoIndexArr = temp
}
}
如何自己定制机器人回复内容
只需要重写Talk函数的dealMsg函数即可,默认第一个参数是用户输入的内容,根据第一个参数进行判断去调用this.autoReply(str)即可,若不传str则默认是以预设的自动回复语句去回复.
若你是否重写dealMsg,在Talk构造函数之后去实例化
- 实例化
var talk = new Talk({
talkModal: "modal", // 对话框主体
talkBox: "talk-content", // 对话框内容区域
awakeBtn: "awake", // 唤醒对话框按钮
exitBtn: "exit", // 关闭对话框按钮
input: "ipt", // 对话框input
sendBtn: "send", // 发送信息按钮 // 自动回复的语句可以包含html字符
replyName: "reply", //回复的类名 用于样式
userName: "msg", // 用户使用的类名 用于样式
openReply: false, // 打开自动回复一句
})
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Talk</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 请在jq加载后，加载Talk,引入文件方式 ,或者 直接把函数复制到script里即可-->
<script src="./Talk.js"></script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
.header {
padding: 20px;
text-align: center;
font-size: 24px;
background-color: antiquewhite;
}
.content {
text-align: center;
font-size: 24px;
height: 1000px;
line-height: 500px;
background-color: aquamarine;
}
.fixed-wrap {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
30px;
height: 100px;
background-color: blanchedalmond;
}
.btn {
text-align: center;
padding: 3px 5px;
font-size: 14px;
cursor: pointer;
}
.exit {
display: none;
}
.modal {
position: absolute;
display: none;
left: -300px;
top: -70px;
padding: 10px;
300px;
height: 240px;
box-sizing: border-box;
background-color: burlywood;
}
.talk-content {
height: 200px;
overflow-y: auto;
}
.talk-content div {
overflow: hidden;
}
.talk-content p {
margin-bottom: 10px;
padding: 8px;
max- 80%;
word-break: break-all;
font-size: 12px;
color: #000;
border-radius: 10px;
}
.talk-content span {
color: red;
}
.msg {
float: right;
background-color: #b7e6e7;
}
.reply {
float: left;
background-color: #fff;
}
.control {
position: absolute;
left: 10px;
bottom: 5px;
height: 25px;
}
.control input,
.control button {
outline: none;
height: 100%;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="fixed-wrap">
<div class="awake btn">展开机器人</div>
<div class="exit btn">关闭机器人</div>
<div class="modal">
<div class="talk-content">
</div>
<div class="control">
<input type="text" class="ipt">
<button class="send">发送</button>
</div>
</div>
</div>
</body>
<script>
var talk = new Talk({
talkModal: "modal", // 对话框主体
talkBox: "talk-content", // 对话框内容区域
awakeBtn: "awake", // 唤醒对话框按钮
exitBtn: "exit", // 关闭对话框按钮
input: "ipt", // 对话框input
sendBtn: "send", // 发送信息按钮 // 自动回复的语句可以包含html字符
replyName: "reply", //回复的类名 用于样式
userName: "msg", // 用户使用的类名 用于样式
openReply: false, // 打开自动回复一句
})
</script>
</html>