基于Ajax的聊天机器人功能的实现(2)

// 为发送按钮绑定鼠标点击事件 $('#btnSend').on('click', function() { var text = $('#ipt').val().trim() if (text.length <= 0) { return $('#ipt').val('') //用户输入的内容为空 } // 如果用户输入了聊天内容，则将聊天内容追加到页面上显示 $('#talk_list').append('<li><img src="https://www.jb51.net/img/person02.png" /> <span>' + text + '</span></li>') $('#ipt').val('')//文本为空 // 重置滚动条的位置 resetui() // 发起请求，获取聊天内容 getMsg(text) })

接下来就是机器人的回复内容啦：

用一个getMsg函数封装 传递放入参数就是用户输入的内容

下一些Ajax的get获取内容，根据文档提供的地址:3006/api/robot

当 res.message === 'success' 表示获取聊天信息成功 就接受聊天信息，将信息追加到页面

// 获取聊天机器人发送回来的消息 function getMsg(text) { $.ajax({ method: 'GET', url: ' :3006/api/robot', data: { spoken: text }, success: function(res) { // console.log(res) if (res.message === 'success') { // 接收聊天消息 var msg = res.data.info.text $('#talk_list').append('<li><img src="https://www.jb51.net/img/person01.png" /> <span>' + msg + '</span></li>') // 重置滚动条的位置 resetui() // 调用 getVoice 函数，把文本转化为语音 getVoice(msg) } } }) }

然后就是将文本转化为语音播放功能

同样的封装一个函数getVoice() 传递的参数是接受到的机器人的聊天消息msg

// 把文字转化为语音进行播放 function getVoice(text) { $.ajax({ method: 'GET', url: ' :3006/api/synthesize', data: { text: text }, success: function(res) { // console.log(res) //下面的值可以通过console.log(res)输出查看里面的属性值 if (res.status === 200) { // 播放语音 路径 $('#voice').attr('src', res.voiceUrl) } } }) }

最后一个功能就是用户按回车也可以发送消息

// 为文本框绑定 keyup 事件 $('#ipt').on('keyup', function(e) { // console.log(e.keyCode) if (e.keyCode === 13) { // console.log('用户弹起了回车键') $('#btnSend').click() } })

大家赶快去试试吧

到此这篇关于基于Ajax的聊天机器人的文章就介绍到这了,更多相关Ajax聊天机器人内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！