基于JQuery和思知对话机器人提供的API实现一个简单的对话聊天界面

标签：JQuery function color body height 思知 width 对话 border

思知文档：https://www.ownthink.com/docs/bot/

因为设计简单就直接上代码了，效果图在最后！

1）界面实现

html中body代码

<body>
  <div id="box">
    <!-- 顶部 -->
    <div id="title">
      <span>聊天机器人</span>
    </div>
    <!-- 聊天框主体 -->
    <div id="body">
      <div class="body_box_left">
        <span class="headshot_left">bot</span>
        <span class="name_left">bot</span>
        <span class="context_left">嗨，最近想我没有？</span>
      </div>
    </div>
    <!-- 输入框 -->
    <div id="foot">
      <div id="inputBox">
        <div id="input">
          <textarea  id="inputText"></textarea>
          <button id="submitBtn">发送</button>
        </div>
      </div>
    </div>
  </div>
</body>

css相关样式代码

*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  justify-content: center;
}
#box{
  width: 800px;
  position: relative;
  border: 1px solid #d5d4d4;
  top: 80px;
  min-height: 520px;
  border-radius: 3px;
  overflow: hidden;
}
#title{
  text-align: center;
  height: 50px;
  background-color: #007B43;
  color: #fff;
  line-height: 50px;
  /* 楷体 */
  font-family: 'STKaiti';
  font-size: 24px;
}
#foot{
  /* border-top: 1px dashed  #d5d4d4; */
  height: 60px;
  position: absolute;
  bottom: 0;
  width: 100%;
  justify-content: center;
  display: flex;
  background-color: #fafafa;
}
#inputBox{
  width: 80%;
  height: 60px;
}
#input{
  position: relative;
}
#inputText{
  position: absolute;
  top: 10px;
  width: 85%;
  min-width: 200px;
  resize:none;
  height: 24px;
  border: 1px solid #007B43;
  outline: none;
  border-radius: 3px;
  font-size: 20px;
  padding: 8px 5px;
} 
#submitBtn{
  position: absolute;
  top: 10px;
  left: 85%;
  width: 15%;
  min-width: 44px;
  height: 42px;
  background-color: #007B43;
  border: none;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}
/*媒体查询，界面小于500px时执行如下代码*/
@media only screen and (max-width: 500px) {
  #box{
    top: 0px;
  }
  #box{
    border: none;
  }
}
#body{
  background-color: #f1f1f1;
  height: 390px;
  padding: 10px;
  overflow-y: auto;
  margin-bottom: 60px;
}

.body_box_left,.body_box_right{
  min-height: 60px;
  position: relative;
}
.body_box_right{
  text-align: right;
}
.headshot_left,.headshot_right{
  display: inline-block;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  color: #fff;
  text-align: center;
  line-height: 38px;
  position: absolute;
  top: 8px;
}
.headshot_left{
  background-color: #EC6D51;
}
.headshot_right{
  right: 0;
  background-color: #1E50A2;
}
.name_left,.name_right{
  display: block;
  user-select: none;
  color: gray;
  font-size: 12px;
}
.name_left{
  margin: 0 0 2px 48px;
}
.name_right{
  margin: 0 48px 2px 0;
}
.context_left,.context_right{
 /*强制文字换行*/
  word-break: break-all;
  word-wrap: break-word;
  text-align: left;
  position: relative;
  display: inline-block;
  font-size: 16px;
  padding: 8px;
  line-height: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 6px;
  min-height: 20px;
  min-width: 9px;
  margin: 0 48px 2px 48px;
  max-width: 620px;
  font-family: 'STKaiti';
}
.context_left{
  background-color: #CDD7E2;
}
.context_right{
  background-color: #0099ff;
  color: #fff;
}

实现效果

2）JavaScript & JQuery部分

2.1）机器人API说明

请求URL：https://api.ownthink.com/bot

请求参数：

参数	类型	是否必填	描述
spoken	string	是	请求的文本
appid	string	否	机器人的appid，填写可使用自己的机器人
userid	string	否	自己管理的用户id，填写可进行上下文对话

返回参数：

参数	类型	描述
message	string	success表示请求正确，error表示请求错误
data	object	返回的数据
type	int	返回的数据类型，5000表示正确返回文本类型的答复
info	object	返回的信息体
text	string	返回的答案

使用Ajax请求示例：

其中textVal是你输入文本

$.post('https://api.ownthink.com/bot',
      {
        "appid" : "xiaosi", 
        "spoken" : textVal
      },
      function(res){		//返回的信息
        console.log(res);
        const resText = res['data']['info'].text;
      }
    )

返回的数据：

2.2）将返回和发送的信息添加至界面

const textVal = $('#inputText').val();		//获取文本框输入的内容
// 将发送的信息和相关标签填充到内容区
function appendLeft(textVal){
    $('#body').append(`<div class="body_box_right">
        <span class="headshot_right">me</span>
        <span class="name_right">me</span>
        <span class="context_right">${textVal}</span>
      </div>`);
}
//将机器人返回的信息填充到内容区
function appendRight(resText){		//这里的resText为Ajax请求返回的数据
    $('#body').append(`<div class="body_box_left">
      <span class="headshot_left">bot</span>
      <span class="name_left">bot</span>
      <span class="context_left">${resText}</span>
    </div>`)
}

2.3）监听界面的宽度

为了弥补上面css的未完善，需要使用JQuery对#body（内容区）的高度进行更改

function chageHeight(){
  const win_width = $(window).width();
  if(win_width<=500){
    const win_height = $(window).height();  //整个网页的文档高度
    const title_height = $('#title').outerHeight(true);
    const foot_height = $('#foot').outerHeight(true);
    const height = win_height-title_height-foot_height-20;//20是#body设置的padding
    $('#body').css("height", height+"px")
    console.log(win_height,title_height,foot_height,height);
  }
}
// 监听屏幕高度变化
$(window).resize(function () {
  chageHeight();
})
chageHeight();

2.3）其他说明

监听键盘是否按下Ctrl+Enter键，如按下则发送消息。

document.onkeydown = function(){  
    var oEvent = window.event;  
    if (oEvent.keyCode == 13 && oEvent.ctrlKey) {  
        ajax();
    }  
}

点击事件

$('#submitBtn').click(function(){
    ajax();
});

2.4）完整JQuery实现代码

注意！注意！注意！如下代码可能很冗余

$(function(){
  $('#submitBtn').click(function(){
    ajax();
  });
  // ctrl+enter
  document.onkeydown = function(){  
    var oEvent = window.event;  
    if (oEvent.keyCode == 13 && oEvent.ctrlKey) {  
      ajax();
    }  
  } 
  function appendLeft(textVal){
    $('#body').append(`<div class="body_box_right">
        <span class="headshot_right">me</span>
        <span class="name_right">me</span>
        <span class="context_right">${textVal}</span>
      </div>`);
    console.log(textVal)
  }
  function appendRight(resText){
    $('#body').append(`<div class="body_box_left">
      <span class="headshot_left">bot</span>
      <span class="name_left">bot</span>
      <span class="context_left">${resText}</span>
    </div>`)
  }
  function ajax(){
    const textVal = $('#inputText').val();
    appendLeft(textVal)
    $.post('https://api.ownthink.com/bot',
      {
        "appid" : "xiaosi", 
        "spoken" : textVal
      },
      function(res){
        console.log(res);
        const resText = res['data']['info'].text;
        appendRight(resText)
      }
    )
    $('#inputText').val('');
    $('#inputText').focus();
  }
})

function chageHeight(){
  const win_width = $(window).width();
  if(win_width<=500){
    const win_height = $(window).height();  //整个网页的文档高度
    const title_height = $('#title').outerHeight(true);
    const foot_height = $('#foot').outerHeight(true);
    const height = win_height-title_height-foot_height-20;//20是#body设置的padding
    $('#body').css("height", height+"px")
    console.log(win_height,title_height,foot_height,height);
  }
}
// 监听屏幕高度变化
$(window).resize(function () {
  chageHeight();
})
chageHeight();

3）最终实现效果图

4）ps

仅供平时练练手，如果在正式开发中这样写可能会被打死。别问为什么！虽然没有尝试过，但是是肉眼可见的代码冗余。

标签：JQuery,function,color,body,height,思知,width,对话,border
From： https://www.cnblogs.com/fwdba/p/16802018.html