即时聊天室开发0.04最终版(完结篇)

今天接着讲解即时聊天室开发历程0.0.4版，想了解上一篇文章的朋友们可查看即时聊天室开发0.04版：聊天内容维护管理

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

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

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

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

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

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

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

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

chat_handler方法如下：

public static function chat_handler(SwooleWebSocketServer $server, SwooleWebSocketFrame $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 + 'n';


});

that.title = new_str;

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

} else {

console.log(obj.msg);

}

},

展示下客户端聊天界面