聊天软件开发文档(即时聊天室开发历程-0.0.3版)

今天开始讲解即时聊天室的0.0.3版,想了解上一篇文章的朋友们可查看即时聊天室开发历程-0.0.2版

基于上个版本的最后规划,这个版本是要将聊天内容对应的账号也显示出来的。先上2张效果图

聊天软件开发文档(即时聊天室开发历程-0.0.3版)(1)

聊天软件开发文档(即时聊天室开发历程-0.0.3版)(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图形化客户端功能一般更强大,更适合开发。

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页