一、开发前准备
1.去图灵机器人官网(http://www.turingapi.com/)去注册一个账号,并创建一个免费的智能机器人(因为是体验版所以免费,也可以续费升级,看个人爱好)。
2.在本地搭建一个可访问的PHP环境。
....嗯,准备就这么多了!
二、开发实现
1.通过图灵机官网给出的API,应用相关方式链接图灵机器人。(因为现在官网改版,现在版本的API删除了相关语言的调用接口的示例),下面贴出在其他地方找到的php和java ,关于v1.0版本的接口调用示例(当然,我现在应用开发的也是调用1.0版本的接口)。
①php调用示例:
②java调用示例:
2.按照示例创建连接图灵机器人的php文件tuLing.php。
需要注意的是:要先去图灵官网获取你创建机器人的apikey值
得到apike值以后,就可以调用接口访问机器人了。代码如下:
time = date("Y-m-d H:i:s");
//var_dump($obj_json);
echo json_encode($obj_json);
?>
没错连接就是这么简单,你可以对该程序进行测试,看是否访问成功!
3.接下来是页面布置和利用ajax异步请求tuLing.php文件得到响应。
①页面布置我就不多讲了,贴出我自己做的效果图吧!(因为受传统习惯影响,我将它放在页面右下角,且随页面滚动位置不变)
1).加载页面后效果:
2).点击后效果:
3).聊天效果:
2.贴一下ajax异步请求的代码:
/***************************回复消息************************************/
var responseChat = function(msg){
$.ajax({
"type":"post",
"url":"tuLing.php",
"data":{"msg":msg},
"dataType": "json",
"success":function(data){
var num = new Date().getTime();
//文本类
if(data.code==100000){
$(".chatBox-content-demo").append(
''+
''+
''+
''+
' '+
''
);
//回复息时间
$("#chat-"+num).html(data.time);
//聊天框默认最底部
$(document).ready(function(){
$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
});
//链接类
}else if(data.code==200000){
$(".chatBox-content-demo").append(
' '+
''+
''+
''+
''+
' '+
''
);
//回复息时间
$("#chat-"+num).html(getFormatTime());
//聊天框默认最底部
$(document).ready(function(){
$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
});
} else{
/*
其他code码代表类型(不同类型返回数据不同,根据不同数据自行显示)
302000 新闻类
308000 菜谱类
313000 儿歌类
314000 诗词类
*/
alert('未识别');
}
}
});
} '+
'
三、总结
1.因为纯属个人爱好,所以实现主要功能后,其他有些小地方有待完善。
2.数据未入库,纯属页面交互,因此不能查看历史记录。
3.最后贴一个关于用contenteditable控制文本输入框时,设置按enter键提交,ctr+enter键换行的控制操作
1)html代码如下:
2)css代码如下:
.div-textarea{
width: 260px;
min-height: 20px;
max-height: 100px;
_height: 120px;
padding: 3px;
outline: 0;
background: #fff;
font-size: 14px;
line-height: 20px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
user-modify: read-write-plaintext-only; /*纯文本*/
-webkit-user-modify: read-write-plaintext-only;
-moz-user-modify: read-write-plaintext-only;
}
.div-textarea:focus{
box-shadow: 0 0 15px rgba(82, 168, 236, 0.6);
}
3)js代码如下:
//回车提交消息
$(".div-textarea").keydown(function($event){
var keycode = window.event ? $event.keyCode : $event.which;
var evt = $event || window.event;
var inputTxt = $(this);
// 回车-->发送消息
if (keycode == 13 && !(evt.ctrlKey)) {
//发送消息
requestChat();
$event.preventDefault();
return false;
}
// ctrl+回车-->换行
if (evt.ctrlKey && evt.keyCode == 13) {
inputTxt.html(inputTxt.html() + '');
woohecc.placeCaretAtEnd(inputTxt.get(0));
return false;
}
});
var woohecc = {
placeCaretAtEnd : function(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
},
}