background

A wechat style instant messaging system based on Flutter (front end) + Laravel (back end). Core functions have been completed, with beautiful interface, smooth operation and instant video chat. The system is not connected to any third-party IM SDK, and the view, data processing and interface are all designed and coded by ourselves, which means that it is highly extensible and customizable. The development lasted 8 days, which was fast because I built the development framework of the entire App once and for all. The system is directly integrated into my open source project, linked at the end of this article. If you feel good, help to point a Star!

Results show

Create a chat session with read receipt

Send, view, save media resources, upload progress callback

Send voice messages and emojis

The amplitude is not displayed because of the simulator. The amplitude of the real machine is normal

Video chat, message notification bar click callback

A set of code to implement a two-way call

Toggle state, Dark mode, swipe to remove top, save draft

System architecture

Because the client

Core components:

  • State management: get: ^4.3.8
  • Socket long connection: web_socket_channel: ^2.1.0
  • Persistent storage: shared_preferences: ^2.0.7
  • Network request: dio: ^4.0.0
  • Permission handling: permission_handler: ^8.1.4+2
  • Media resources: wechat_assets_picker: ^ 6.1.1 | wechat_camera_picker: ^ against 2.4.1 | extended_image: ^ 2
  • Video playback screenshots: video_player: ^ 2.1.15 | chewie: any | video_compress: ^ 3.1.0
  • Recording: flutter_plugin_record: ^1.0.1
  • Audio and video calls: AGorA_rTC_engine: ^4.0.6

Laravel server side

Core components:

  • Socket connections: long workerman/gateway – worker | workerman/gatewayclient
  • Authentication: tymon/JWT – auth
  • Ali cloud storage: johnlui/aliyun-oss-laravel7

The principle of

WebSocket protocol supports the server to actively push information to the client. Our system can be said to be a successful practice of WebSocket protocol from application in Web pages to application in App clients.

Reference: GatewayWorker2.x 3.x manual — combined with frameworks such as ThinkPHP

Concrete implementation steps

  1. The Flutter client establishes a websocket connection to the GatewayWorker via web_socket_channel

  2. When the GatewayWorker detects that a client initiates a connection, it sends the connection client_ID to the Flutter client

  3. The Flutter client receives the client_id and triggers an Http request to send the client_id to the Laravel server

  4. Laravel server calls init() on receiving client_id, Call Gateway::bindUid(clientid,client_id, clientid,uid) with GatewayClient to bind client_id to the current UID (user ID).

  5. All requests made by the Flutter client are directly posted /get to the Laravel framework for unified processing, including sending messages

  6. When Laravel framework needs to send data to a UID or group during service processing, it directly calls the GatewayClient interfaces Gateway::sendToUid and Gateway::sendToGroup to send data

The author used Layim + GatewayWorker to develop a Web chat room before. The project address is Webim-layim. Because Layim is stateless management, it is difficult to expand and gradually gives up. On the other hand, Flutter itself has a Widget tree refresh mechanism. We also used Getx for more unified state management, local refresh view to ensure performance. The whole system was developed smoothly. Many modifications and extensions have been made to the Laravel server to accommodate the complex Flutter client requests.

The project address

The pursuit of the ultimate atmosphere

  • GitHub
  • Yards cloud

reading

  • Analysis of origin and development prospect of Luo Xun -V2.2.5

  • Bilibili — wechat style instant messaging system developed by Flutter+Laravel