Swoole+React 实现的聊天室

OwenZhang

发布于 2021-12-09 18:52:50

5910

发布于 2021-12-09 18:52:50

文章被收录于专栏：Owen's World

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前后端分离的项目，使用 Swoole+React 实现的聊天室，整个项目的框架结构可以进行参考，前端 react+react-redux+react-router+react-ant 等等，后台使用 easySwoole，自行实现中间件（数据封装，token 验证，签名验证), 认真看代码可以学到很多哦，?！

1. 项目链接

1.1 swoole（请 star）

github.com/LaravelChen…

1.2 react（请 star）

github.com/LaravelChen…

1.3 api 框架 (基本需求已全部实现，可以自己试试？)

github.com/LaravelChen… 性能展示 (强，强，强)

2. 简介

本人为了更加便利的开发，自行实现了中间件，封装了请求数据体，利用 jwt 实现 api 的 token 验证，集成了 Laravel 的 ORM，再次封装了一套适合 api 编写流程的数据请求流程，具体可以看 App/Base 目录下的 Model 类，具体开发步骤详见代码即可。

3. 主要实现

登录注册，验证码发送（如果需要测试，可以结合前端 react 将验证码打印出来即可）
公共聊天室（一旦用户登录，用户列表即会增加，该用户可以进行加好友操作）
消息推送（可以利用 swoole 的异步进程实现）
私聊室（加完好友即可进行私聊）
其余功能可以添加......

4. 安装

4.1 后台安装

这里只是后台逻辑，前端的对应项目请移步到: github.com/LaravelChen…

php server start
复制代码

因为 swoole 常驻内存，所以一旦修改代码，需要重启。

4.2 前端安装

npm install
npm run start
复制代码

5. 项目效果

5.1 畅聊室

5.2 私聊室

此外，还有其他的加好友，消息推送等效果不演示了，可以自行下载安装使用，效果很好！

6.postman 接口参考

www.getpostman.com/collections…

7. 数据表结构

1. 数据库名

swoole_framework
复制代码

chat_content 表

CREATE TABLE `chat_content` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
  `user_id` int(11) NOT NULL COMMENT '用户id',
  `to_user_id` int(11) DEFAULT NULL COMMENT '接收方',
  `action` enum('PUBLIC','PRIVATE') NOT NULL DEFAULT 'PUBLIC' COMMENT '操作样式',
  `chat_content` varchar(255) NOT NULL DEFAULT '' COMMENT '聊天记录',
  `created_at` datetime DEFAULT NULL COMMENT '创建时间',
  `updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `deleted_at` timestamp NULL DEFAULT NULL COMMENT '删除时间',
  PRIMARY KEY (`id`),
  KEY `user_id` (`user_id`,`to_user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=116 DEFAULT CHARSET=utf8mb4;
复制代码

friends 表

CREATE TABLE `friends` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL COMMENT '用户id',
  `to_user_id` int(11) DEFAULT NULL COMMENT '好友id',
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
  `deleted_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;
复制代码

notification 表

CREATE TABLE `notification` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `type` enum('ADDUSER') NOT NULL DEFAULT 'ADDUSER' COMMENT '类型',
  `action` enum('RECEIVE','REFUSE','DEFAULT') DEFAULT 'DEFAULT' COMMENT '当前的种类',
  `user_id` int(11) NOT NULL COMMENT '发送方id',
  `message` varchar(255) DEFAULT NULL COMMENT '信息',
  `to_user_id` int(11) NOT NULL COMMENT '接送方id',
  `is_read` enum('YES','NO') NOT NULL DEFAULT 'NO' COMMENT '是否已读',
  `created_at` datetime NOT NULL COMMENT '创建时间',
  `updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `deleted_at` timestamp NULL DEFAULT NULL COMMENT '删除时间',
  PRIMARY KEY (`id`),
  KEY `type` (`type`,`user_id`,`to_user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4;
复制代码

users 表

CREATE TABLE `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
  `phone` varchar(13) NOT NULL DEFAULT '' COMMENT '手机号',
  `name` varchar(55) NOT NULL DEFAULT '' COMMENT '姓名',
  `email` varchar(30) NOT NULL DEFAULT '' COMMENT '邮箱地址',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像地址',
  `password` varchar(100) NOT NULL DEFAULT '' COMMENT '密码',
  `created_at` datetime DEFAULT NULL COMMENT '创建时间',
  `updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `deleted_at` timestamp NULL DEFAULT NULL COMMENT ' 删除时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `phone` (`phone`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB AUTO_INCREMENT=89 DEFAULT CHARSET=utf8;
复制代码

Buy me a cup of coffee :)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年10月20日，如有侵权请联系 cloudcommunity@tencent.com 删除

laravel