Project address: github.com/CCZX/wechat The project is being updated all the time. Welcome to leave your valuable comments.

A, with the function

  1. Chat between friends, support questions, pictures, expressions, audio and video calls and whiteboard (WebRTC implementation).
  2. You can add, modify and delete groups for friends.
  3. Messages between friends support read status notification, so that you can immediately know whether the other party has read the message.
  4. Online friend statistics: You can view the number of current online friends in each group and highlight the profile pictures of online friends.
  5. Group chat, currently group chat only supports the form of text, picture, expression, currently group chat messages do not support the read reminder (to be improved later).
  6. Space, similar to Qzone, allows you to post your own updates and check your friends’ updates.
  7. Dynamic editing: Supports space deletion and editing.
  8. Dynamic interaction, support like, comment, comment reply function.
  9. Add friends, add group chat, after adding the consent of the other party.
  10. Schedule management: Supports the function of creating and deleting schedules.
  11. Backend management: standalone project, implemented using React.
  12. More details will be available in the next few days after I deploy the code online.

2. Technology stack

Vue, Vuex, Element-UI, React, AXIos, SASS, ES6, WebSocket, Node, etc.

Third, the difficulties in

  1. Various components split, project file structure.
  2. After user groups are changed, the user interface responds immediately.
  3. The fetch processing logic for the last message of each session after the session is fetched.
  4. Docking seven niuyun to achieve the upload of pictures.
  5. WebRTC technology.
  6. Prompt notification of received messages and number of unread messages.
  7. Message read alert Settings.
  8. After a user logs out, the back-end login information is immediately cleared.
  9. Space dynamic comment and reply comment implementation.
  10. Responses to actions performed between different page components.

Iv. Project screenshots

1. Latest session list page (the latest session is sorted according to the last message time, and the session will be sorted to the first one after sending a new message)

2. Group friends and group chat

3, new message reminder, read reminder

4. Spatial dynamics

I will follow up the project until a relatively perfect chat system is realized, and then I will optimize and upgrade it later. Project address: github.com/CCZX/wechat welcome your valuable comments, if you can mention PR or issues will be better. If you think the project is still ok, please leave your message at star✨ 🌹.