Astro Boy Chat Room
code cloud
Online address www.genal.fun (Invalid and no longer planned to be deployed)
If you have any suggestions, please go to the issues area
Project introduction
? In my spare time, I wanted to make a chat room to consolidate front-end skills, so I started the development journey of Astro Boy chat room on June 24, 2020.
? The project is developed using full typescript, which lays the foundation for future functional iterations. Of course, I also like typescript very much.
? At present, the chat room already has complete chat functions. More cool features will be developed in the future Iteration has been stopped now! Friends who are interested can fork and develop it themselves, and you can modify it as you like! I will upgrade new features when I have time!
Project interface
PC version
Mobile terminal
Function introduction
- Mobile compatible
- Modification of user information (avatar/user name/password)
- Group chat/private chat
- Create group/join group/leave group/fuzzy search group
- Add friends/delete friends/fuzzy search users
- Message pagination
- Emoticons
- Picture sending/picture preview
- Online people statistics
- Custom theme
- Reconnect reminder
Technology overview
- Typescript : A superset of JavaScript. Its biggest advantage is that it provides a type system and improves the readability and maintainability of code.
- Vue2.6.x : Front-end progressive framework.
- Socket/io : Real-time communication, websocket third-party library.
- Vuex : A state management pattern developed specifically for Vue.js applications.
- Nestjs : It is a framework for building efficient and scalable Node.js server-side applications. It is written based on TypeScript and combines the related concepts of OOP1, FP2, and FRP3.
- Typeorm : Supports the latest JavaScript features and provides additional features to help you develop any application that uses a database.
- ES6+ : Using ES6+ syntax, arrow functions, async/await and other syntax are very easy to use.
- SASS (SCSS) : Using SCSS as a CSS preprocessing language, you can use the most efficient way to create complex designs with a small amount of code.
Database table structure design
Environment configuration
- Database mysql and chat database (note that the database format is utf8mb4)
- node v10.16.3
Run the project
- Front-end project
cd genal - chat - client
npm i
npm run serve
mysql configuration If mysql cannot connect and an error is reported: ER_NOT_SUPPORTED_AUTH_MODE, it is caused by the incompatibility of the mysql version. Please refer to this article https://blog.csdn.net/qq_41831345/article/details/83150502
There is no sql script in the database. Just change the database password in the back-end app.module.ts and create a new chat database.
Backend project
cd genal - chat - server
npm i
npm run start: dev
System iteration record
Click to view
v1.0.0
Function
- Add new user
- Add new group
- group chat
v1.0.0 interface
v2.0.0
Function
- Group chat/private chat
- Create a group/join a group chat/fuzzy search group
- Add friends/fuzzy search for friends
- Change username/avatar upload
- Emoticons
- Message pagination
v2.0.0 interface
v3.0.0
Function
- Group chat/private chat
- Create a group/join a group chat/fuzzy search group
- Add friends/fuzzy search for friends
- Image upload/paste send image/image preview
- Change username/avatar upload
- Emoticons
- Message pagination
v3.0.0 interface
Same as v2.0.0
v4.0.0
Function
- Group chat/private chat
- Create a group/join a group chat/fuzzy search group
- Add friends/fuzzy search for friends
- Image upload/paste send image/image preview
- Change username/avatar upload
- Emoticons
- Message pagination
- Mobile compatible
v4.0.0 interface
Same as v2.0.0
v5.0.0
Function
- Group chat/private chat
- Create group/join group chat/leave group/fuzzy search group
- Add friends/delete friends/fuzzy search for friends
- Image upload/paste send image/image preview
- Change username/avatar upload
- Emoticons
- Message pagination
- Mobile compatible
- Online people statistics
- Reconnect reminder
v5.0.0 interface
v6.0.0
Function
- Mobile compatible
- Modification of user information (avatar/username/password)
- Group chat/private chat
- Create group/join group/leave group/fuzzy search group
- Add friends/delete friends/fuzzy search users
- Message pagination
- Emoticons
- Picture sending/picture preview
- Online people statistics
- Custom theme
- Reconnect reminder
v6.0.0 interface
author
github: edison
Contributor list
mtnbgx, BoBoooooo, Nyaasu66, BeanCookie (in no particular order)
How to deploy
Astro Boy Chat Room Deployment Instructions
more details
Use typescript to create a powerful web chat room
