繼續(xù)上篇文章（鏈接）垢啼，把功能添加到項(xiàng)目里面
項(xiàng)目使用thinkphp3.2.3開發(fā)
現(xiàn)在主要做手機(jī)端功能阿逃，頁面也是手機(jī)端的頁面先慷，用到了vue,js，可以實(shí)現(xiàn)消息自動滾動到底部的最新消息
更多歷史消息往上滾動查看
頁面和樣式代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>web chat</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#page{width: 100%;height: 100%;}
#page{position: relative;}
#page header{width: 100%;height: 45px;color: white;font-size: 15px;position: relative;text-align: center;background: #40a2fe;line-height: 45px;}
#page header .logo{position: absolute;width: 33px;height: 33px;border-radius: 50%;left: 10px;top: 6px;}
#page header .logo img{width: 100%;height: 100%;display: block;border-radius: 50%;}
#page .msg-box{position: absolute;top: 45px;left: 0;right: 0;bottom: 38px;overflow: auto;}
#page .msg-box ul{}
#page .msg-box ul li{font-size: 14px;list-style: none;overflow: auto;}
#page .msg-box ul .all-list{}
#page .msg-box ul .all-list img{width: 45px;height: 45px;border-radius: 50%;display: block;margin: 8px;float: left;}
#page .msg-box ul .all-list p{max-width: 239px;padding: 12px;float: left;background: #a2d6f3;color: #000;border: 1px solid #91c9e9;border-radius: 5px;box-shadow: 2px 2px #369bdb;margin-top: 15px;word-wrap:break-word; word-break:normal;}
/*#page .msg-box ul .all-list:after{content: "";clear: both;visibility: hidden;height: 0;}*/
#page .msg-box ul .muchlist{padding: 10px;text-align: center;}
#page .msg-box ul li a{padding: 5px 10px;background: #e2e2e2;text-decoration: none;font-size: 12px;border-radius: 5px;color: #666;}
#page .msg-box ul li a:hover{text-decoration: none;}
#page .msg-box ul .right p{box-shadow: -2px 2px #369bdb;float: right;}
#page .msg-box ul .right img{float: right;}
#page .send-box{position: absolute;left: 0;width: 100%;bottom: 0;background: #CECECE;height: 38px;text-align: center;}
#page .send-box input{width: 298px;height: 30px;font-size: 12px;border: 1px solid #fff;border-radius: 5px;margin-top: 3px;}
#page .send-box button{height: 30px;padding: 0 10px;border:1px solid #cecece;color: white;}
/*.right{text-align: right;}
li{list-style: none;}
ul{width: 80%;margin: 0 auto;border: 1px solid #cecece;}
.muchlist{color: lightblue;text-align: center;font-size: 12px;margin-bottom: 10px;padding: 6px;}*/
</style>
</head>
<body>
<div id="page">
<header>
<div class="logo">
</div>
接收者<select id="uid">
<for start="1" end="20">
<option value="{$i}">{$i} 號</option>
</for>
</select>
</header>
<div class="msg-box">
<ul id="charBox" style="height: 100%; overflow-x:auto;">
<li class="muchlist" id="more_data_btn">
<a href="javascript:void(0)" onclick="more_data()">查看更多歷史消息</a>
</li>
<li v-for="item in items" :class="{right:item.right}" class="all-list">
<p>{{item.text}}</p>
</li>
</ul>
</div>
<div class="send-box">
<input type="hidden" name="uid" id="uid2" value="1">
<input type="text" name="msg" id="msg" value=""/>
<button id="send">發(fā)送</button>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var scroll_bottom = true; // 全局變量蹄梢，是否滾動到底部
var data_length = 0; // 全局變量，vue里面獲取新加入的歷史數(shù)據(jù)的長度
$(function() {
$("#send").click(function() {
send_msg();
});
$('#msg').keyup(function(event) {
if(event.keyCode===13){
send_msg();
}
});
});
function send_msg(){
var uid = $('#uid').val();
var msg = $('#msg').val();
$.post("{:U('Index/message')}", {
uid: uid,
msg: msg
},
function(data) {
$('#msg').val('');
});
}
function more_data(){
var uid = $('#uid').val();
$.post("{:U('Index/more_msg')}", {
uid: uid
},
function(data) {
if(data == 'null'){
$('#more_data_btn').hide();
alert('沒有更多消息了');
return false;
}
scroll_bottom = false;
var dataxx = JSON.parse(data)
data_length = dataxx.length;
for (var i = 0; i < data_length; i++) {
dataIm.unshift(dataxx[i]);
}
});
}
</script>
<script type="text/javascript">
var dataIm = {$arr['json']};
var vm = new Vue({
el:"#page",
data:{
items:dataIm
},
computed:{
msgbox(){
return document.getElementById("charBox")
}
},
updated:function(){
console.log(scroll_bottom);
if(scroll_bottom == true){
this.msgbox.scrollTop=this.msgbox.scrollHeight
}else{
scroll_bottom = true;
var li = document.getElementById('charBox').getElementsByTagName('li');
var liheight = 0;
for(var i=0;i<data_length;i++){
liheight += li[i].offsetHeight;
}
console.log(liheight);
document.getElementById("charBox").scrollTop = liheight;
}
}
})
</script>
<script type="text/javascript">
function insert_data(received_msg){
// console.log('插入消息：'+received_msg);
dataIm.push(received_msg);
// console.log(dataIm+'-dataIm');
}
// 打開一個 web socket
var ws = new WebSocket("ws://127.0.0.1:8282");
ws.onopen = function() {};
ws.onmessage = function(evt) {
var received_msg = evt.data;
console.log(received_msg);
var jmsg = JSON.parse(received_msg);
if (jmsg.text) {
insert_data(jmsg);
}
if (jmsg.client_id) {
$.post("{:U('Index/bind')}", {
client_id: jmsg.client_id
},
function(data) {
console.log(data);
});
}
}
</script>
</body>
</html>
php代碼如下：
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public $uid = 10;
public function index() {
$this->display();
}
public function chat() {
$this->uid = I('uid');
if($this->uid == 0) $this->error("請選擇用戶");
session('uid', $this->uid);
$this->assign('uid',$this->uid);
// 此處查詢當(dāng)前用戶的聊天記錄富俄，輸出到頁面
$list[0]['text'] = "ThinkPHP框架";
$list[0]['right'] = 0;
$list[0]['imgsrc'] = C('HOST').'/Public/images/pic.jpg';
$list[1]['text'] = "Ci框架";
$list[1]['right'] = 1;
$list[1]['imgsrc'] = C('HOST').'/Public/images/pic.jpg';
$arr['json'] = json_encode($list);
if(count($list) < 1) $arr['json'] = '[]';
$this->assign('arr',$arr);
$this->display();
}
function bind() {
$uid = session('uid');
$client_id = I('client_id');
$gateway = new \Org\Util\Gateway();
$gateway->bindUid($client_id, $uid);
$count = $gateway->getAllClientCount();
$message = '綁定成功' . $uid . '-' . $client_id.'-共有'.$count.'個人在線';
echo $message;
// $gateway->sendToUid($uid, $message);
}
function message() {
// 此處處理接收用戶發(fā)過來的消息內(nèi)容禁炒，保存數(shù)據(jù)庫，推送給發(fā)送者和接受者
$to_uid = I('uid');
$message = I('msg');
$gateway = new \Org\Util\Gateway();
$data['text'] = $message;
$data['from_uid'] = session('uid');
$data['to_uid'] = $to_uid;
$data['right'] = 0;
$data['imgsrc'] = C('HOST').'/Public/images/pic.jpg';
if ($gateway->isUidOnline($to_uid)) {
// 判斷接受小時著是否在線蛙酪，在線執(zhí)行發(fā)送消息
$gateway->sendToUid($to_uid, json_encode($data));
}else{
$data['text'] .= '[對方不在線]';
}
$data['right'] = 1;
$gateway->sendToUid($data['from_uid'], json_encode($data)); // 發(fā)給自己
echo json_encode($data);
}
function more_msg(){
// 此處根據(jù)當(dāng)前用戶和聊天用戶查詢數(shù)據(jù)返回聊天記錄數(shù)組
$list[0]['text'] = "1";
$list[0]['right'] = 0;
$list[0]['imgsrc'] = C('HOST').'/Public/images/pic.jpg';
$list[1]['text'] = "2";
$list[1]['right'] = 1;
$list[1]['imgsrc'] = C('HOST').'/Public/images/pic.jpg';
echo json_encode($list);
}
}
