php+ajax實作web客服系統

在背景接入界面将通路者資訊通過POST方式傳遞到接口檔案

var custom = function(){     ajax_get_data(site_url_user+'?act=custom','',do_custom,'POST','資料加載中!'); } var do_custom = function(mydata){     switch(mydata.code){         case 200:             var userdata = mydata.userdata;             var form = $("<form method='post' id='myform'></form>" ),             input;             form.attr('action',mydata.url);             $.each(userdata,function(key,value){                 input = $("<input type='hidden'>");                 input.attr('name',key);                 input.val(value);                 form.append(input);             });             form.appendTo($('#custom'));             form.submit();             break;         default :             location.href = site_url+'login.html';             break;     } }

通路接口檔案 custom_service.api.php

<?php include_once("config.inc.php");

//接收送出參數 $mydata['act'] = get_param('act','int');//遊戲/代理 $mydata['pb_nickname'] = get_param('nickname');//名稱 $mydata['pb_wjuid'] = get_param('wjuid');//玩家/代理ID $mydata['pb_wjopenid'] = get_param('wjopenid'); $mydata['pb_wjunionid'] = get_param('wjunionid'); if($mydata['act']==2){     $mydata['pb_areaid'] = get_param('areaid','int');//地區ID     $value = array('sysid'=>$mydata['pb_wjuid'],'p_nickname'=>$mydata['pb_nickname'],'p_serarea'=>$mydata['pb_areaid'],'p_wxopenid'=>$mydata['pb_wjopenid'],'p_unionid'=>$mydata['pb_wjunionid']);     $prinfo = exist_check($GLOBALS['conn'],'game_proxy',$value);     if(!$prinfo){         $smarty->assign('code',300);//錯誤碼         $smarty->assign('mess','代理資訊有誤');//錯誤資訊         $smarty->display('custom_service.html');         exit;     } }else{     $mydata['pb_gameid'] = get_param('gameid','int');//遊戲id     $mydata['pb_areaid'] = get_area_id($mydata['pb_gameid']);//地區ID     $value = array('uid'=>$mydata['pb_wjuid'],'user_nickname'=>$mydata['pb_nickname'],'area_id'=>$mydata['pb_gameid'],'user_openid'=>$mydata['pb_wjopenid'],'user_unionid'=>$mydata['pb_wjunionid']);     $wjinfo = exist_check($GLOBALS['conn'],'game_member',$value);     if(!$wjinfo){         $smarty->assign('code',300);//錯誤碼         $smarty->assign('mess','玩家資訊有誤');//錯誤資訊         $smarty->display('custom_service.html');         exit;     } }

$mydata['time'] = get_param('time','int'); $mydata['md5'] = trim(get_param('md5'));

$ip    = return_user_ip();//通路者IP

//重新組合要驗證的字元串 $tmp_md5=strtolower(md5($mydata['time'].$mydata['act'].$mydata['pb_wjuid']));

//驗證資料 if($mydata['act']<1){     $smarty->assign('code',300);//錯誤碼     $smarty->assign('mess','所屬平台不能為空');//錯誤資訊     $smarty->display('custom_service.html');     exit; } if(empty($mydata['md5'])){     $smarty->assign('code',300);//錯誤碼     $smarty->assign('mess','驗證資料不能為空');//錯誤資訊     $smarty->display('custom_service.html');     exit; } if($tmp_md5!=$mydata['md5']){     $smarty->assign('code',300);//錯誤碼     $smarty->assign('mess','驗證資料不通過');//錯誤資訊     $smarty->display('custom_service.html');     exit; }

//檢視目前通路玩家是否新增記錄 $where = " and pb_wjuid=".$mydata['pb_wjuid']." and pb_status=1 ";//未處理 $result =  get_info($GLOBALS['conn'],'game_player_bug',array(),$where); if($result){     //接入之前的客服記錄     $smarty->assign('serviceid',$result['sysid']);//将接入ID傳入聊天頁面     $smarty->assign('flag',1);//2客服1玩家     $smarty->display('custom_service.html'); }else{     //新增一條接入記錄     $pd_data = array(         'pb_title' => $mydata['pb_wjuid'].'_'.date('Y-m-d'),         'pb_is_game' => $mydata['act'],         'pb_gameid' => $mydata['pb_gameid'],         'pb_areaid' => $mydata['pb_areaid'],         'pb_nickname' => $mydata['pb_nickname'],         'pb_wjuid' => $mydata['pb_wjuid'],         'pb_wjopenid' => $mydata['pb_wjopenid'],         'pb_wjunionid' => $mydata['pb_wjunionid'],         'pb_ip' => $ip,     );     $res = add_record($GLOBALS['conn'],'game_player_bug',$pd_data);     if($res){         $smarty->assign('serviceid',$res['id']);//将接入ID傳入聊天頁面         $smarty->assign('flag',1);//2客服1玩家         $smarty->display('custom_service.html');     }else{         $smarty->assign('code',300);//錯誤碼         $smarty->assign('mess','操作失敗，請重試!');//錯誤資訊         $smarty->display('custom_service.html');         exit;     } }

客服顯示頁面 custom_service.html

<!DOCTYPE html> <html > <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />     <meta name="format-detection" content="telephone=no" />     <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">     <meta http-equiv="Pragma" content="no-cache">     <meta http-equiv="Expires" content="0">     <meta http-equiv="Cache" content="no-cache">     <!-- 這行代碼是永遠以最新的IE版本模式來顯示網頁，使IE支援HTML5。 -->     <meta http-equiv="X-UA-Compatible"  content="IE=edge，chrome=1">     <!-- 這行代碼是360浏覽器渲染頁面需預設用極速核心 -->     <meta name="renderer" content="webkit">     <meta name="keywords" content="個人首頁">     <meta name="description" content="個人首頁" />     <title>個人首頁</title>

    <link rel="stylesheet" type="text/css" href="./templates/media/css/base.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />     <link rel="stylesheet" type="text/css" href="./templates/media/css/index.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />     <style type="text/css">         .form1{ background-color: #e3e1e2;}     </style> </head> <body class="body-color"> <div class="main">     <div class="content" id="content">     </div> </div> <div class="main-bottom">     <div class="send clearfix">         <a οnclick="return GzcawlIndex.change_icon();"><img id="pic" src="./templates/media/image/close.png" width="44" height="44" alt="" data_key="close"/></a>         <textarea name="" class="send-textarea" id="msg"></textarea>         <button class="send-btn" οnclick="return GzcawlIndex.sendmsg();">發送</button>         <input type="hidden" id="sname"  value="<!--{$sername}-->" />         <input type="hidden" id="flag"  value="<!--{$flag}-->" />         <input type="hidden" id="sid" value="<!--{$serviceid}-->">         <input type="hidden" id="code" value="<!--{$code}-->">         <input type="hidden" id="mess" value="<!--{$mess}-->">     </div>

    <div class="send-images">         <iframe src="serfile.php?mytype=attach&gif|jpg|png" width="331px" height="47px" align="absmiddle" scrolling="no" frame class="form1"></iframe>             <p>相冊</p>         <input type="hidden" name="attach" id="attach" value="" />         <div id="attach_1"></div>     </div> </div> <!--{include file="comm/javascript_tmp.html"}--> <script>     var GzcawlIndex = function(){         var sendmsg = function(){             var msg = $('#msg' ).val();             var id = $('#sid' ).val();             var flag = $('#flag' ).val();             var attach = $('#attach' ).val();//圖檔             if(msg=='' && attach==''){                 layer.msg('請輸入發送内容或上傳附件');                 return false;             }

            ajax_get_data('custom_service.php?action=send&msg='+msg+'&id='+id+'&flag='+flag+'&attach='+attach,'',do_sendmsg,'POST','資料送出中');         };         var do_sendmsg = function(mydata){             var data_code = mydata.code;             switch(data_code) {                 case 200:                     $('#msg' ).val('');                     $('#attach' ).val('');                     $('#attach_1' ).html('');                     getwjmsg();//顯示發送消息                     break;                 default :                     layer.msg( mydata.msg , { icon : 2 , time : 3000 } );                     break;             }         };         var change_icon = function(){             var pic_obj =  $('#pic' );             var key = pic_obj.attr('data_key');             if(key=='close'){                 $('.send-images' ).css('display','none');                 pic_obj.attr('src','./templates/media/image/open.png');                 pic_obj.attr('data_key','open');             }             if(key=='open'){                 $('.send-images' ).css('display','block');                 pic_obj.attr('src','./templates/media/image/close.png');                 pic_obj.attr('data_key','close');             }             return false;         }         return {             sendmsg:function(){                 sendmsg();             },             change_icon:function(){                 change_icon();             }         };     }();

    var max_id = 0;     function getwjmsg(){         var id = $('#sid' ).val();//接入ID         var flag = $('#flag' ).val();         $.post('custom_service.php?action=getwjmsg&id='+id+'&flag='+flag+'&max_id='+max_id,function(data){             var re = '';             if(data.length>0) {                 for ( var i = 0 ; i < data.length ; i++ ) {                     re += (data[i ].showtime!=0 ? '<div class="main-time"><p>'+data[ i ].time+'</p></div>' : '')+'<div class="content-' + (data[ i ].flag == data[ i ].pe_whoid ? 'right' : 'left') + '"><em></em><p>' + (data[ i ].pe_whoid != data[ i ].flag ? (data[ i ].pe_whoid==1 ? data[ i ].wname+': ' : '客服'+data[ i ].pe_kfname+': ') : '')  + data[ i ].pe_reply + (data[i ].pe_attachment!='' ? ('<a href="'+data[i ].pe_attachment+'" target="_blank" rel="external nofollow" target="_blank"><img src="'+data[i ].pe_attachment+'" width="200px"></a>') : '')+'</p></div>';                     max_id = data[ i ].sysid;                 }             }             $( '#content' ).append( re );         },"json");     }

    //頁面加載完畢擷取消息     window.οnlοad=function(){         var code = $('#code' ).val();         if(code==300){             layer.msg($('#mess' ).val(),{ icon: 2, time: 3000  },function(){history.back();});             return false;         }         setInterval("getwjmsg()",5000);         GzcawlIndex.change_icon();     }

</script> </body> </html>

上傳iframe檔案 serfile.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>檔案上傳</title>     <link rel="stylesheet" type="text/css" href="./templates/media/css/base.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />     <link rel="stylesheet" type="text/css" href="./templates/media/css/index.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />     <style type="text/css">         .send-file-btn img{  z-index: 5555;}         .send-file-btn input{ position:absolute;left:0;top:0; width:46px; height:46px;cursor: pointer;opacity:0;}     </style>     <script src="./templates/media/js/jquery-1.12.3.min.js" type="text/javascript"></script> <script language="javascript"> function IsExt(url,opt){     var sTemp;     var b=false;     var s=opt.toLowerCase().split("|");     for (var i=0;i<s.length ;i++ ){         sTemp=url.substr(url.length-s[i].length-1);        sTemp=sTemp.toLowerCase();        s[i]="."+s[i];        if (s[i]==sTemp){            b=true;            break;        }     }     return b; }

function images_onchanges(){ var tmpmyext = location.href; //var  myext = tmpmyext.toLowerCase().split("?"); var myext = tmpmyext.toLowerCase().split("&");     if(typeof(myext[1]) !="undefined"){         if(IsExt(document.getElementById("uploadfilename").value,myext[1])){            return true;        }else{            alert('請把檔案轉成' + myext[1] + '格式');            return false;        }     }else{        alert("請指定要上傳的檔案類型！");        return false;     } }

    function upimage(){         $('#uploadfilename' ).click();         return false;     } </script> </head> <body> <form action="serup.php" id="form1" name="form1" οnsubmit="return images_onchanges()"   enctype="multipart/form-data" method="post" >     <div class="send-file-btn">         <img src="./templates/media/image/send-images.png" height="48" width="48" alt="" οnclick="return upimage()"/>         <input name="uploadfilename" id="uploadfilename" οnchange="return images_onchanges()"  type="file" />     </div>   <input name="upload_hidden" type="hidden" id="upload_hidden" value="1" />     <button class="upload" type="submit" name="Submit" id="Submit">上傳</button>   <input name="myuplodtype" type="hidden" id="myuplodtype" value="<?PHP echo($_GET["mytype"]); ?>" /> </form> </body> </html>

上傳處理檔案 serup.php

<?PHP set_time_limit(0); include_once("config.inc.php");

if($_POST["upload_hidden"] == "1"){     $file = $_FILES["uploadfilename"];     $p_myuplodtype = trim($_POST["myuplodtype"]);//儲存檔案名的文本框名     $filetype = $UPTYPE["myfiletype"];     $myfile = new zdeFile();

    $oldpath = $file['tmp_name'];

    $filename=strtolower(basename($file['name']));//取上傳檔案的小寫檔案名     $fileext=explode('.', $filename);//取字尾名     $arraynum = count($fileext) - 1;

    $file_size = ceil(filesize($oldpath)/1024);//檔案大小(K)     if($file_size>2500){        echo "<script>alert('上傳檔案超過1500K');history.go(-1);</script>";        exit();     }

    if(!in_array($fileext[$arraynum], $filetype)){//檢查檔案類型         die("<script>alert('upload error!file type Error!');history.back();</script>");     }     $timepath = date('Y',time())."/".date('m',time())."/".date('d',time())."/";     if($fileext[$arraynum] == 'swf'){        $newpath = "./uploadfile/flash/";     }elseif($fileext[$arraynum] == 'jpg' || $fileext[$arraynum] == 'gif' || $fileext[$arraynum] == 'png'){        $newpath = "./uploadfile/images/".$timepath;     }else{        $newpath = "./uploadfile/file/".$timepath;     }

    if($fileext[$arraynum]=='txt'){//如果為文本         $newname = time().".php";//新檔案名     }else{        $newname = time().".".$fileext[$arraynum];//新檔案名     }     $newpath .=  $newname;//新檔案名

    if($myfile->cp($oldpath,$newpath,true)){        if($fileext[$arraynum] == 'txt'){            $tmp_str = file($newpath);            if($tmp_str){                die("<script>parent.document.getElementById('".$p_myuplodtype."').value='".$newpath."';history.back(-1);</script>");            }else{                die("<script>alert('檔案内容為空,請重新選擇');history.back(-1);</script>");            }        }elseif( $fileext[$arraynum] == 'swf'){            die("<script>parent.document.getElementById('".$p_myuplodtype."').value='".$newpath."';parent.document.getElementById('".$p_myuplodtype."_1').innerHTML='flash檔案已成功上傳！';history.back(-1);</script>");        }else{            die("<script>parent.document.getElementById('".$p_myuplodtype."').value='".$newpath."';parent.document.getElementById('".$p_myuplodtype."_1').innerHTML='<img src=\"".$newpath."\" width=\"100px\"/>';history.back(-1);</script>");        }     }else{        die("upload error!");     } } ?>

消息處理檔案(ajax) custom_service.php

<?php include_once("config.inc.php"); //include_once("check_login.php"); $realname = $_SESSION['realname'];  //真實姓名 $logname  = $_SESSION['admin'];      //管理者登入名 $admin_id = $_SESSION['admin_id'];  //管理者ID $done_ip  = return_user_ip();       //管理者IP

$action = get_param("action"); $reply_sys = "您好，請問有什麼可以幫您？";

switch($action){     case 'getwjmsg'://接收消息         $id = get_param('id');//接入ID         $flag = get_param('flag');//接入身份         $max_id = get_param('max_id');

        //查詢玩家名稱         $where = " and sysid=$id";         $wname = get_info($GLOBALS['conn'],'game_player_bug',array('pb_nickname'),$where)['pb_nickname'];

        //查詢該使用者的接收消息         $condition = " pe_bugid=$id  and pe_isread=2 and sysid>$max_id ";         $sql = "SELECT * FROM ".get_table("game_player_exchange")." WHERE $condition order by pe_replytime asc";         $result  = $GLOBALS['conn']->Query($sql);         while($row = $GLOBALS['conn']->FetchArray($result)){             if($row['pe_whoid']!=$flag){                 //将查詢記錄改為已讀                 $up_arr = array('pe_isread' => 1);                 $where = " and sysid=".$row['sysid'];                 update_record($GLOBALS['conn'],'game_player_exchange',$up_arr,array(),$where);             }             //檢視上一條回複記錄的時間             $wherel = " and sysid=".($row['sysid']-1);             $retime = get_info($GLOBALS['conn'],'game_player_exchange',array('pe_replytime'),$wherel)['pe_replytime'];             $row['showtime'] =0;             if(($row['pe_replytime']-$retime)>180){                 $row['showtime'] = 1;//逾時顯示時間             }             $row['time'] = date('H:i',$row['pe_replytime']);//時間             $row['flag'] = $flag;             $row['wname'] = $wname;             $row['pe_attachment'] = $row['pe_attachment'] ?  : '';//圖檔             $list[] = $row;         }         $string = return_ajax($list);         echo $string;         break;     case 'send'://發送消息         $msg = get_param('msg');//内容         $id = get_param('id');//接入ID         $flag = get_param('flag');//接入身份         $attach = get_param('attach');//圖檔

        if($msg=='' && $attach==''){             $return_arr = array(                 'code' => 300,                 'msg'  => '請輸入發送内容或上傳附件',             );             $string = return_ajax($return_arr);             echo $string;exit;         }

        //新增回複記錄         $where = " and sysid=".$id;         $sinfo = get_info($GLOBALS['conn'],'game_player_bug',array(),$where);//查詢出接入資訊         if($sinfo['pb_addtime']=='0' && $flag==1){//玩家第一次提問             update_record($GLOBALS['conn'],'game_player_bug',array('pb_addtime'=>THIS_DATETIME),array(),$where);         }         if($sinfo['pb_isattach']==2 && $attach!=''){//沒有附件             update_record($GLOBALS['conn'],'game_player_bug',array('pb_isattach'=>1),array(),$where);         }

        $redata  = array(             'pe_bugid' => $id,             'pe_is_game' => $sinfo['pb_is_game'],             'pe_gameid' => $sinfo['pb_gameid'],             'pe_areaid' => $sinfo['pb_areaid'],             'pe_reply' => $msg,             'pe_attachment' => $attach ? : '',             'pe_replytime' => THIS_DATETIME,             'pe_whoid' => $flag,             'pe_kfid' => $sinfo['pb_receiveid'],             'pe_kfname' => $sinfo['pb_receicename'],             'pe_replyip' => $flag==1 ? $sinfo['pb_ip'] : $done_ip,         );

        $res = add_record($GLOBALS['conn'],'game_player_exchange',$redata);         if($res['rows']>0){             //新增成功             $return_arr = array(                 'code' => 200,                 'msg'  => '發送成功',             );         }else{             $return_arr = array(                 'code' => 300,                 'msg'  => '發送失敗，請重試',             );         }

        $string = return_ajax($return_arr);         echo $string;

        break;     default:         //is_per('10098');         $id = get_param('id','int');//接入ID         if($id==0){             showinfo('接入失敗','',3);         }

        //查詢出目前接入記錄         $where = " and sysid=".$id;         $info = get_info($GLOBALS["conn"],"game_player_bug",array(),$where);

         //新增一條即時通信資料         if($info) {             $a_nickname = get_nickname($admin_id);//客服昵稱             //更新接入記錄             $up_arr = array(                 'pb_receiveid' => $admin_id,                 'pb_receicename' => $a_nickname,                 'pb_receivetime' => THIS_DATETIME,             );             update_record($GLOBALS['conn'],'game_player_bug',$up_arr,array(),$where);             //發送客服接入消息             $pe_data = array(                 'pe_bugid' => $id,                 'pe_is_game' => $info['pb_is_game'],                 'pe_gameid' => $info['pb_gameid'],                 'pe_areaid' => $info['pb_areaid'],                 'pe_reply' => $reply_sys,                 'pe_replytime' => THIS_DATETIME,                 'pe_whoid' => 2,                 'pe_kfid' => $admin_id,                 'pe_kfname' => $a_nickname,                 'pe_replyip' => $done_ip             );             add_record($GLOBALS['conn'],'game_player_exchange',$pe_data);//新增一條即時資訊             $smarty->assign('serviceid', $id);//将接入ID傳入聊天頁面             $smarty->assign('flag',2);//2客服1玩家             $smarty->display('custom_service.html');         }else{             showinfo('操作失敗','',3);         }

        break; } if($GLOBALS["conn"]){ $GLOBALS["conn"]->Close(); }//關閉MYSQL連結