原文地址：https://blog.csdn.net/lk1848621002/article/details/81484166

一、开发前准备

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

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

....嗯，准备就这么多了！

二、开发实现

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

①php调用示例：

②java调用示例：

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

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

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

<?php
	$apiKey = "30xxxxxxxxxxxxxxxx";
	//v1.0版本请求方式
	$apiURL = "http://www.tuling123.com/openapi/api?key=KEY&info=INFO";
 
	//设置报文头，构建报文
	header("Content-type:text/html;charset=utf-8");
 
	$reqInfo =$_POST['msg'];
	//$reqInfo="讲笑话";
	$url = str_replace('INFO',$reqInfo,str_replace('KEY',$apiKey,$apiURL));
 
	//获取文件数据流
	$res = file_get_contents($url);
 
        //得到json对象
	$obj_json = json_decode($res);
 
	//添加时间属性
	$obj_json->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(
                        '<div class="clearfloat">'+
                            '<div class="author-name">'+
                                '<small class="chat-date" id="chat-'+num+'"></small>'+
                           '</div>'+
                            '<div class="left">'+
                                '<div class="chat-avatars"><img src="img/tuling.png" alt="头像"/></div>'+
                                '<div class="chat-message">'+data.text+
                                    
                                '</div>'+
                            '</div>'+
                        '</div>'
                    );
 
                //回复息时间
                $("#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(
                        '<div class="clearfloat">'+
                            '<div class="author-name">'+
                                '<small class="chat-date" id="chat-'+num+'"></small>'+
                           '</div>'+
                            '<div class="left">'+
                                '<div class="chat-avatars"><img src="img/tuling.png" alt="头像"/></div>'+
                                '<div class="chat-message">'+data.text+'<a href="'+data.url+'">'+data.url+'</a> </div>'+ 
                                
                            '</div>'+
                        '</div>'
                    );
 
                //回复息时间
                $("#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代码如下：

<div class="div-textarea" contenteditable="true"></div>

 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() + '</br>');
            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();
                }
            },
        }