Swoole+React 实现的聊天室
126

个人站点可以关注一波
https://laravelchen.com/

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

1.项目链接

1.1 swoole(请star)

https://github.com/LaravelChen/swoole_chat_framework

1.2 react(请star)

https://github.com/LaravelChen/React-Small-Chat

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

https://github.com/LaravelChen/swoole_api_framework
性能展示(强,强,强)
file

2.简介

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

3.主要实现

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

4.安装

4.1后台安装

这里只是后台逻辑,前端的对应项目请移步到: https://github.com/LaravelChen/React-Small-Chat

php server start

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

4.2前端安装

npm install
npm run start

5.项目效果

5.1 畅聊室

image
image

5.2 私聊室

image
image

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

6.postman接口参考

https://www.getpostman.com/collections/7f9681a60db29dfa0dce

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;

LaravelChen

本帖由系统于 5个月前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 28
LaravelChen

好好看代码,其实有很多有意思的地方哦!

5个月前
BradStevens

厉害了

5个月前
LaravelChen

@BradStev 其实项目中的架构和思想蛮值得学习的,只看我这篇简陋的文章其实看不出名堂。?

5个月前
BradStevens

@LaravelChen 整个都是你写的?我在看那个框架,有详细的文档一类的吗?

5个月前
LaravelChen

@BradStev 如果你说的是easySwoole的话是有文档的,我自己的那个没有文档。其实认真看也看得懂?

5个月前
BradStevens

@LaravelChen 好的,我先看看的,谢谢了

5个月前
LaravelChen

@BradStev 刚刚加了一个postman的接口,你自己可以对着看看怎么请求的
https://www.getpostman.com/collections/7f9681a60db29dfa0dce

5个月前

数据库表结构能提供一下吗? :+1:

5个月前
LaravelChen

@coderKong 好的

5个月前
OMGZui

值得玩一玩

5个月前
LaravelChen

@OMGZui 好好玩玩,里面的架构和代码好好看,会有很大收获的,真的

5个月前

React-Small-Chat 编译失败.. 开始提示少了react-router的包 我npm install react-router一下 然后就提示
./src/compoents/Main/NavBar.js
115:28-32 'react-router' does not contain an export named 'Link'.
有啥解决办法没

5个月前
LaravelChen

@CorePlusPlus npm install react-router@3.2.0 ,你安装的因该是4.0版本了,里面的router已经不支持LINK

5个月前

刚准备用 swoole+ vue 做一个聊天室玩,没想到这里发现一个现成的

5个月前

@LaravelChen 我谷歌查了下确实是版本的问题 这个解决了 但npm run start 报了一大堆警告 感觉是没跑起来 我想问一下运行端口在哪里修改 Nginx已经占了80端口

5个月前
LaravelChen

@CorePlusPlus npm run start -p 3000

5个月前
guansq

file
报这个错误怎么解决?

4个月前

Module not found: Can't resolve 'react-router' 前端框架报的错
已经在评论中找到答案了,感觉作者无私分享

4个月前

请问如何在项目中使用呢

4个月前
韩槑槑

:triumph: 代码中使用了 react-router ,但是 package.json 中并没有加载它

4个月前
Jourdon

easyswoole并不是composer 进来的?如果easyswoole之后升级了,这个改起来不是比较麻烦?

4个月前

技术楼主,已关注网站

4个月前
LaravelChen

@Jourdon 是的!这个要问easyswoole的作者了

3个月前
LaravelChen

@duantianhen 谢谢

3个月前

请问一下swoole_chat_framework项目与swoole_api_framework项目的区别是什么和这两个需要配合使用吗?

3个月前
LaravelChen

@sethhu api那个是我封装好的api框架,你要开启一个新项目可以直接用,像laravel一样。。。。而chat那个是聊天室的后端源码,

3个月前

file您好,为什么我前端编译报这个错,我是前端小白

2个月前
tegic

不用websocket差评

2个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!