今天接着讲解即时聊天室开发历程0.0.4版，想了解上一篇文章的朋友们可查看即时聊天室开发历程-0.0.4版

接着上个版本的最后规划，需要将聊天内容取出来显示在后台，还有加一些操作对聊天内容进行维护。

先上一张已完成的后台页面效果图

后台要显示的聊天数据一般都是数据表里面的所有数据，图示实现了分页，另外还加上了“隐藏/显示”按钮来对聊天数据进行维护。后台前端UI框架采用了layui，还使用了jquery。如果大家熟悉vue.js+对应UI框架，就推荐用vue那套。另外表格进行了自适应处理

使用jquery+layui很简单，引入几个文件即可

实现一个表格也很简单，由于无法很好的黏贴，上图了

以上就是后台前端的所有代码

隐藏的功能指的是将在线聊天内容隐藏，显示的功能指的是将在线聊天内容恢复。

服务端websocket连接发送数据和返回数据都增加协议号，以便区分不同操作

chat_handler方法如下

public static function chat_handler(\Swoole\WebSocket\Server $server, \Swoole\WebSocket\Frame $frame, Array $request_data)

{

$user_token = new UserTokenModel();

$user_token_result = $user_token->get([

'token' => $request_data['token']

]);

if ($user_token_result === NULL) {

$server->push($frame->fd, json_encode([

'protocol' => 10000,

'code' => -1,

'msg' => '未登录'

]));

} else {

$user_token_result = $user_token_result->toArray();

$user = new UserModel();

$user_result = $user->get([

'id' => $user_token_result['user_id']

]);

$user_result = $user_result->toArray();

$user_chat = new UserChatModel();

$user_chat['user_id'] = $user_result['id'];

$user_chat['content'] = $request_data['send_data'];

$user_chat['ip'] = $server->getClientInfo($frame->fd)['remote_ip'];

$user_chat_id = $user_chat->save();

foreach($server->table as $row)

{

$server->push($row['fd'], json_encode([

'protocol' => 10000,

'code' => 1,

'data' => [

'id' => $user_chat_id,

'account' => $user_result['account'],

'content' => $request_data['send_data']

]

]));

}

}

}

uniapp前端发送和接收数据也增加协议号处理

uniapp前端存储的聊天数据改为使用json编码，代码如下

chat_handler(obj){

if (obj.code == 1) {

let key = uni.getStorageSync('extraLine');

let list = JSON.parse(key);

list.push(obj.data);

let new_str = '';

list.forEach((item,index)=>{ //js遍历数组

new_str = new_str + item.account + ':' + item.content + ' ';

});

that.title = new_str;

uni.setStorageSync('extraLine', JSON.stringify(list));

} else {

console.log(obj.msg);

}

},

展示下客户端聊天界面

以上是test和abc123用户的聊天界面，然后在管理后台页面对其中一条聊天信息进行隐藏，点击隐藏后如下图所示

再看看test和abc123账号的用户的聊天界面

效果立杆见影，马上就隐藏掉在线用户的聊天信息，后台显示聊天内容的功能就是恢复在线聊天内容，就不演示了。此隐藏功能可对用户已经发送的违法违规等聊天内容进行处理，当然以后还可以实现踢人下线，封号等一系列处理。而显示功能只是为了万一处理错了，能给用户恢复而已。

这个即时聊天室的系列开发历程我想也就告一段落，毕竟也越来越复杂了。这其中我的编码也出现了很多逻辑问题，但是我想告诉大家，人谁无错，知错能改就可以了。哪个成熟的软件没有经历出错然后不断迭代修复的阶段呢，关键是肯花费时间和人力成本去完善，不要因为市场一时的变化而对自己产品的不自信。