Swoole+React 实现的聊天室

简介: Swoole+React 实现的聊天室

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

前后端分离的项目,使用 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…

性能展示 (强,强,强)

20210527153548522.png

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;

目录
相关文章
|
7月前
|
前端开发 IDE Java
构建一个基于React和Spring Boot的简易聊天室应用
构建一个基于React和Spring Boot的简易聊天室应用
131 0
|
资源调度 前端开发 API
基于 React、TS的聊天室monorepo实战
基于 React、TS的聊天室monorepo实战
183 1
|
2月前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
68 9
|
2月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
17天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
63 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
20天前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
24 1
|
2月前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
174 1
引领前端未来:React 19的重大更新与实战指南🚀
|
1月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
57 2