前言:这篇文章并非是打广告,而是今天觉得无聊了就去写一个机器人聊天来增加几分乐趣,谁叫写代码的大多数是苦逼的呢…………哈哈…………
主要用到图灵机器人,这是他们的官网,请点击,这是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
72var 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);
}