preface

After the last pure front-end imitation Telegram chat system I decided to add back-end functions, this time to consider the use of a more concise interface and more elegant implementation of the UI interface has been reconstructed. The main technology stack is Vue2+MongoDB+Koa2. This project should have been ready for release by the beginning of December 2020. Considering relevant work for graduation, I decided to open the source only after the defense. Given the rapid development of front-end technology, I also considered refactoring with Vue3+TS. Considering that the main content of my work in 2021 will still be AR special effect filter and 3D, I have invested a lot in this study. I hope that friends with ideas can participate in this project!

  • Open source address

Technology stack

Vue2 family bucket +MongoDB+Koa2+socket. IO +vant 2+ es6/7

Project start

Demo video

Startup environment: Node and mongodb

Git clone https://github.com/xxydrr/vue-koa-chat CD backend NPM install / / install the back-end rely on mongod / / start the database NPM run init / / initializes a system account NPM run dev // Start the server CD.. / cd frontend npm run serveCopy the code

Realize the function

  • Log in/register/log out
  • Message types (text/emoticons/pictures/files)
  • Friends (Add/delete/modify remarks/blur search friends)
  • Group (Common group/Broadcast group)/Create group/Join group/Drop group/Fuzzy search Added group
  • Unread message statistics/marked as read
  • Grouping (unread/group session grouping)
  • Add friends/Group check
  • Modify personal information (password/profile picture/age/mobile phone number/Gender/email/city/nickname)
  • View friend/group information
  • Continue to improve…

Project screenshots

Project function extension idea

  • Theme skin Settings
  • Better Scroll + paging query
  • Add game features to my page
  • I added stories to my page
  • Video voice webRTC

instructions

You are welcome to join us at ❤️❤️❤️ if you have ideas for expanding the project

If the project is helpful to you, you can “Star” support it thanks! 🌹 🌹 🌹

My vue2 + vuex chat system entry project. address

The resources

  • MongoDB
  • Mongoose
  • vue-telegram
  • socket.io
  • Vchat