继续上篇文章（链接），把功能添加到项目里面
项目使用thinkphp3.2.3开发
现在主要做手机端功能，页面也是手机端的页面，用到了vue,js，可以实现消息自动滚动到底部的最新消息
更多历史消息往上滚动查看
页面和样式代码如下：
<!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">发送</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里面获取新加入的历史数据的长度
$(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);
// 此处查询当前用户的聊天记录，输出到页面
$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() {
// 此处处理接收用户发过来的消息内容，保存数据库，推送给发送者和接受者
$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)) {
// 判断接受小时着是否在线，在线执行发送消息
$gateway->sendToUid($to_uid, json_encode($data));
}else{
$data['text'] .= '[对方不在线]';
}
$data['right'] = 1;
$gateway->sendToUid($data['from_uid'], json_encode($data)); // 发给自己
echo json_encode($data);
}
function more_msg(){
// 此处根据当前用户和聊天用户查询数据返回聊天记录数组
$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);
}
}
网友评论