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

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

這裡使用的介面是圖靈機器人，網址：http://www.tuling123.com

1. 搭建介面

介面主要是一個div，div裡是一個ul，ul就是聊天面板，每條訊息（不管是機器人的還是使用者的）都是一個li標籤。

CSS和HTML程式碼如下：

 1 <div class="chatBox">
 2 
 3      <!-- 聊天記錄區域 -->
 4      <ul 
 
class="container">
 5          <li class="robot">
 6                  <span class="chat-icon"></span>
 7                  <p class="text">我是您的機器人，快來聊天吧！</p>
 8          </li>
 9 
10 
11          <!-- <li class="user">
12              <p>你好！</p>
 
13          </li> -->
14      </ul>
15 
16 
17      <!-- 輸入文字區域 -->
18      <div class="sendBox">
19          <input type="text" id="msg">
20          <a href="javascript:;" id="send">傳送</a>
21      </div>
22 
23  </div>

  1      .chatBox{
  2              position
 
: relative;
  3          width: 346px;
  4          height: 618px;
  5          margin: 50px auto;
  6          background: url(img/phoneBg.png) no-repeat;
  7      }
  8 
  9 
 10      .container{
 11              position: absolute;
 12          width: 316px;
 13          height: 430px;
 14          padding: 0;
 15          top: 55px;
 16          left: 15px;
 17          list-style: none;
 18          overflow: auto;
 19          /*display: none;*/
 20      }
 21         .container::-webkit-scrollbar {
 22            display: none;
 23         }
 24 
 25      .sendBox{
 26              /*display: none;*/
 27              position: absolute;
 28              top: 508px;
 29              left: 14px;
 30          width: 318px;
 31          text-align: center;
 32          padding: 5px 0;
 33          background-color: #eeeeeeb5;
 34          border-top: 1px solid #ccc;
 35      }
 36 
 37 
 38      .robot{
 39          margin-top: 15px;
 40          text-align: left;
 41      }
 42 
 43 
 44      .chat-icon,.user-icon{
 45          width: 40px;
 46          height: 40px;
 47          display:inline-block;
 48          border-radius: 20px;
 49      }
 50 
 51 
 52      .robot .text{
 53          border-radius: 8px;
 54          background-color: #f4f7f9;
 55          margin-left: 10px;
 56          max-width: 210px;
 57          line-height: 20px;
 58          word-break: break-all;
 59          word-wrap: break-word;
 60          display: inline-block;
 61          padding: 5px 0px 5px 5px;
 62      }
 63 
 64 
 65      .chat-icon{
 66          background: url('./img/haha.jpg') 0% 0% / 100% 100% no-repeat;
 67      }
 68 
 69      .user-icon{
 70          background: url('./img/hehe.jpg') 0% 0%/100% 100% no-repeat;
 71      }
 72      .user{
 73          margin-top: 15px;
 74          text-align: right;
 75      }
 76      .user p{
 77          border-radius: 8px;
 78          background-color: #f4f7f9;
 79          margin-right: 10px;
 80          max-width: 210px;
 81          line-height: 20px;
 82          word-break: break-all;
 83          word-wrap: break-word;
 84          display: inline-block;
 85          padding: 5px;
 86          background-color:yellowgreen; 
 87      }
 88      #msg{
 89          width: 220px;
 90          height: 25px;
 91          border-radius: 5px;
 92          outline: none;
 93          border: 1px solid #ccc;
 94          padding-left: 5px;
 95      }
 96      #send{
 97              display: inline-block;
 98              text-decoration: none;
 99          width: 60px;
100          height: 28px;
101          line-height: 26px;
102          background-color: yellowgreen;
103          color: #fff;
104          font-size: 14px;
105          border-radius: 5px;
106          outline: none;
107      }

2. 準備機器人

2.1 註冊賬號

進入http://www.tuling123.com/，點選介面右上方註冊

進入註冊頁面填寫相關資訊註冊

2.2 建立機器人

登入後，會看到如下介面，點選建立機器人

然後按下圖填寫

點建立後，會在機器人管理裡看到下圖

2.3 設定機器人

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

我們可以看到終端設定下有個 apikey ，這個key在寫程式碼時要複製好，因為我們如果要用機器人功能，必須用這個key

然後點人物設定可以給機器人做一些個性設定

3. 實現程式碼

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

1 //找到聊天面板
2 var container=document.getElementsByClassName('container')[0];
3 //找到傳送按鈕
4 var send=document.getElementById('send');
5 //給傳送按鈕新增點選事件
6 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