碼上歡樂
相關內容    簡體    繁體

用php+mysql+ajax實現淘寶客服或阿里旺旺聊天功能 之 后台頁面

本文轉載自   查看原文   2017-06-16 10:21   1152 

在上一篇隨筆中，我們已經看了如何實現前台的對話功能；前台我限定了店主只有一人，店鋪只有一個，所有比較單一，但后台就不一樣了，而后台更像是我們常見的聊天軟件；當然，前台也應該實現這種效果，但原理懂了，可以自己以后再擴展：

首先看一下要實現的效果：

實現的功能：

（1）右邊的聯系人列表：

　　　　未聯系過的不顯示；只顯示聯系過的；可以清空消息記錄；有新消息時會有提醒，當點擊后，提醒消失，清空按鈕出現；

（2）左邊的對話框

　　　　點擊右邊的聯系人，顯示該聯系人的頭像和他的對話消息（和前台頁面一樣）

 第一步：店主登錄查看信息頁面：

第二步：實現顯示列表

<div class="ff" style="background-color: ghostwhite;">
        	<div style="height: 100px; width: 300px;background-image: url(../img/1.jpg);">
//（1）讀取所有給店主發過信息的聯系人界面,包括頭像和姓名
        	<?php
        	$uid = $_SESSION["uid"];        
        	$sql = "select * from users where uid='{$uid}'";
        	$arr = $db->query($sql);
        	foreach($arr as $v)
        	{        		
        	echo "<div style='height:100px;width:100px;float:left;text-align:center;line-height:100px'>
        		<img src='{$v[6]}' height='80px' width='80px'/></div>
        		<div style='height:100px;width:200px;float:left;'>
        		<div style='height:40px;width:200px;text-align:left;line-height:40px'>
        			{$v[2]}
        		</div>
        		<div style='height:60px;width:200px;'>
        			個性簽名：
        			<input type='text' placeholder='不讀書怎么對得起今天!' style='width:180px'>
        		</div>	
        		</div>";	
        	}        	
        	?>
        	</div>
        	<div style="height: 30px; width: 300px;text-align:center;line-height:30px;border-bottom:2px solid grey;background-color: ghostwhite;">
        		我的聯系人
        	</div>
        	<div style="height: 470px; width: 300px;">
        		<?php
        	$uid = $_SESSION["uid"];
        	if($uid=="zhangsan")
        	{    
        		//讀取所有給張三發過信息的聯系人，並按發送時間的降序排序				    
        		$sql2="select * from duihua where jsid='{$uid}' group by uid order by dhtime desc";        		
        		$arr2= $db->query($sql2);    
  		
        		foreach($arr2 as $n)
        		{
                                 //從users表中讀取中文姓名
        			$sql3 = "select * from users where uid='{$n[2]}' ";
        			$arr3=$db->query($sql3);     
        			
        			//從對話表中讀取不同聯系人未讀信息的條數，
        			 	$sql4 = "select count(*) from duihua where uid='{$n[2]}' and isok='0'";
					$shumu =$db->strquery($sql4);													  			   			
        			echo "<div style='height:70px; width: 300px;border-bottom:2px solid grey;background-color:ghostwhite' class='guke dh' aaa='{$n[2]}'>
        				<div  style='height:70px; width: 100px; float:left;'>
        		 	<div style='height:50px;width:50px;margin:10px auto; border-radius:10px;overflow:hidden'>
        		       <img src='{$arr3[0][6]}' height='50px' width='50px'/>
        		    </div>
        				</div>";      
//如果有未讀消息，則顯示“XXX，有。。。條未讀，紅字” 				
        			if($shumu>0){	     			
        			echo"<div  style='height:70px; width: 100px;float:left;line-height:80px'>
        					{$arr3[0][2]} <span style='font-size:12px;color:red'>有{$shumu}新消息！</span>
        			</div>
				
        			</div>";       					
        				}
//否則，則只顯示XXX，和“清空”按鈕
        				else
        				{
        				echo"<div style='height:70px; width: 100px;float:left;line-height:80px'>
        					{$arr3[0][2]}  
        				</div>
        				<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>
        			       </div>";	
        				}
        		}
        	}      	
        	?>
        	</div>       	
        </div>

　　實現效果：

 

 

第三步：點擊該列表可以移動，實現移動：

這一塊內容可以借鑒05月12日寫的隨筆：http://www.cnblogs.com/chenguanai/p/6845240.html

    $(".ff").mousedown(function(e){
        //設置移動后的默認位置
        var endx=0;
        var endy=0;
        //獲取div的初始位置，要注意的是需要轉整型，因為獲取到值帶px
        var left= parseInt($(".ff").css("left"));
        var top = parseInt($(".ff").css("top"));
        //獲取鼠標按下時的坐標，區別於下面的es.pageX,es.pageY
        var downx=e.pageX;
        var downy=e.pageY;     //pageY的y要大寫，必須大寫！！
     //    鼠標按下時給div掛事件
    $(".ff").bind("mousemove",function(es){
        //es.pageX,es.pageY:獲取鼠標移動后的坐標
        var endx= es.pageX-downx+left;     //計算div的最終位置
        var endy=es.pageY-downy+top;
        //帶上單位
        $(".ff").css("left",endx+"px").css("top",endy+"px")    
    });    
  })
    
    $(".ff").mouseup(function(){
        //鼠標彈起時給div取消事件
        $(".ff").unbind("mousemove")
    })

　第四步：點擊不同的用戶進入不同用戶的界面（以頭像作為區別）；用session來做（核心）

<script>
  	$(".guke").dblclick(function(){
		var aaa=$(this).attr("aaa");	
  $.ajax({
			url:"yidu-cl.php",
			data:{yh:aaa},
			type:"POST",
			dataType:"TEXT",
			success: function(data){					
				window.location.href="ht-dh.php";				
			}			
		});
	})
	
</script>

　　yidu-cl.php頁面

<?php
session_start();
require "DBDA.class.php";
$db = new DBDA();
$uid=$_SESSION["uid"];

$yh=$_POST["yh"];
//存一下
$_SESSION["cuid"]=$yh;	
$sql = "update duihua set isok='1' where uid='{$yh}' and jsid='{$uid}'";
echo $sql;
$db->query($sql,0);
?>

　　

第四步：點擊陳三，進入與陳三的對話界面：

當我點擊陳三后，“有。。新消息”消失；出現清空按鈕；左側相應的變為與張三的對話界面

 

 實現代碼：

	<div id="zhongjian">

					<!--對話-->
				<div id="mid">
	<!--判斷是否已經存了cuid,注意一點，這是前半部分代碼；后半部分代碼在最后邊；不然會報錯的！！！！-->
					          <?php
          	if(!empty($_SESSION["cuid"]))
          	{
          ?>
     <div id="kuangjia" style="background-color: whitesmoke;height: 550px;width: 620px;margin: 0px auto;border: 1px solid gainsboro; ">
			<div id="neirong" style="height: 400px;width: 620px;">
				<div style="height: 100px;width: 620px;background-image: url(../img/bj4.jpg);">
	<!--取存的cuid，顯示該聯系人的頭像姓名等信息-->
				<?php
        	$cuid = $_SESSION["cuid"];
        	$sql3 = "select * from users where uid='{$cuid}'";
        	$arr3 = $db->query($sql3);
        	foreach($arr3 as $c)
        	{        		
        	echo "
        	<div style='height:100px;float:left;width:100px;float:left;'>
        		<div style='border:2px solid grey;height:84px;width:84px;margin:7px auto; border-radius:10px;overflow:hidden'>
        		<img src='{$c[6]}' height='80px' width='80px'/>
        		</div>
        		</div>
        		<div style='height:100px;width:500px;float:left;'>
        		<div style='height:50px;width:500px;text-align:left;line-height:50px'>
        			{$arr3[0][2]}
        		</div>       		
        			<div style='height:50px;width:500px;text-align:left;'>個性簽名：
        			<input type='text' placeholder='店主，便宜點!' style='width:280px'>       			     			
        		</div>
        		</div>
        		";	
        	}       	
        	?>
        	</div>    	
        	<!--讀取聊天內容-->
        	<div style="height: 300px;width: 620px;overflow: auto;overflow-x:hidden ;">
   		   <?php
					$cuid = $_SESSION["cuid"];
				
					$sql4 = "select * from users where uid='{$cuid}'";
        	        $arr4 = $db->query($sql4);
		
					$sql5="select * from duihua where uid='{$cuid}' or jsid='{$cuid}' order by dhtime";					
					$arr5= $db->query($sql5);
					foreach($arr5 as $f)
					{
					//該聯系人的信息顯示在左側，和前台相反
					if($f[2]==$cuid)
					{
					echo "<div style='height:100px;width:600px;'>
					<div style='height:100px;width:300px;float:left'>
						<div style='height:20px;width:300px;font-size:13px;padding-left:20px'>
								{$f[6]}</div>
						<div style='height:80px;width:50px;float:left'>
							<div style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'>
								<img src='{$arr4[0][6]}' height='50px' width='50px'/>
							</div>
						</div>
						<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;'>
							<p style='padding-left:20px; line-height:40px'>
								{$f[4]}</p>								
						</div>					
					</div></div>";
					}		
					//如果是店主，則顯示在右側			
				  if($f[2]=='zhangsan')
					{												
					echo "<div style='height:100px;width:600px;margin-right:20px'>
					<div style='height:100px;width:300px; float:right'>
						<div style='height:20px;width:300px;font-size:13px;padding-right:20px'>
								{$f[6]}</div>
						<div style='height:80px;width:50px;float:right'>
							<div style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'>
								<img src='{$v[6]}' height='50px' width='50px'/>
							</div>
						</div>
						<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;'>
							<p style='padding-left:20px; line-height:40px'>
								{$f[4]}</p>								
						</div>					
					</div></div>";	
					}					
					}		
					?> 		        		
        	</div>		
			</div> <!--id="neirong"-->
		<form role="form">
		  <div class="form-group">
		    <textarea class="form-control" rows="3" id="words"></textarea>
		  </div>
		</form>
		<div id="fs" style="height: 50px; width: 600px;text-align: right; padding-right: 50px;">
		<button type="button" class="btn btn-success guanbi"  bbb="<?php  echo $cuid;  ?>" >關閉</button>
		<button type="button" class="btn btn-success fasong">發送</button>
		</div>
		</div>
	<!--是最開始判斷是否為空的結尾-->	
     <?php
          }
      ?>
			</div>	<!--id=mid-->
	</div> <!--id=zhongjian-->

　第五步：點擊清空

	$(".qk").click(function(){
		var ccc=$(this).attr("ccc");
		  $.ajax({
			url:"qk-cl.php",
			data:{yh:ccc},
			type:"POST",
			dataType:"TEXT",
			success: function(data){	
				alert("刪除成功！");				
				window.location.href="ht-dh.php";				
			}			
		});
		
	})

　　qk-cl.php頁面：

<?php
session_start();
require "DBDA.class.php";
$db = new DBDA();
$uid=$_POST["yh"];
$sql = "delete from duihua where uid='{$uid}'";
$db->query($sql,0);

　現在我們來全部看一遍：以陳三為例

1、先清空陳三的聊天記錄（只有王五一人）

 

2、登錄陳三的賬號，發布一個信息

              

3、登錄張三的賬號，會發現多了陳三的對話列表

 

 4、點擊陳三；出現與陳三的對話列表，同時提示消失，出現清除按鈕

5、點擊清空按鈕：

        

這樣就實現了全部效果了~~~如果把前台也做成后台這種效果，那就和qq、阿里旺旺等聊天工具一樣啦~~

難點是：

　　　　點擊不同用戶出現與不同用戶的對話框，觸發點擊事件時存一下session；

　　　　發送內容時，點擊發送，刷新讀取內容時存的cuid是否依舊存在？（加判斷）；

　　　　邏輯要清晰，因為要不斷用用戶名從users表讀取頭像和姓名；所以sql語句有點多，也有點繞。慢慢來

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 php客服聊天功能（后台） PHP+MYSQL+AJAX實現每日簽到 php實現客服聊天功能（前台） PHP+mysql+ajax搭建圖書管理系統 PHP+Swoole實現微信小程序客服即時通信聊天功能 再學ajax--第二天 | 基於php+mysql+ajax的表單注冊、登錄、注銷 關閉阿里旺旺后台服務 JAVA結合WebSocket實現簡單客服聊天功能 php實現簡單聊天功能 h5頁面客服功能-打開qq/微信聊天彈窗
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM