基于PHP环境下的自动回复机器人小程序实现

一、开发前准备

1.去图灵机器人官网(http://www.turingapi.com/)去注册一个账号,并创建一个免费的智能机器人(因为是体验版所以免费,也可以续费升级,看个人爱好)。

2.在本地搭建一个可访问的PHP环境。

....嗯,准备就这么多了!

 

二、开发实现

1.通过图灵机官网给出的API,应用相关方式链接图灵机器人。(因为现在官网改版,现在版本的API删除了相关语言的调用接口的示例),下面贴出在其他地方找到的php和java ,关于v1.0版本的接口调用示例(当然,我现在应用开发的也是调用1.0版本的接口)。

①php调用示例:

基于PHP环境下的自动回复机器人小程序实现_第1张图片

②java调用示例:

基于PHP环境下的自动回复机器人小程序实现_第2张图片

 

2.按照示例创建连接图灵机器人的php文件tuLing.php。

  需要注意的是:要先去图灵官网获取你创建机器人的apikey值

基于PHP环境下的自动回复机器人小程序实现_第3张图片

得到apike值以后,就可以调用接口访问机器人了。代码如下:

 

time = date("Y-m-d H:i:s");

	//var_dump($obj_json);

	echo json_encode($obj_json);

?>

没错连接就是这么简单,你可以对该程序进行测试,看是否访问成功!

 

3.接下来是页面布置和利用ajax异步请求tuLing.php文件得到响应。

①页面布置我就不多讲了,贴出我自己做的效果图吧!(因为受传统习惯影响,我将它放在页面右下角,且随页面滚动位置不变)

1).加载页面后效果:

基于PHP环境下的自动回复机器人小程序实现_第4张图片

2).点击后效果:

基于PHP环境下的自动回复机器人小程序实现_第5张图片

 

3).聊天效果:

基于PHP环境下的自动回复机器人小程序实现_第6张图片

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(
                        '
'+ '
'+ ''+ '
'+ '
'+ '
头像
'+ '
'+data.text+ '
'+ '
'+ '
' ); //回复息时间 $("#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( '
'+ '
'+ ''+ '
'+ '
'+ '
头像
'+ '
'+data.text+''+data.url+'
'+ '
'+ '
' ); //回复息时间 $("#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(); } }, }

 

你可能感兴趣的:(PHP应用开发小程序)