手把手創建一個聊天機器人

今天來寫一個屬於自己的聊天機器人。

思路：當用戶點擊發送后，需要根據用戶輸入的內容，提交到服務器，然后由服務器根據你輸入的內容，返回對應的結果，我們拿到結果展示到界面上當做機器人的回答即可。

這里使用的接口是圖靈機器人，網址：http://www.tuling123.com

1. 搭建界面

界面主要是一個div，div里是一個ul，ul就是聊天面板，每條消息（不管是機器人的還是用戶的）都是一個li標簽。

CSS和HTML代碼如下：

<div class="chatBox">

     <!-- 聊天記錄區域 -->
     <ul class="container">
         <li class="robot">
                 <span class="chat-icon"></span>
                 <p class="text">我是您的機器人，快來聊天吧！</p>
         </li>


         <!-- <li class="user">
             <p>你好！</p>
         </li> -->
     </ul>


     <!-- 輸入文字區域 -->
     <div class="sendBox">
         <input type="text" id="msg">
         <a href="javascript:;" id="send">發送</a>
     </div>

 </div>

     .chatBox{
             position: relative;
         width: 346px;
         height: 618px;
         margin: 50px auto;
         background: url(img/phoneBg.png) no-repeat;
     }


     .container{
             position: absolute;
         width: 316px;
         height: 430px;
         padding: 0;
         top: 55px;
         left: 15px;
         list-style: none;
         overflow: auto;
         /*display: none;*/
     }
        .container::-webkit-scrollbar {
           display: none;
        }

     .sendBox{
             /*display: none;*/
             position: absolute;
             top: 508px;
             left: 14px;
         width: 318px;
         text-align: center;
         padding: 5px 0;
         background-color: #eeeeeeb5;
         border-top: 1px solid #ccc;
     }


     .robot{
         margin-top: 15px;
         text-align: left;
     }


     .chat-icon,.user-icon{
         width: 40px;
         height: 40px;
         display:inline-block;
         border-radius: 20px;
     }


     .robot .text{
         border-radius: 8px;
         background-color: #f4f7f9;
         margin-left: 10px;
         max-width: 210px;
         line-height: 20px;
         word-break: break-all;
         word-wrap: break-word;
         display: inline-block;
         padding: 5px 0px 5px 5px;
     }


     .chat-icon{
         background: url('./img/haha.jpg') 0% 0% / 100% 100% no-repeat;
     }

     .user-icon{
         background: url('./img/hehe.jpg') 0% 0%/100% 100% no-repeat;
     }
     .user{
         margin-top: 15px;
         text-align: right;
     }
     .user p{
         border-radius: 8px;
         background-color: #f4f7f9;
         margin-right: 10px;
         max-width: 210px;
         line-height: 20px;
         word-break: break-all;
         word-wrap: break-word;
         display: inline-block;
         padding: 5px;
         background-color:yellowgreen; 
     }
     #msg{
         width: 220px;
         height: 25px;
         border-radius: 5px;
         outline: none;
         border: 1px solid #ccc;
         padding-left: 5px;
     }
     #send{
             display: inline-block;
             text-decoration: none;
         width: 60px;
         height: 28px;
         line-height: 26px;
         background-color: yellowgreen;
         color: #fff;
         font-size: 14px;
         border-radius: 5px;
         outline: none;
     }

2. 准備機器人

2.1 注冊賬號

進入http://www.tuling123.com/，點擊界面右上方注冊

 

進入注冊頁面填寫相關信息注冊

2.2 創建機器人

登錄后，會看到如下界面，點擊創建機器人


 

 

然后按下圖填寫

 

點創建后，會在機器人管理里看到下圖

 

2.3 設置機器人

我們可以對機器人繼續一些個性化設置，機器人管理界面點設置

我們可以看到終端設置下有個 apikey ，這個key在寫代碼時要復制好，因為我們如果要用機器人功能，必須用這個key

 

然后點人物設置可以給機器人做一些個性設置

3. 實現代碼

找到聊天面板（為了后面給它加聊天記錄），以及給發送按鈕添加點擊事件

//找到聊天面板
var container=document.getElementsByClassName('container')[0];
//找到發送按鈕
var send=document.getElementById('send');
//給發送按鈕添加點擊事件
send.onclick=function(){}

3.1 把用戶輸入的內容顯示到界面上

在上面的點擊事件里面，取到用戶輸入的內容，並把它當聊天內容展示到界面上，代碼如下

// 1. 找到輸入的文本框
 var msgTxt = document.getElementById('msg');
 // 2. 獲取文本框中的內容
 var userMsg = msgTxt.value;
 // 3. 清空文本框內容
 msgTxt.value = "";
 // 4. 創建自己的li標簽
 var myLi = document.createElement('li');
 // 5. 設置類名
 myLi.className = "user";
 // 6. 設置內容
 myLi.innerHTML = "<p>"+ userMsg +"</p>";

 // 7. 把自己這部分聊天加到面板
 container.appendChild(myLi);

到此，實現了用戶輸入什么，界面就顯示什么

3.2 根據用戶輸入內容發請求到服務器，拿到機器人回答

核心步驟：

• 創建異步請求對象(xhr)

• 設置請求行（請求到接口地址，用post請求）

• 設置請求頭（POST請求要設置）

• 發送請求主體（請求體里要包含剛剛我們獲取的 apikey 以及用戶輸入的內容）

• 監聽響應完成，拿到服務器返回的內容，顯示到界面上

 代碼如下：

// 1.創建請求對象
var xhr = new XMLHttpRequest();
// 2.設置請求行(get請求數據寫在url后面)
xhr.open('POST','http://www.tuling123.com/openapi/api');
// 3.設置請求頭(post請求要加)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 4.請求主體發送 包含apikey和用戶發送的聊天內容
xhr.send('key=a2b18016f0e44d12abc672c6e1f0c4d6&userid=123&info='+userMsg);
//5.監聽響應完成
xhr.onload = function(){
    
    //5.1 得到返回結果
    var data = JSON.parse(xhr.responseText);
    
    //5.2 創建機器人的聊天框
    var robotLi = document.createElement('li');
    //5.3 設置類
    robotLi.className = "robot";
    //5.4 設置內容
    robotLi.innerHTML = '<span class="chat-icon"></span><p class="text">' + data.text + '</p>';
    //5.6 添加到頁面上
    container.appendChild(robotLi);
}

3.3 發送內容后自動滾到聊天框最下

此時完成了機器人應答，但是如果內容一多，沒有自動滾動到最后，因此，我們需要寫代碼，讓聊天面板滾動到最下，看最新消息，代碼如下:

// 計算container內容總高度
var height = 0;
for(var i = 0; i < container.children.length;i++){
    height += container.children[i].offsetHeight + 15;
}

// 聊天面板滾到最下
container.scrollTop = height;

這樣就完成創建了一個自己專屬的聊天機器人

效果圖如下：

 

完整代碼有所改動，已上傳至GitHub，有需要下載：https://github.com/KimKangin/robot/tree/master

代碼演示：https://kimkangin.github.io/robot