手把手创建一个聊天机器人

今天来写一个属于自己的聊天机器人。

思路：当用户点击发送后，需要根据用户输入的内容，提交到服务器，然后由服务器根据你输入的内容，返回对应的结果，我们拿到结果展示到界面上当做机器人的回答即可。

这里使用的接口是图灵机器人，网址：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