大家好，我是一位在架构师道路上狂奔的码农，今天给大家推荐一款开源的学习前端知识的优秀聊天室项目，相比较昨天的即时通信项目，更加具有灵动性。

简介：

genal-chat 这个开源项目名为阿童木聊天室，主要使用 TypeScript 语言进行开发。它提供了一个完整的聊天室应用程序，包括前端和后端的代码。项目的前端使用了 React 框架，后端使用了 Node.js 和 Socket.io 技术，整体代码简单易懂，结构清晰。对于学习会有非常大的帮助。

项目功能介绍

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

项目运行

• 环境配置

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

• 项目运行

1. 前端项目运行

cd genal-chat-client 
npm i
npm run serve

2. mysql 数据库配置

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

3. 后端项目运行

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

项目演示

• 登录与发送消息

• 切换主题

• 创建群聊与搜索群聊

• 添加好友与删除好友

• 退出群聊与退出登录

最后：

一台电脑，一个键盘，一根网线便能打下一片天下，几个字母一些数字便能创造辉煌人生，一个指令一次回车便能成就一个新的世界，游走于指尖的快乐并不是说说而已，他承载的是无尽的荣耀。 创作不易，如果小编的创作分享对各位兄弟姐妹有所帮助，还请各位兄弟姐妹动动发财的小手，加个关注、点个赞，你们的小小举动是对小编最大的认可，更是小编不断分享的动力！

ps: 开源项目地址：
https://github.com/genaller/genal-chat