当前位置：Gxlcms > 数据库问题 > 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面

用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面

时间：2021-07-01 10:21:17 帮助过：11人阅读

在上一篇随笔中，我们已经看了如何实现前台的对话功能；前台我限定了店主只有一人，店铺只有一个，所有比较单一，但后台就不一样了，而后台更像是我们常见的聊天软件；当然，前台也应该实现这种效果，但原理懂了，可以自己以后再扩展：

首先看一下要实现的效果：

技术分享

实现的功能：

（1）右边的联系人列表：

　　　　未联系过的不显示；只显示联系过的；可以清空消息记录；有新消息时会有提醒，当点击后，提醒消失，清空按钮出现；

（2）左边的对话框

　　　　点击右边的联系人，显示该联系人的头像和他的对话消息（和前台页面一样）

 第一步：店主登录查看信息页面：

技术分享

第二步：实现显示列表

  1. <div class="ff" style="background-color: ghostwhite;">
  2.             <div style="height: 100px; width: 300px;background-image: url(../img/1.jpg);"><br>//（1）读取所有给店主发过信息的联系人界面,包括头像和姓名
  3.             <?php
  4.             $uid = $_SESSION["uid"];       
  5.             $sql = "select * from users where uid=‘{$uid}‘";
  6.             $arr = $db->query($sql);
  7.             foreach($arr as $v)
  8.             {              
  9.             echo "<div style=‘height:100px;width:100px;float:left;text-align:center;line-height:100px‘>
  10.                 <img src=‘{$v[6]}‘ height=‘80px‘ width=‘80px‘/></div>
  11.                 <div style=‘height:100px;width:200px;float:left;‘>
  12.                 <div style=‘height:40px;width:200px;text-align:left;line-height:40px‘>
  13.                     {$v[2]}
  14.                 </div>
  15.                 <div style=‘height:60px;width:200px;‘>
  16.                     个性签名：
  17.                     <input type=‘text‘ placeholder=‘不读书怎么对得起今天!‘ style=‘width:180px‘>
  18.                 </div>   
  19.                 </div>"; 
  20.             }          
  21.             ?>
  22.             </div>
  23.             <div style="height: 30px; width: 300px;text-align:center;line-height:30px;border-bottom:2px solid grey;background-color: ghostwhite;">
  24.                 我的联系人
  25.             </div>
  26.             <div style="height: 470px; width: 300px;">
  27.                 <?php
  28.             $uid = $_SESSION["uid"];
  29.             if($uid=="zhangsan")
  30.             {   
  31.                 //读取所有给张三发过信息的联系人，并按发送时间的降序排序                  
  32.                 $sql2="select * from duihua where jsid=‘{$uid}‘ group by uid order by dhtime desc";            
  33.                 $arr2= $db->query($sql2);   
  34.          
  35.                 foreach($arr2 as $n)
  36.                 {<br>                                 //从users表中读取中文姓名
  37.                     $sql3 = "select * from users where uid=‘{$n[2]}‘ ";
  38.                     $arr3=$db->query($sql3);    
  39.                      
  40.                     //从对话表中读取不同联系人未读信息的条数，
  41.                         $sql4 = "select count(*) from duihua where uid=‘{$n[2]}‘ and isok=‘0‘";
  42.                     $shumu =$db->strquery($sql4);                                                                           
  43.                     echo "<div style=‘height:70px; width: 300px;border-bottom:2px solid grey;background-color:ghostwhite‘ class=‘guke dh‘ aaa=‘{$n[2]}‘>
  44.                         <div  style=‘height:70px; width: 100px; float:left;‘>
  45.                     <div style=‘height:50px;width:50px;margin:10px auto; border-radius:10px;overflow:hidden‘>
  46.                        <img src=‘{$arr3[0][6]}‘ height=‘50px‘ width=‘50px‘/>
  47.                     </div>
  48.                         </div>";      <br>//如果有未读消息，则显示“XXX，有。。。条未读，红字”              
  49.                     if($shumu>0){                   
  50.                     echo"<div  style=‘height:70px; width: 100px;float:left;line-height:80px‘>
  51.                             {$arr3[0][2]} <span style=‘font-size:12px;color:red‘>有{$shumu}新消息！</span>
  52.                     </div>
  53.                  
  54.                     </div>";                         
  55.                         }<br>//否则，则只显示XXX，和“清空”按钮
  56.                         else
  57.                         {
  58.                         echo"<div style=‘height:70px; width: 100px;float:left;line-height:80px‘>
  59.                             {$arr3[0][2]} 
  60.                         </div>
  61.                         <div class=‘qk‘ ccc=‘{$n[2]}‘ style=‘height:70px; width:50px;line-height:80px;float:right‘><button type=‘button‘ class=‘btn btn-danger‘ style=‘height:30px;width:50px‘ onclick=\"return confirm(‘确认清空该聊天记录吗？‘)\">清空</button></div>
  62.                            </div>";  
  63.                         }
  64.                 }
  65.             }      
  66.             ?>
  67.             </div>       
  68.         </div>

　实现效果：

技术分享

第三步：点击该列表可以移动，实现移动：

  1.   $(".ff").mousedown(function(e){
  2.       //设置移动后的默认位置
  3.       var endx=0;
  4.       var endy=0;
  5.       //获取div的初始位置，要注意的是需要转整型，因为获取到值带px
  6.       var left= parseInt($(".ff").css("left"));
  7.       var top = parseInt($(".ff").css("top"));
  8.       //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
  9.       var downx=e.pageX;
  10.       var downy=e.pageY;     //pageY的y要大写，必须大写！！
  11.    //    鼠标按下时给div挂事件
  12.   $(".ff").bind("mousemove",function(es){
  13.       //es.pageX,es.pageY:获取鼠标移动后的坐标
  14.       var endx= es.pageX-downx+left;     //计算div的最终位置
  15.       var endy=es.pageY-downy+top;
  16.       //带上单位
  17.       $(".ff").css("left",endx+"px").css("top",endy+"px")   
  18.   });   
  19. })
  20.    
  21.   $(".ff").mouseup(function(){
  22.       //鼠标弹起时给div取消事件
  23.       $(".ff").unbind("mousemove")
  24.   })

第四步：点击不同的用户进入不同用户的界面（以头像作为区别）；用session来做（核心）　　

  1. <script>
  2.     $(".guke").dblclick(function(){
  3.         var aaa=$(this).attr("aaa");   
  4.   $.ajax({
  5.             url:"yidu-cl.php",
  6.             data:{yh:aaa},
  7.             type:"POST",
  8.             dataType:"TEXT",
  9.             success: function(data){                   
  10.                 window.location.href="ht-dh.php";              
  11.             }          
  12.         });
  13.     })
  14.      
  15. </script>

yidu-cl.php页面

  1. <?php
  2. session_start();
  3. require "DBDA.class.php";
  4. $db = new DBDA();
  5. $uid=$_SESSION["uid"];
  6.  
  7. $yh=$_POST["yh"];<br>//存一下
  8. $_SESSION["cuid"]=$yh; 
  9. $sql = "update duihua set isok=‘1‘ where uid=‘{$yh}‘ and jsid=‘{$uid}‘";
  10. echo $sql;
  11. $db->query($sql,0);
  12. ?>

　

第四步：点击陈三，进入与陈三的对话界面：

当我点击陈三后，“有。。新消息”消失；出现清空按钮；左侧相应的变为与张三的对话界面

技术分享

实现代码：

  1. <div id="zhongjian">
  2.  
  3.                 <!--对话-->
  4.             <div id="mid">
  5. <!--判断是否已经存了cuid,注意一点，这是前半部分代码；后半部分代码在最后边；不然会报错的！！！！-->
  6.                           <?php
  7.         if(!empty($_SESSION["cuid"]))
  8.         {
  9.       ?>
  10.  <div id="kuangjia" style="background-color: whitesmoke;height: 550px;width: 620px;margin: 0px auto;border: 1px solid gainsboro; ">
  11.         <div id="neirong" style="height: 400px;width: 620px;">
  12.             <div style="height: 100px;width: 620px;background-image: url(../img/bj4.jpg);">
  13. <!--取存的cuid，显示该联系人的头像姓名等信息-->
  14.             <?php
  15.         $cuid = $_SESSION["cuid"];
  16.         $sql3 = "select * from users where uid=‘{$cuid}‘";
  17.         $arr3 = $db->query($sql3);
  18.         foreach($arr3 as $c)
  19.         {              
  20.         echo "
  21.         <div style=‘height:100px;float:left;width:100px;float:left;‘>
  22.             <div style=‘border:2px solid grey;height:84px;width:84px;margin:7px auto; border-radius:10px;overflow:hidden‘>
  23.             <img src=‘{$c[6]}‘ height=‘80px‘ width=‘80px‘/>
  24.             </div>
  25.             </div>
  26.             <div style=‘height:100px;width:500px;float:left;‘>
  27.             <div style=‘height:50px;width:500px;text-align:left;line-height:50px‘>
  28.                 {$arr3[0][2]}
  29.             </div>           
  30.                 <div style=‘height:50px;width:500px;text-align:left;‘>个性签名：
  31.                 <input type=‘text‘ placeholder=‘店主，便宜点!‘ style=‘width:280px‘>                                
  32.             </div>
  33.             </div>
  34.             "; 
  35.         }          
  36.         ?>
  37.         </div>       
  38.         <!--读取聊天内容-->
  39.         <div style="height: 300px;width: 620px;overflow: auto;overflow-x:hidden ;">
  40.        <?php
  41.                 $cuid = $_SESSION["cuid"];
  42.              
  43.                 $sql4 = "select * from users where uid=‘{$cuid}‘";
  44.                 $arr4 = $db->query($sql4);
  45.      
  46.                 $sql5="select * from duihua where uid=‘{$cuid}‘ or jsid=‘{$cuid}‘ order by dhtime";                
  47.                 $arr5= $db->query($sql5);
  48.                 foreach($arr5 as $f)
  49.                 {
  50.                 //该联系人的信息显示在左侧，和前台相反
  51.                 if($f[2]==$cuid)
  52.                 {
  53.                 echo "<div style=‘height:100px;width:600px;‘>
  54.                 <div style=‘height:100px;width:300px;float:left‘>
  55.                     <div style=‘height:20px;width:300px;font-size:13px;padding-left:20px‘>
  56.                             {$f[6]}</div>
  57.                     <div style=‘height:80px;width:50px;float:left‘>
  58.                         <div style=‘height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;‘>
  59.                             <img src=‘{$arr4[0][6]}‘ height=‘50px‘ width=‘50px‘/>
  60.                         </div>
  61.                     </div>
  62.                     <div style=‘min-height:40px;width:250px;float:left;background-color:pink; border-bottom-right-radius: 10px;border-top-right-radius: 10px;border-top-left-radius: 40px;border-bottom-left-radius: 40px;‘>
  63.                         <p style=‘padding-left:20px; line-height:40px‘>
  64.                             {$f[4]}</p>                              
  65.                     </div>                   
  66.                 </div></div>";
  67.                 }      
  68.                 //如果是店主，则显示在右侧         
  69.               if($f[2]==‘zhangsan‘)
  70.                 {                                              
  71.                 echo "<div style=‘height:100px;width:600px;margin-right:20px‘>
  72.                 <div style=‘height:100px;width:300px; float:right‘>
  73.                     <div style=‘height:20px;width:300px;font-size:13px;padding-right:20px‘>
  74.                             {$f[6]}</div>
  75.                     <div style=‘height:80px;width:50px;float:right‘>
  76.                         <div style=‘height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;‘>
  77.                             <img src=‘{$v[6]}‘ height=‘50px‘ width=‘50px‘/>
  78.                         </div>
  79.                     </div>
  80.                     <div style=‘min-height:40px;width:250px;float:right;background-color:cornflowerblue; border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;‘>
  81.                         <p style=‘padding-left:20px; line-height:40px‘>
  82.                             {$f[4]}</p>                              
  83.                     </div>                   
  84.                 </div></div>"; 
  85.                 }                  
  86.                 }      
  87.                 ?>                      
  88.         </div>       
  89.         </div> <!--id="neirong"-->
  90.     <form role="form">
  91.       <div class="form-group">
  92.         <textarea class="form-control" rows="3" id="words"></textarea>
  93.       </div>
  94.     </form>
  95.     <div id="fs" style="height: 50px; width: 600px;text-align: right; padding-right: 50px;">
  96.     <button type="button" class="btn btn-success guanbi"  bbb="<?php  echo $cuid;  ?>" >关闭</button>
  97.     <button type="button" class="btn btn-success fasong">发送</button>
  98.     </div>
  99.     </div>
  100. <!--是最开始判断是否为空的结尾--> 
  101.  <?php
  102.       }
  103.   ?>
  104.         </div>    <!--id=mid-->
  105. </div> <!--id=zhongjian-->

　第五步：点击清空

  1. $(".qk").click(function(){
  2.     var ccc=$(this).attr("ccc");
  3.       $.ajax({
  4.         url:"qk-cl.php",
  5.         data:{yh:ccc},
  6.         type:"POST",
  7.         dataType:"TEXT",
  8.         success: function(data){   
  9.             alert("删除成功！");            
  10.             window.location.href="ht-dh.php";              
  11.         }          
  12.     });
  13.      
  14. })

　qk-cl.php页面：

  1. <?php
  2. session_start();
  3. require "DBDA.class.php";
  4. $db = new DBDA();
  5. $uid=$_POST["yh"];
  6. $sql = "delete from duihua where uid=‘{$uid}‘";
  7. $db->query($sql,0);

　

现在我们来全部看一遍：以陈三为例

1、先清空陈三的聊天记录（只有王五一人）

技术分享

 

2、登录陈三的账号，发布一个信息

技术分享    技术分享

3、登录张三的账号，会发现多了陈三的对话列表

技术分享

4、点击陈三；出现与陈三的对话列表，同时提示消失，出现清除按钮技术分享

 5、点击清空按钮：

技术分享

技术分享

这样就实现了全部效果了~~~如果把前台也做成后台这种效果，那就和qq、阿里旺旺等聊天工具一样啦~~

难点是：

　　　　点击不同用户出现与不同用户的对话框，触发点击事件时存一下session；

　　　　发送内容时，点击发送，刷新读取内容时存的cuid是否依旧存在？（加判断）；

　　　　逻辑要清晰，因为要不断用用户名从users表读取头像和姓名；所以sql语句有点多，也有点绕。慢慢来

 

 

 

　

　

　

　

　　

　

 

用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面

标签：个性   包括   type   设置   from   12px   add   overflow   ajax   

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！