Instant messaging open source project implemented by vue+websocket+Springboot, open source WeChat

[Flying]-The web client of the instant chat system, using the vue framework, based on websocket to realize the json-based text protocol to realize instant communication. The message is synchronized with the android client, supports text, picture sending, and video related message display. Supports audio and video calls with the android terminal.

gitee open source address:

Since the previous prompt is a transaction link, there is a free way to receive it at the end of the article for friends who need the source code

 

Feixiang

 

This project is the source code of the Feixiang chat system client

Realization of vue instant messaging web terminal based on universe-push, use websocket for message communication, support text and picture type sending, support real-time audio and video, support audio and video intercommunication with android-chat client

Project screenshot

• notification

 

• Text message

 

• Picture message

 

• Video message

 

Project demo

• Project public test address
• Please select any account password to log in

帐号：13800000000, 13800000001, 13800000002
密码：556677

• Temporarily stop the registration and login of the mobile phone verification code, and the subsequent activation of the QQ group will be notified

Version planning

V1.0.0

• Login authentication process
• Realize friend list display and user information acquisition
• Session information pull, session message cache
• Plain text messaging
• Support picture, video message display
• Group conversation function

V1.0.1

• Add full screen mode support, click on the user's avatar to switch

 

V1.0.2

• Plans to add audio and video chat functions
• Realize audio and video intercommunication with android client

Voice calls

 

video call

 

V1.0.3

• Increase friend search and friend addition function, forming a closed loop of functions

V1.0.4

• Group user list function

V1.0.5

• Add websocket asynchronous callback interface
• Add the function of creating groups
• Exit group chat
• Withdraw message
• Group kicks and pulls
• Modify group name

 

V1.0.6

• Add the function of dissolving groups
• Optimize the interactive experience of group exit and dismissal
• For disbanded groups and exited groups, delete conversations

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev
# 运行请先检查如下配置：TCP服务配置，HTTPS配置，是否支持WSS,是否支持HTTPS，HTTP监听端口8081,HTTPS监听端口8443

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Reference project

• Cat view

Dependent components

• Commonly used vue video plugins
• Watermelon player
• Icon support

Recommended items

• vue-wechat
• cat-view
• QRCodeLogin describes the switching operation of QR code and password login

Open source agreement

This project uses a non-commercial attribution agreement Creative Commons Attribution Non Commercial 3.0 Unported

 

Since the previous prompt is a transaction link, friends who need the source code trouble like + follow, add assistant VX: mxx2020666, receive