相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
- PHP中opcode緩存簡(jiǎn)單用法分析
- thinkPHP控制器變量在模板中的顯示方法示例
- PHP move_uploaded_file() 函數(shù)(將上傳的文件移動(dòng)到新位置)
- dirname(__FILE__)的含義和應(yīng)用說明
- thinkPHP5框架實(shí)現(xiàn)分頁(yè)查詢功能的方法示例
- PHP中單雙號(hào)與變量
- PHP獲得當(dāng)日零點(diǎn)時(shí)間戳的方法分析
- Laravel ORM對(duì)Model::find方法進(jìn)行緩存示例詳解
- PHP讀寫文件高并發(fā)處理操作實(shí)例詳解
- 【CLI】利用Curl下載文件實(shí)時(shí)進(jìn)度條顯示的實(shí)現(xiàn)
PHP+Mysql+Ajax實(shí)現(xiàn)淘寶客服或阿里旺旺聊天功能(前臺(tái)頁(yè)面)

首先來(lái)看一下我已經(jīng)實(shí)現(xiàn)的效果圖:
消費(fèi)者頁(yè)面:(本篇隨筆)
(1)會(huì)顯示店主的頭像
(2)當(dāng)前用戶發(fā)送信息顯示在右側(cè),接受的信息,顯示在左側(cè)
店主或客服頁(yè)面:(下一篇隨筆)
(1)在左側(cè)有一個(gè)列表 ,會(huì)顯示所有與店主對(duì)話的顧客;該列表可以移動(dòng);有新消息時(shí)會(huì)提示;也可以清空該聊天記錄
(2)點(diǎn)擊列表里的顧客進(jìn)入右邊的對(duì)話框界面,顯示與該顧客的聊天信息
在實(shí)現(xiàn)功能之前,來(lái)說一下我用到的兩張表:
解釋一下:bkid在此處沒有用到;isok列是用來(lái)判斷消息是否已讀,未讀為0;
現(xiàn)在,來(lái)說一下步驟:(分前臺(tái)和后臺(tái)兩部分)
在這篇隨筆中我們首先來(lái)說一下前臺(tái)頁(yè)面是如何實(shí)現(xiàn)的:(李四登錄)
用session存取一下lisi;便于后面從user表中取數(shù)據(jù)
1、布局頁(yè)面代碼以及讀取數(shù)據(jù)代碼:
<!--中間內(nèi)容--> <div id="zhongjian"> <div id="kuangjia" style="height: 550px;width: 620px; margin: 0px auto;border: 1px solid gainsboro;background-color: white;"> <div id="neirong" style="height: 400px;width: 600px;"> <div style="height: 100px;width: 620px;background-image: url(../img/bj4.jpg);"> //取店主用戶名,顯示店主的頭像和姓名<br> <?php $uid = $_SESSION["uid"]; $sql = "select * from users where uid='zhangsan'"; $arr = $db->query($sql); foreach($arr as $v) { 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='{$v[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'> 親愛的店主 </div> <div style='height:50px;width:500px;text-align:left;'>個(gè)性簽名: <input type='text' placeholder='不讀書怎么對(duì)得起今天!' style='width:280px'> </div> </div> "; } ?> </div> <div style="height: 300px;width: 620px;overflow: auto;overflow-x:hidden ;"><br> //獲取session里存取的uid; <?php $uid = $_SESSION["uid"]; $sql3 = "select * from users where uid='{$uid}'"; $arr3 = $db->query($sql3);<br> //從對(duì)話表里讀取店主張三和李四所有的對(duì)話信息,并按對(duì)話時(shí)間順序排序 $sql2="select * from duihua where uid='{$uid}' or jsid='{$uid}' order by dhtime"; $arr2= $db->query($sql2); foreach($arr2 as $n) {<br> //如果是店主,則信息要顯示在左側(cè) if($n[2]=='zhangsan') { echo "<div style='height:100px;width:600px;'> <div style='height:100px;width:250px;float:left'> <div style='height:20px;width:250px;font-size:13px;padding-left:20px'> {$n[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='{$v[6]}' height='50px' width='50px'/> </div> </div> <div style='min-height:40px;width:200px;float:left;background-color:cornflowerblue; 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'> {$n[4]}</p> </div> </div></div>"; } <br>//如果是李四,則顯示在右側(cè) if($n[2]==$uid) { echo "<div style='height:100px;width:600px;margin-right:20px'> <div style='height:100px;width:250px; float:right'> <div style='height:20px;width:250px;font-size:13px;padding-right:20px'> {$n[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='{$arr3[0][6]}' height='50px' width='50px'/> </div> </div> <div style='min-height:40px;width:200px;float:right;background-color:pink; 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'> {$n[4]}</p> </div> </div></div>"; } } ?> </div> </div> <!--id="neirong"--><br> <form role="form"> <div class="form-group"> <textarea class="form-control" rows="3" id="words"></textarea> //輸入發(fā)送內(nèi)容 </div> </form> <div id="fs" style="height: 50px; width: 600px;text-align: right; padding-right: 50px;"> <button type="button" class="btn btn-success fasong">發(fā)送</button> //點(diǎn)擊按鈕發(fā)送 </div> </div> </div> <!--id=zhongjian-->