genaller / genal-chat Goto Github PK

View Code? Open in Web Editor NEW

1.9K 21.0 371.0 32.63 MB

🚀阿童木聊天室 nestjs+vue全栈聊天室前后端分离 typescript一把梭

Home Page: https://www.genal.fun

License: MIT License

JavaScript 3.08% HTML 0.66% Vue 45.94% TypeScript 48.35% SCSS 1.98%

vue nodejs typescript typeorm socket-io vuex chatbot chatroom nestjs javascript

genal-chat's Introduction

阿童木聊天室

码云

~~在线地址www.genal.fun~~（已失效，不打算部署了）

有建议请到issues区

项目简介

😛 闲暇时间想做一个聊天室来巩固前端技能，于是在2020年6月24号就开始了阿童木聊天室的开发之旅。
😈 项目采用全typescript开发，这是为了以后的功能迭代打基础。当然，我本身也是很喜欢typescript的。
🧐 目前聊天室已经具备完整的聊天功能，~~今后会陆续开发更多酷炫的功能~~目前已经停止迭代！有兴趣的朋友可以自行fork去开发，你们随意改！我有时间再进行升级新功能!

项目界面

PC端

移动端

功能介绍

移动端兼容
用户信息的修改(头像/用户名/密码)
群聊/私聊
创建群/加入群/退群/模糊搜索群
添加好友/删好友/模糊搜索用户
消息分页
表情包
图片发送/图片预览
在线人数统计
自定义主题
重连提醒

技术概览

Typescript：JavaScript 的一个超集，它最大的优势是提供了类型系统和提高了代码的可读性和可维护性。
Vue2.6.x：前端渐进式框架。
Socket/io：实现实时通信，websocket第三方库。
Vuex：专为 Vue.js 应用程序开发的状态管理模式。
Nestjs：是一个用于构建高效、可扩展的 Node.js 服务端应用框架，基于 TypeScript 编写并且结合了 OOP1、FP2、FRP3 的相关理念。
Typeorm: 支持最新的 JavaScript 特性并提供额外的特性以帮助你开发任何使用数据库的应用程序。
ES6+：采用ES6+语法，箭头函数、async/await等等语法很好用。
SASS(SCSS)：用SCSS做CSS预处理语言，可以使用最高效的方式，以少量的代码创建复杂的设计。

数据库表结构设计

环境配置

数据库mysql 以及 chat数据库 (注意数据库格式为utf8mb4)
node v10.16.3

运行项目

前端项目

cd genal-chat-client 
npm i
npm run serve

mysql配置
如果mysql连不上并报错error: ER_NOT_SUPPORTED_AUTH_MODE，是mysql版本不兼容导致，参考这篇文章https://blog.csdn.net/qq_41831345/article/details/83150502
数据库没有sql脚本，直接改后端app.module.ts中的数据库密码，新建个chat数据库了就行
后端项目

cd genal-chat-server
npm i
npm run start:dev

系统迭代记录

点击查看

v1.0.0

功能

新增用户
新增群
群聊

v1.0.0界面

v2.0.0

功能

群聊/私聊
创建群/加入群聊/模糊搜索群
添加好友/模糊搜索好友
更改用户名/头像上传
表情包
消息分页

v2.0.0界面

v3.0.0

功能

群聊/私聊
创建群/加入群聊/模糊搜索群
添加好友/模糊搜索好友
图片上传/粘贴发送图片/图片预览
更改用户名/头像上传
表情包
消息分页

v3.0.0界面

同v2.0.0

v4.0.0

功能

群聊/私聊
创建群/加入群聊/模糊搜索群
添加好友/模糊搜索好友
图片上传/粘贴发送图片/图片预览
更改用户名/头像上传
表情包
消息分页
移动端兼容

v4.0.0界面

同v2.0.0

v5.0.0

功能

群聊/私聊
创建群/加入群聊/退群/模糊搜索群
添加好友/删好友/模糊搜索好友
图片上传/粘贴发送图片/图片预览
更改用户名/头像上传
表情包
消息分页
移动端兼容
在线人数统计
重连提醒

v5.0.0界面

v6.0.0

功能

移动端兼容
用户信息的修改(头像/用户名/密码)
群聊/私聊
创建群/加入群/退群/模糊搜索群
添加好友/删好友/模糊搜索用户
消息分页
表情包
图片发送/图片预览
在线人数统计
自定义主题
重连提醒

v6.0.0界面

作者

github： edison

贡献者列表

mtnbgx、BoBoooooo、Nyaasu66、BeanCookie（排名不分先后）

如何部署

阿童木聊天室部署说明

genal-chat's People

Contributors

Stargazers

Watchers

Forkers

z992 joncv zzhij jeanne-run beancookie humorfish cai233 bigmudebaba djdeo zwenli amazingman1 go-on-the-way knightgao cch12 peanut429 wenqiyun cheneyzhangch xoyimi infinityboy catzillaorz futechlab zhoukingzz pickpgk incitygod wangfangc beiatisi gnipbao youngnet shdlijianleilike yingchenit longzitianya youzixr adminhcat jieshaoli joshuazax aqmzj jimolangyaleng webliuxiang rosejjj jacketlee liuqingyou123 shuntian xiaopingzi1 vulcaner mabing2637 my-webchat-learning woaini521 e1fang lugeruthless workwsl dl-85 lhx11187 sanyuesiyuewuyue truexin1292 sringly baijianruoliorz asked637 hedou zppsakura wareexception keepstudies herewer xieyuh nulipanta adamstream wolzche lxngoddess5321 shuwenkai treecn liaoyq66 dbdoer bigwolf23 j963022657 bestjex lveven tolixian honglouyimeng fzpixzj90h7baqieoop5hg eyexin hfutcsy axipo changgusheng toyuri453 lyj505 sybb0807 develon2015 moocss cao1109056621 scarsu shania-li-xian sky8196 heerey525 skylingfly justinzyh xweizhang chelestewang funcater lovetheworldaways weianke yangyis

genal-chat's Issues

不兼容IE11

hi，作者你好，我在运行这个项目的时候发现不兼容IE11浏览器，主要是以下原因导致的：

viewer和object-assign这两个依赖在编译后依然会有箭头函数和let关键字，而这两个特性在IE11上不支持

我按vuecli4官网提供的方法改过配置，包含修改matin.ts时的包引入和babel.config.js的相关配置，但编译后的包依然包含上述两个新特性

这个有解决办法吗

npm build之没有生成dist目录

运行完npm run build之后

运行环境Vultr虚拟机Alma Linux
尝试找了一下当前目录，以及Ngin的安装目录，都没有找到

web3

你好，我打算用你的前端项目做一个基于web3的聊天项目，请问是否许可？遇到问题是否有联系方式请教呢？

启动报错

您好，后端项目启动报如下错误，无法定位错误原因，麻烦指点一下
[6:21:11 PM] Starting compilation in watch mode...

[6:21:15 PM] Found 0 errors. Watching for file changes.

[Nest] 7923 - 08/04/2022, 6:21:16 PM [NestFactory] Starting Nest application...
[Nest] 7923 - 08/04/2022, 6:21:16 PM [InstanceLoader] AppModule dependencies initialized +66ms
[Nest] 7923 - 08/04/2022, 6:21:16 PM [InstanceLoader] TypeOrmModule dependencies initialized +1ms
[Nest] 7923 - 08/04/2022, 6:21:16 PM [InstanceLoader] PassportModule dependencies initialized +0ms
[Nest] 7923 - 08/04/2022, 6:21:16 PM [InstanceLoader] JwtModule dependencies initialized +1ms
[Nest] 7923 - 08/04/2022, 6:21:16 PM [TypeOrmModule] Unable to connect to the database. Retrying (1)... +81ms
QueryFailedError: ER_INVALID_DEFAULT: Invalid default value for 'username'
at new QueryFailedError (/usr/local/chat-server/node_modules/typeorm/error/QueryFailedError.js:11:28)
at Query. (/usr/local/chat-server/node_modules/typeorm/driver/mysql/MysqlQueryRunner.js:170:45)
at Query. (/usr/local/chat-server/node_modules/mysql/lib/Connection.js:526:10)
at Query._callback (/usr/local/chat-server/node_modules/mysql/lib/Connection.js:488:16)
at Query.Sequence.end (/usr/local/chat-server/node_modules/mysql/lib/protocol/sequences/Sequence.js:83:24)
at Query.ErrorPacket (/usr/local/chat-server/node_modules/mysql/lib/protocol/sequences/Query.js:92:8)
at Protocol._parsePacket (/usr/local/chat-server/node_modules/mysql/lib/protocol/Protocol.js:291:23)
at Parser._parsePacket (/usr/local/chat-server/node_modules/mysql/lib/protocol/Parser.js:433:10)
at Parser.write (/usr/local/chat-server/node_modules/mysql/lib/protocol/Parser.js:43:10)
at Protocol.write (/usr/local/chat-server/node_modules/mysql/lib/protocol/Protocol.js:38:16)
[Nest] 7923 - 08/04/2022, 6:21:19 PM [TypeOrmModule] Unable to connect to the database. Retrying (2)... +3030ms
QueryFailedError: ER_INVALID_DEFAULT: Invalid default value for 'username'
at new QueryFailedError (/usr/local/chat-server/node_modules/typeorm/error/QueryFailedError.js:11:28)
at Query. (/usr/local/chat-server/node_modules/typeorm/driver/mysql/MysqlQueryRunner.js:170:45)
at Query. (/usr/local/chat-server/node_modules/mysql/lib/Connection.js:526:10)
at Query._callback (/usr/local/chat-server/node_modules/mysql/lib/Connection.js:488:16)
at Query.Sequence.end (/usr/local/chat-server/node_modules/mysql/lib/protocol/sequences/Sequence.js:83:24)
at Query.ErrorPacket (/usr/local/chat-server/node_modules/mysql/lib/protocol/sequences/Query.js:92:8)
at Protocol._parsePacket (/usr/local/chat-server/node_modules/mysql/lib/protocol/Protocol.js:291:23)
at Parser._parsePacket (/usr/local/chat-server/node_modules/mysql/lib/protocol/Parser.js:433:10)
at Parser.write (/usr/local/chat-server/node_modules/mysql/lib/protocol/Parser.js:43:10)
at Protocol.write (/usr/local/chat-server/node_modules/mysql/lib/protocol/Protocol.js:38:16)

后端新增群与用户中间表

抖音上刷到一个教学的跟你这个ui风格很像是作者吗

考虑做个docker安装版么

跟MySQL环境不匹配的问题调了半天, 考虑做个docker版的吗, 可以快速搭建出来

没有找到后端的sql文件

Unable to connect to the database. Retrying (1)... +35ms
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

放置在网站二级目录，打开空白，如何修改打包呢

似乎删除好友另一边没有及时收到消息

这算个bug吗，还是没做这个功能

这东西还能被伪造身份么，作者想一下你的认证机制中怎么搞得

在线人数可有上限？

最多支持多少人同时在线聊天

支持游客免登录模式进入聊天吗？

无法创建群

rt 创建群之后，提交没有反应。
另外如何让创建的群默认显示在所有注册用户的列表上？

考虑升级vue3吗

npm run build warning

root@ice:~/chat/genal-chat-6.0.0/genal-chat-client#  npm i

> [email protected] install /root/chat/genal-chat-6.0.0/genal-chat-client/node_modules/yorkie
> node bin/install.js

sh: node: command not found
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})

npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] install: `node bin/install.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-11-02T09_22_44_081Z-debug.log

有数据库表sql吗？

可以提供数据库sql吗

v2功能开发

后端重构

/socket.io/?userId 接口一直出现{"code":1,"message":"Session ID unknown"}

在本地部署，不会出现问题。
在阿里云服务器部署，一直出现{"code":1,"message":"Session ID unknown"}的错误。
麻烦看下啦，谢谢。

用户密码加密方式

这个用户密码的加密方式是啥，我想试着连通wordpress的账号

【nginx.conf 】修改建议

大佬你好,部署的时候发现一个小问题.

依照readme中nginx.conf配置,生产环境中访问页面全部css会失效并报错如下:

Resource interpreted as Stylesheet but transferred with MIME type text/plain...

http{
include mime.types; // 需要补充这个配置
....
}

建议:注册和登录机制

你好阿童木聊天室核心开发人员

建议使用这种登录机制

只能通过验证码登录，邮箱接收手机号验证码
给用户一个随机电话号码。您可以创建自己的区号示例有几个未使用的前缀。三位数前缀太多，二位数前缀是三个； +23、+83、+89……

关于nestJS后台维护sockeIO实例的性能开销问题

大神您好，跟着你的博客找到了这里，最近我也在用nestjs作为后端开发聊天功能，想问一下按你这里每个用户都建一个socket房间的方法的话，具体性能开销有测试过吗，用户量上去之后会有性能问题吗？ Server这里是会一直维持每一个socket的room的实例还是只有client发送信息的时候才会新建一个room实例呀？烦请大神赐教哈~

关于在树莓派3A+上部署的问题

ERROR Error loading /home/pi/genal-chat-master/genal-chat-client/vue.config.js:
ERROR SyntaxError: Invalid or unexpected token
/home/pi/genal-chat-master/genal-chat-client/node_modules/ajv-keywords/index.js:5
@-webkit-keyframes antCheckboxEffect {
^

SyntaxError: Invalid or unexpected token
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object. (/home/pi/genal-chat-master/genal-chat-client/node_modules/webpack/node_modules/schema-utils/src/validateOptions.js:13:18)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: vue-cli-service build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-07-27T10_24_28_723Z-debug.log

编译时报错，不知道如何解决