基于Ajax的聊天机器人

left:0px;

top:0px;

}

.talk_list li {

overflow: hidden;

margin: 20px 0px 30px;

}

.talk_list .left_word img {

float: left;

margin-left: 20px;

}

.talk_list .left_word span {

float: left;

background-color: #fe9697;

padding: 10px 15px;

max-width: 290px;

border-radius: 12px;

font-size: 16px;

color: #fff;

margin-left: 13px;

position: relative;

line-height: 24px;

}

.talk_list .left_word span:before {

content: '';

position: absolute;

left: -8px;

top: 3px;

width: 13px;

height: 12px;

background: url('../img/corner01.png') no-repeat;

}

.talk_list .right_word img {

float: right;

margin-right: 20px;

}

.talk_list .right_word span {

float: right;

background-color: #fff;

padding: 10px 15px;

max-width: 290px;

border-radius: 12px;

font-size: 16px;

color: #000;

margin-right: 13px;

position: relative;

line-height: 24px;

}

.talk_list .right_word span:before {

content: '';

position: absolute;

right: -8px;

top: 3px;

width: 13px;

height: 12px;

background: url('../img/corner02.png') no-repeat;

}

.drag_bar{

position:absolute;

right:0px;

top:0px;

background-color: #fff;

height:100%;

width:6px;

box-sizing:border-box;

border-bottom:1px solid #f4f3f3;

}

.drager{

position:absolute;

left:0px;

top:0px;

background-color: #cdcdcd;

height:100px;

width:6px;

border-radius:3px;

cursor: pointer;

}

.footer{

width:100%;

height: 55px;

left:0px;

bottom:0px;

background-color:#fff;

position: absolute;

}

.footer img{

float: left;

margin:8px 0 0 20px;

}

.input_txt{

float: left;

width:270px;

height:37px;

border:0px;

background-color: #f4f3f3;

margin:9px 0 0 20px;

border-radius:8px;

padding:0px;

outline:none;

text-indent:15px;

}

.input_sub{

float: left;

width:70px;

height:37px;

border:0px;

background-color: #fe9697;

margin:9px 0 0 15px;

border-radius:8px;

padding:0px;

outline:none;

color:#fff;

cursor: pointer;    

}

reset.css部分

body,ul,h1,h2,h3,h4,h5,h6{

margin: 0;

padding: 0;

}

h1,h2,h3,h4,h5,h6{

font-size:100%;

font-weight:normal;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

img{

border:0px;

}

/* 清除浮动，解决margin-top塌陷 */

.clearfix:before,.clearfix:after{

content:'';

display:table;    

}

.clearfix:after{

clear:both;

}

.clearfix{

zoom:1;

}

.fl{

float:left;

}

.fr{

float:right;

}

接下来就是本项目的精华所在

首先为发送按钮绑定点击事件，trim()方法是去除表单里面的空字符，开始为表单内容是否为空来一次判断。

如果用户输入了内容，将表单里面的内容渲染到页面，我相信大家都非常的熟练了

// 为发送按钮绑定鼠标点击事件

$(‘#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)

})

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

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

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

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

// 获取聊天机器人发送回来的消息

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()

      // 调用 getVoice 函数，把文本转化为语音

      getVoice(msg)

    }

  }

})

}

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

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

// 把文字转化为语音进行播放

function getVoice(text) {

$.ajax({

  method: 'GET',

  url: ' http://www.liulongbin.top:3006/api/synthesize',

  data: {

    text: text

  },

  success: function(res) {

    // console.log(res)

    //下面的值可以通过console.log(res)输出查看里面的属性值

    if (res.status === 200) {

      // 播放语音 路径

      $('#voice').attr('src', res.voiceUrl)

    }

  }

})

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

戳这里免费领取前端学习资料

)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-JhkRCvhL-1713760174950)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-HDrV7E8f-1713760174950)]

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

戳这里免费领取前端学习资料