基于JQ使用原生js构造一个自动回复随机消息的机器人

某些业务会使用到页面里存在一个机器人,类似于假客服一样,可以回复游客的问题.

那么如何自己写一个自动回复消息的机器人呢?

源码献上

/**
* 基于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>