Ajax聊天机器人实现

效果:

实现步骤

1. 将用户输入的内容渲染到聊天窗口
2. 发起请求获取聊天消息
3. 将机器人的聊天内容转为语音
4. 通过
5. 使用回车键发送消息

主要的javascript代码

$(function () {
   // 初始化右侧滚动条
   // 这个方法定义在scroll.js中
   resetui()

   //发送按钮
   $('#btnSend').on('click', function () {
       var text = $('#ipt').val().trim();
       if (text.length <= 0) {
           return $('#ipt').val();
       }
       //如果用户输入了聊天内容，则追加消息
       $('#talk_list').append('<li class="right_word"><img src ="img/person02.png" /> <span>' + text + '</span></li > ');
       // 在清空输入框
       $('#ipt').val('');
       // 重置滚动条
       resetui();
       getmsg(text);
   })

   //获取聊天机器人发送回来的消息
   function getmsg(text) {
       $.ajax({
           method: "GET",
           url: "http://www.liulongbin.top: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 class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li > ');
               }
               // 重置滚动条
               resetui();
               //调用 文字转语言
               getVoioce(msg);
           }
       });
   }
   // 文字转语言
   function getVoioce(text) {
       $.ajax({
           method: "GET",
           url: "http://www.liulongbin.top:3006/api/synthesize",
           data: {
               text: text
           },
           success: function (res) {
               // console.log(res);
               if (res.status === 200) {
                   $('#voioce').attr('src', res.voiceUrl);
               }
           }
       });
   }

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