用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能 之 後臺頁面
阿新 • • 發佈：2017-06-28
聯系人 http esc hold 聊天內容 12px onclick onf pda
在上一篇隨筆中，我們已經看了如何實現前臺的對話功能；前臺我限定了店主只有一人，店鋪只有一個，所有比較單一，但後臺就不一樣了，而後臺更像是我們常見的聊天軟件；當然，前臺也應該實現這種效果，但原理懂了，可以自己以後再擴展：
首先看一下要實現的效果：
實現的功能：
（1）右邊的聯系人列表：
未聯系過的不顯示；只顯示聯系過的；可以清空消息記錄；有新消息時會有提醒，當點擊後，提醒消失，清空按鈕出現；
（2）左邊的對話框
點擊右邊的聯系人，顯示該聯系人的頭像和他的對話消息（和前臺頁面一樣）
第一步：店主登錄查看信息頁面：
第二步：實現顯示列表
<div class="ff" style="background-color: ghostwhite;">
<div style="height: 100px; width: 300px;background-image: url(../img/1.jpg);"><br>//（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)
{<br> //從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>"; <br>//如果有未讀消息，則顯示“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>";
}<br>//否則，則只顯示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>
實現效果：
第三步：點擊該列表可以移動，實現移動：
$(".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"];<br>//存一下
$_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語句有點多，也有點繞。慢慢來
用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能 之 後臺頁面