ajax练习——聊天机器人

一、效果演示

 

二、代码

html

    
    
    
    
    
    
    
    

    

        
        

        
胖虎
        
        
        
        

            

                

                    
                    嗨，最近想我没有？
                

            
            

        
        
        

            
            
            发送
        
    
    
    
    

    

css

.warp{
    position: fixed;
    top: 20px;
    bottom: 20px;
    transform: translateX(-50%);
    left: 50%;
    width: 450px;
    box-shadow: #0000003b 0 0 9px 1px;
    border-radius: 10px;
    overflow: hidden
    }
header{
    display: flex;
    justify-content: space-between;
    height: 55px;
    background-image: linear-gradient(to right, #f98a83 , #b388f6);
    }
h3{
    line-height: 55px;
    margin-left: 25px;
    color: white;
    font-size: 18px;
    }

img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    }
header img{
    margin-top: 8px;
    margin-right: 25px;
    }
.main{
    width: 100%;
    background-color: #f4f3f3;
    position: absolute;
    overflow: auto;
    padding:0 20px 0;
    bottom: 55px;
    top: 55px;
    }
.talk_list li{
    display: flex;
    margin: 20px 0 30px;
    }
.talk_list span::before{
    top: -3px;
    position: absolute;
    }
.left_word span::before{
    left: -11px;
    content: url("E:/前端学习/教学素材/黑马ajax/day1/code/聊天机器人/img/corner01.png");
    }
.talk_list span{
    position: relative;
    display: inline-block;
    line-height: 22px;
    padding: 12px 15px 12px;
    font-size: 16px;
    border-radius: 10px;
    max-width: 290px;
    word-wrap:break-word;/*强制换行*/
    }
.left_word span {
    color: white;
    background-color: #fe9697;
    margin-left: 13px;
    }
footer{
    height: 55px;
    }
.right_word{
   display: flex;
    flex-direction: row-reverse;
    }
.right_word span{
    background-color: #fff;
    margin-right: 15px;
    }
.right_word span::before{
    right: -11px;
    content: url("E:/前端学习/教学素材/黑马ajax/day1/code/聊天机器人/img/corner02.png");
    }
footer{
    background-color: #fff;
    padding: 0 15px;
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    height: 55px;
    
    }
footer input,
footer button{
    height: 37px;
    border: 0;
    border-radius: 5px;
    }
footer input{
    padding: 8px;
    flex:1;
    margin: 0 15px 0;
    background-color:#f4f3f3;
    font-size: 14px;
    color: #949494;
    }
footer button{
    font-size: 14px;
    color: white;
    width: 60px;
    background-color: #fe9697;
    }
/*定义默认的滚动条样式*/
/* 定义滚动条样式 */
::-webkit-scrollbar {
    position: absolute;
    width: 7px;
    height: 6px;
    background-color: rgba(240, 240, 240, 1);
    }

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: white;
    }

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(28, 15, 15, 0.5);
    background-color: rgb(16 9 9 / 20%);
    }

js

  // 把表单内的内容渲染到页面
  let btnSend =  document.querySelector('#btnSend'),
      ipt =  document.querySelector('#ipt'),
      talk_list =   document.querySelector('.talk_list'),
      audio = document.querySelector('audio')
  btnSend.addEventListener('click', function() {/*点击发送事件*/

    if (ipt.value.trim().length !== 0) {/*文字框有内容*/

      // 把标签拼上表单内容，插入到结构中
      let spendHtml= `
${ipt.value.trim()}
`;
      talk_list.insertAdjacentHTML('beforeend', spendHtml);/*实现同时创建与插入*/
      getReply()
      scrollToBottom();/*出现新li就让他滚出来*/
      ipt.value ='';
    }
  });
  document.addEventListener('keyup',function(e) {
    if(e.key==='Enter'){/*按下回车*/
      btnSend.click(); /*触发发送键的点击*/
    }
  })
  // 获取回复信息
  function getReply() {
    $.ajax({
      type:'GET',
      url:'http://www.liulongbin.top:3006/api/robot',
      data:{
        spoken:ipt.value.trim()
      },
      success:function(res){
       let reply = res.data.info.text;/*得到回复的信息*/
        let  replyHtml = ` 
${res.data.info.text}
`;/*回复信息拼接结构*/
        talk_list.insertAdjacentHTML('beforeend',replyHtml) /*插入到聊天页面*/
        getVoice(reply);/*把文本传输进获取语音函数*/
        scrollToBottom();/*出现新li就让他滚出来*/
      }

    })
  }
  //获取回复信息的语音链接，并使用audio播放
  function getVoice(text) {
    $.ajax({
      type:'GET',
      url:'http://www.liulongbin.top:3006/api/synthesize',
      data:{
        text:text/*参数就是机器人的回复*/
      },
      success:function(res){
        audio.src=res.voiceUrl;/*获得语音链接*/
        audio.play();/*播放语音*/
      }
    })
  }

  // 让滚动条始终滚动到最底部
  function scrollToBottom() {
    let newMsg = document.querySelector('.talk_list').lastElementChild;/*最新的一个li*/
    newMsg.scrollIntoView();/*让最新的li出现在可视区*/
  }

三、感悟