🥂(?′?`?)您的點贊👍?評論📝?收藏?是作者創作的最大動力🤞

前言

????現如今生活中到處都是聊天機器人的身影，聊天機器人不僅僅能減少人工的聊天壓力，而且十分的可愛有趣，安卓系統的小AI，蘋果系統的siri，相信大家都感受到了，這兩個機器人的可愛、實用性，然而聊天機器人背后實現的原理是什么呢，這篇文章我將通過一個非常有趣的聊天機器人案例，帶大家了解聊天機器人背后的原理哦！

什么是聊天機器人？

????聊天機器人可用于實用的目的，如客戶服務或資訊獲取。有些聊天機器人會搭載自然語言處理系統，但大多簡單的系統只會擷取輸入的關鍵字，再從數據庫中找尋最合適的應答句。聊天機器人是虛擬助理（如Google智能助理）的一部分，可以與許多組織的應用程序，網站以及即時消息平臺（Facebook Messenger）連接。非助理應用程序包括娛樂目的的聊天室，研究和特定產品促銷，社交機器人。聊天機器人實際上就是一個可以模擬人類對話的計算機程序；

聊天機器人案例效果預覽

????大家可以看到當我向輸入框輸入想你了，聊天機器人，自動回復了＂想我什么呀＂，而且自動播報語音，實現這些功能的步驟是，先將輸入框的文字渲染到聊天窗口中，聊天機器人會根據輸入框的內容返回數據，我們再將返回的數據渲染到頁面中轉換成語音即可，只要掌握了這個步驟，相信小伙伴們都能輕松的寫出一個智能聊天機器人案例；

將用戶輸入的內容渲染到聊天窗口

代碼示例如下：

// 為發送按鈕綁定點擊事件處理函數
$('#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>')resetui() // 重置滾動條的位置$(‘#ipt’).val('') // 清空輸入框的內容// TODO: 發起請求，獲取聊天消息
})

發起請求獲取聊天信息

代碼示例如下：

function getMsg(text) {$.ajax({method: 'GET',url: 'http://ajax.frontend.itheima.net: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>' + m
sg + '</span></li>')resetui()// TODO: 發起請求，將機器人的聊天消息轉為語音格式}}})
}

將機器人聊天內容轉換成語音

代碼示例如下：

function getVoice(text) {$.ajax({method: 'GET',url: 'http://ajax.frontend.itheima.net:3006/api/synthesize',data: {text: text},success: function (res) {// 如果請求成功，則 res.voiceUrl 是服務器返回的音頻 URL 地址if (res.status === 200) {$('#voice').attr('src', res.voiceUrl)}}})}

實現自動播放語音

代碼示例如下：

<!-- 音頻播放語音內容 -->
<audio src="" id="voice" autoplay style="display: none;"></audio>

使用回車鍵發送消息

代碼示例如下：

// 讓文本輸入框響應回車事件后，提交消息
$('#ipt').on('keyup', function (e) {// e.keyCode 可以獲取到當前按鍵的編碼if (e.keyCode === 13) {// 調用按鈕元素的 click 函數，可以通過編程的形式觸發按鈕的點擊事件$('#btnSend').click()}
})

總結案例實現步驟

????首先我們需要將頁面的結構寫出來，然后我們需要將用戶輸入的內容渲染到聊天窗口，然后我們再根據用戶輸入的內容發起Ajax請求，向后臺請求聊天數據，獲取請求到的數據后我們首先需要將文本轉換成語音，然后將文本渲染到聊天界面中，最后我們需要通過給回車鍵綁定事件，實現回車鍵發送消息的案例，本案例一共只敲了３０行代碼便實現了簡單有趣的自動回復的聊天機器人案例，希望大家能通過此案例有所收獲哦；