即时聊天室开发0.02版：心跳功能+注册登录设计

想了解上一版的朋友们可查看即时聊天室开发0.01版(uniapp+easyswoole框架搭建)，这个版本我已经完成了短期规划的心跳功能的补充，甚至还想新增用户注册登录功能，由于个人状态一般般，只是写了后端的功能。虽然东西新增不多，但是我会讲解得更加细致。

首先讲下我已经完成的心跳功能。

前端代码新增部分

uni.onSocketOpen(function (res) {

console.log('WebSocket连接已打开！');

setInterval(() => {

that.sendSocketMessage('alive');

}, 30000);

});

在侦听websocket打开事件中加进定时器，重点关注如下部分代码：

setInterval(() => {

that.sendSocketMessage('alive');

}, 30000);

这里我设定为30秒发送一次心跳，我随便发送了alive字符串，大家可以自己定义发送内容。

后端代码新增部分

打开dev.php文件，然后新增如下2项配置

‘heartbeat_check_interval’ => 30, //心跳检测每隔多少秒，遍历一遍所有的连接

‘heartbeat_idle_time’ => 65, //心跳检测最大闲置时间，超时触发close并关闭默认为heartbeat_check_interval的2倍，两倍是容错机制，多一点是网络延迟的弥补

最后就是测试，我这边手机开启飞行模式，过了1分多钟时间，服务端会自动断开与手机客户端的连接。

我先讲下我在这版想要新增的注册登录的设计

我计划点击发送按钮时，通过判断是否处于登录状态。如果处于登录状态，就正常发送聊天内容。如果处于未登录状态就弹窗展示注册登录界面。首次登录设计为注册。登录时只需要填写账号密码2项信息即可。登录弹窗里面一共会有5个元素，分别是账号密码标识文字和对应输入框，最后还有一个登录按钮。加上弹窗本身，一共6个元素，想想第一版才3个元素，这都翻倍新增了元素了。

由于前端还没完成，这里先讲后端方面情况。之前一直先讲前端再讲后端，其实前后端并没有先后实现顺序，可以同时进行代码编写的。

后端编码之前，我这边安装了几个软件，先介绍一下

1.apipost。用过postman的朋友们会有一种熟悉的感觉。这是一款测试加自动生成接口说明文档的软件

2.SQLyog – 64 bit。我喜欢使用的一款数据库图形客户端，相比网页版的phpmyadmin，我更喜欢SQLyog。至少数据表多的时候，不用翻页了。

3.Navicat Premium 12。这款数据库图形客户端，我用来进行数据库建模。

后端功能实现可以分为数据表设计和代码编写2部分。

1.数据表设计

我先建立一张用户表

CREATE TABLE `user` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`account` varchar(50) DEFAULT NULL COMMENT ‘账号’,

`pwd` varchar(100) DEFAULT NULL COMMENT ‘密码’,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COMMENT=’用户’

再建立一张用户登录信息表

CREATE TABLE `user_token` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`user_id` int(10) unsigned NOT NULL COMMENT ‘用户id’,

`token` varchar(100) NOT NULL COMMENT ‘登录令牌’,

`client` tinyint(1) NOT NULL COMMENT ‘登录渠道。1：H5，2：APP，3：小程序’,

`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT ‘首次登录时间’,

`update_time` datetime NOT NULL COMMENT ‘最后一次登录时间’,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT=’用户登录信息’

然后建模

在这里，我根据产品设计分析下为什么需要这2张表。

用户表用来存储用户的账号密码，显然是需要的。而用户登录信息表有什么作用呢？如果你曾经是一个php开发者，那么你有可能知道session这个东西。session经常被用来记录登录状态。但是session是基于文件系统设计的，如果将来后端服务器需要进行负载均衡，那么登录状态并不能正确维护。当然有些人就会说，你的开发才处于初始阶段，使用session在性能方面相比使用mysql更好，等到进行负载均衡时再重构代码。或者到时候还可以直接使用redis来存储登录状态。是的，这些我都考虑了。包括微信小程序不支持cookie，从而影响session使用，还有我需要实现踢人下线的功能，使用令牌比session可以避免csrf问题。好处坏处都有，我最终还是选择了用数据库存储token的方案来代替session的登录状态。

2.代码编写

先声明一下，我对easyswoole框架也是刚接触，有讲得不到位，希望大家能多多谅解。

我先上一张框架结构图

不用理会User.php这个文件，这个是我在学习中测试产生的。

这里我新建了Model文件夹，同时在下面新建了UserModel.php和UserTokenModel.php文件，然后在HttpController文件夹下新建Login.php文件

UserModel.php文件内容如下，UserTokenModel.php同理就不展示了。

<?php

namespace AppModel;

use EasySwooleORMAbstractModel;

/**

* Description of User

*

* @author

*/

class UserModel extends AbstractModel

{

protected $tableName = 'user';

}


Login.php代码如下

<?php

namespace AppHttpController;

use AppModelUserModel;

use AppModelUserTokenModel;

use EasySwooleHttpAbstractInterfaceController;

/**

* Description of Login

*

* @author

*/

class Login extends Controller {

public function login()

{

$request = $this->request();

$data = $request->getRequestParam();

// var_dump($data);


$user = new UserModel();

$user_result = $user->get([

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

'pwd' => sha1($data['pwd']),

]);


if ($user_result === NULL) {

$user['account'] = $data['account'];

$user['pwd'] = sha1($data['pwd']);

$id = $user->save();

} else {

$user_result = $user_result->toArray();

var_dump($user_result);

$id = $user_result['id'];

}


$token = md5($id.time().$data['client']);

$user_token = new UserTokenModel();

$user_token_result = $user_token->get([

'user_id' => $id,

'client' => $data['client']

]);

if ($user_token_result === NULL) {

$user_token['user_id'] = $id;

$user_token['token'] = $token;

$user_token['client'] = $data['client'];

$user_token['update_time'] = date('Y-m-d H:i:s');

$user_token->save();

} else {

$user_token_result = $user_token_result->toArray();

$user_token->update([

'token' => $token,

'update_time' => date('Y-m-d H:i:s')

], [

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

]);

}


// $this->writeJson(200, ['name' => 'easyswoole'], 'success!');

// 向客户端响应 json 字符串

$this->response()->withHeader('Content-Type', 'application/json;charset=utf-8');

$this->response()->write(json_encode([

'code' => '000000',

'sub_code' => '',

'msg' => '',

'data' => ['token' => $token]

]));

}

}

login方法里面实现了注册登录功能，当然还不够精细。输入输出参数没有进行封装，没有对输入进行基本验证，没有做事务处理等等。等进一步完善再和大家讲解这部分

展示一下该接口测试：