即时聊天室开发0.03版：实现对应账号的聊天内容

今天开始讲解即时聊天室的0.0.3版，想了解上一篇文章的朋友们可查看即时聊天室开发0.02版：前端注册登录的代码编写。

基于上个版本的最后规划，这个版本是要将聊天内容对应的账号也显示出来的。先上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图形化客户端功能一般更强大，更适合开发。

最后再规划一下下个版本，下个版本我打算增加后台页面，对聊天内容进行维护管理。

作者：负重前进的篮球