聊天机器人

2019-03-05

funny

前言:这篇文章并非是打广告,而是今天觉得无聊了就去写一个机器人聊天来增加几分乐趣,谁叫写代码的大多数是苦逼的呢…………哈哈…………

主要用到图灵机器人,这是他们的官网,请点击,这是API和一些说明,点击

废话不多说,看效果图:

查看演示页面 如果出现undefined 就是浏览器认为HTTP请求不安全,所以被阻止了,不过在本地调试没问题。点击去我的github上下载

  • 使用之前你得有他们官网的账号,注册一个即可
  • 官网提供的2.0接口文档请求参数json貌似不是给前端用的,我用了得不到数据。这是链接,不妨点进去看看
  • 因此我使用这个接口:http://www.tuling123.com/openapi/api?key='你的key'&info='发给机器人的消息'&userid='你的用户名'
  • HTML:

    1
    2
    3
    4
    5
    6
    7
    <div class="bigCount">
    <div class="count"></div>
    <div class="setMsg">
    <input placeholder=" 请输入内容" id="value">
    <button id="btn">发送</button>
    </div>
    </div>
  • JS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    var key='官网注册后得到的key'
    var userid='你的用户名'
    var count=$('.count')
    $('#value').bind('keypress', function(event) { // 回车确定
    if (event.keyCode == "13") {
    getReturn()
    event.preventDefault();
    }
    });
    $('#btn').click(()=>{getReturn()})

    function getReturn(){
    var val=$('#value').val()
    var youMsg=`
    <div class="Media You">
    <div class="Media-body You-body">
    <h2 class="Media-title You-title">Tilin</h2>
    <p class="Media-content You-content">${val}</p>
    </div>
    <img class="Media-figure You-img" src="http://img5.duitang.com/uploads/item/201408/07/20140807111437_HRKRL.thumb.700_0.png" alt="">
    </div>
    `
    count.append(youMsg)

    $.ajax({
    url:'http://www.tuling123.com/openapi/api',
    data:{
    key:key,
    userid:userid,
    info:val // 你对机器人说的话
    }
    })
    .then((res)=>{
    console.log(res)
    var returnMsg=res.text
    var showMsg=`
    <div class="Media">
    <img class="Media-figure" src="http://b-ssl.duitang.com/uploads/item/201411/05/20141105170927_8cnW3.jpeg" alt="">
    <div class="Media-body">
    <h2 class="Media-title">琳喵喵~~</h2>
    <p class="Media-content">${returnMsg}</p>
    </div>
    </div>
    `
    count.append(showMsg)
    $('#value').val('')
    goBottom()
    },(res)=>{
    console.log(`错误返回:${res}`)
    var returnMsg=res.text
    var showMsg=`
    <div class="Media">
    <img class="Media-figure" src="http://file.tuling123.com/upload/image/201809/c5682c4b-bd40-4d80-9cf3-215b6ab2e93b.png" alt="">
    <div class="Media-body">
    <h2 class="Media-title">琳喵喵~~</h2>
    <p class="Media-content">${returnMsg}</p>
    </div>
    </div>
    `
    count.append(showMsg)
    $('#value').val('')
    goBottom()
    })

    }
    // 返回底部
    function goBottom(){
    var botm = $('.count').scrollTop();
    $('.count').animate({
    scrollTop: $('.count').prop('scrollHeight')
    },700);
    }

此外,这个图灵机器人不仅可以用在网页端,还可以用在微信、QQ,网上、官网也有相应的教程。