ajax实现简单的聊天机器人

页面效果如图

图片[1]-ajax实现简单的聊天机器人 - it同学-it同学

可自动回复,自动语音播放,可回车发送文字

js部分

$(function() {

    resetui()

    $('#iptsend').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('')
        getMsg(text);

        //输入结束后滚动条下拉至最底部
        resetui()
    })

    function getMsg(text) {
        $.ajax({
            method: 'get',
            url: 'http://www.liulongbin.top:3006/api/robot',
            data: {
                spoken: text
            },
            success: function(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);
                }
            }
        })
    }

    //文字转换为语音
    function getVoice(text) {
        $.ajax({
            method: 'get',
            url: 'http://www.liulongbin.top:3006/api/synthesize',
            data: {
                text: text
            },
            success: function(res) {
                if (res.status === 200) {
                    //播放语音
                    $('#voice').attr('src', res.voiceUrl)
                }
            }
        })
    }

    //按下回车键发送消息
    $('#ipt').on('keyup', function(e) {
        if (e.keyCode === 13) {
            $('#iptsend').click();
        }
    })


})

源码下载

https://jpzy.lanzoui.com/ioH1rt1kyqf

在线演示

点击跳转

© 版权声明
THE END
喜欢就支持一下吧
点赞12
分享
评论 抢沙发

请登录后发表评论