今天开始讲解即时聊天室的0.0.3版，想了解上一篇文章的朋友们可查看即时聊天室开发历程-0.0.2版
基于上个版本的最后规划，这个版本是要将聊天内容对应的账号也显示出来的。先上2张效果图
以上2张图显示了test和abc123账号以及对应的聊天内容，那么是怎么实现的呢？下面就来讲下相关的实现。
先讲讲实现思路。之前是通过websocket协议纯粹的发送和广播一下聊天内容，就是发送和广播一段字符串。现在聊天内容前面要加上账号的显示，那么这段要发送的字符串就要改为带上发送者的账号发送给服务端，然后服务端再把聊天内容和对应的账号再一起广播给所有在线用户。
确定了思路之后，再看看具体要怎么处理。如果是发送一段纯粹的字符串，那么怎么解析呢？于是乎，我想到了使用json来编码字符串。另外前端目前没有发送者的账号，那咋办呢？其实不要紧，用户在登录成功的时候，前端已经存下了一个登录令牌，前端发送登录令牌来代替发送者的账号也是可以的。一般的项目开发，也都是用发送登录令牌来代替要发送的用户信息，这样既减轻前端存储用户信息的压力，也保证了用户信息的安全性。
让我们一起来看看前端发送聊天内容的代码变化
send(){
let u_token = uni.getStorageSync('u_token');
if (u_token != '') {
this.sendSocketMessage(JSON.stringify({
'token':u_token,
'send_data':this.send_data
}));
} else {
this.inputDialogToggle();
}
}
我们看到要向服务端发送的数据已经使用了json编码了，并且看到其中一个要发送的参数就是使用了存储好的登录令牌u_token
this.sendSocketMessage(JSON.stringify({
'token':u_token,
'send_data':this.send_data
}));
然后我们一起看看服务器接收到前端发送的数据是怎么处理的，做了哪些改变
if ($frame->data != 'alive') {
$list = json_decode($frame->data, true);
$user_token = new UserTokenModel();
$user_token_result = $user_token->get([
'token' => $list['token']
]);
if ($user_token_result === NULL) {
$server->push($frame->fd, json_encode([
'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();
foreach($server->table as $row)
{
$server->push($row['fd'], json_encode([
'code' => 1,
'data' => [
'account' => $user_result['account'],
'content' => $list['send_data']
]
]));
}
}
}
接下来我讲以上代码逐段讲解
1.我们看到，if ($frame->data != 'alive')，这段代码首先去掉了来自心跳的信息处理
2.$list = json_decode($frame->data, true);，这段代码对来自前端的json编码的字符串进行解码
3.取出登录用户信息，代码如下
$user_token_result = $user_token->get([
'token' => $list['token']
]);
4.判断下用户有没有处于登录状态
if ($user_token_result === NULL)
未登录时，直接返回“未登录”描述信息，返回的代码也做了json编码，代码如下
$server->push($frame->fd, json_encode([
'code' => -1,
'msg' => '未登录'
]));
5.处于登录状态时取出用户账号信息，代码如下
$user_result = $user->get([
'id' => $user_token_result['user_id']
]);
6.将聊天内容以及对应账号广播给所有在线用户，返回数据也进行json编码
foreach($server->table as $row)
{
$server->push($row['fd'], json_encode([
'code' => 1,
'data' => [
'account' => $user_result['account'],
'content' => $list['send_data']
]
]));
}
接下来我们看看前端接收到后端返回的数据是如何处理的
uni.onSocketMessage(function (res) {
let obj = JSON.parse(res.data);
if (obj.code == 1) {
let key = uni.getStorageSync('extraLine');
key = key + obj.data.account + ':' + obj.data.content + '\n';
that.title = key;
uni.setStorageSync('extraLine', key);
} else {
console.log(obj.msg);
}
});
接下来继续对以上代码逐端讲解
1.let obj = JSON.parse(res.data);，这段代码对接收到的数据进行json解码
2.if (obj.code == 1)，判断一下后端返回的状态是否为1，1代表成功，不成功就打印一下不成功的信息console.log(obj.msg);
3.key = key + obj.data.account + ':' + obj.data.content + '\n';对收到的账号和聊天内容拼接处理，以后也可以扩展为账号单独处理为链接
讲完了细节，接下来再讲讲延申，大家也可以先消化下再往下看。
一.通过之前的讲解，大家可能会注意到有时候我会使用websocket协议，有时候我会使用http协议，那么这2种协议应该怎么选择呢？这个需要了解2种协议的一些差异之处。http协议的模式是一问一答，即客户端请求服务端响应。而websocket则是全双工模式，不仅支持客户端请求服务端响应，而且服务端还能主动向客户端发送数据。也就是当需要服务端主动向客户端发送数据时，使用http协议做不到，那么就可以考虑使用websocket协议，比如要做到广播。
二.大家可能会注意到目前我的讲解总是讲变化后的情况，并没有对比上一个版本的演化。这里我决定对项目代码增加版本管理，选择git。
选择了git就要使用git的服务端和客户端。
首先讲git服务端
1.使用第3方托管方式的git服务端，这种方式缺点在安全性不高，还有功能比较受限，优点在不用搭建git服务端
2.自行搭建简单git协议服务端，这种方式只适合小团队
3.自行搭建http协议服务端
4.自行搭建gitlab，这种方式适合有规模的团队
然后讲git客户端
我个人喜欢安装git客户端的同时多安装一个git图形化客户端，这类软件非常多，我选择了乌龟git。原因是git图形化客户端功能一般更强大，更适合开发。
最后再规划一下下个版本，下个版本我打算增加后台页面，对聊天内容进行维护管理。
