Integrating ChatMessaging via WebSocket (socket_io package) in Flutter Application

Last update: Apr 18, 2022

Chat Messaging via WebSocket

Integrating ChatMessaging via WebSocket (socket_io_client package) in Flutter Application.

The server is also built in Dart. socket_io is used for server side socket integration.

Demonstrations:

Video for running the server:

vlc-record-2022-04-09-03h29m06s-2022-04-09.03-22-20.mp4-.mp4

Replying feature demonstration:

replying_feature_sample.mp4

Subscription to Chat Feature demonstration:

subscription_feature.mp4

Report User demo:

report_user.mp4

To run this application, there are 4 parts :

1. Running the server

2. Resolving localhost issue (for testing on localhost)

3. Running client

4. Testing application

1. Running the server

  1. Go to the chat_server directory
  2. Execute dart run in the directory
  3. Server should run successfully on localhost.

2. Resolving localhost issue (for testing on localhost)

Question : Why do you face this issue?

Answer : For testing we need 2 clients, I for myself took one as my own mobile phone and other the chrome on the current system. Now, when we run the server and the client will try to connect to the server (on mobile phone) it'll be through phone's localhost itself and not the system's localhost on which the server is actually running. Therefore, it'll show an Connection refused Error. To resolve this issue this section is important.

Execute the following command : adb reverse tcp:3000 tcp:3000

3. Running client

  1. Goto the chat_client directory
  2. Run flutter run to run it on phone.
  3. Parallely, run flutter run -d chrome to run the other client on Chrome.

4. Testing application

  1. Login with any of the following dummy user name: Ashwin, Shourya, Ayush, Kunal, Piyush, Saksham (case sensitive).
  2. Click the login button.
  3. You'll see a list of Chat users on the application after logging in.
  4. Now, on the other client login with any dummy chat user.
  5. Open the corresponding chat of the user logged in other client. (Let's say, I logged in with Ashwin on phone and Saksham on chrome. Then, click Saksham on the phone to open chat of Ashwin with Saksham and open Ashwin chat on chrome)
  6. Now, type amessageand click send icon on client, you should see the message on both clients.

If you're able to successfully run all the steps then congratulation you've successfully run Chat Messaging application. 🥳 🥳

Checkout the code, and raise an issue if you have any doubt.

GitHub

https://github.com/glitchpop-frenzy/chat_messaging_via_websockets
You might also like...

A Dart Build Plugin that uploads debug symbols for Android, iOS/macOS and source maps for Web to Sentry via sentry-cli

Sentry Dart Plugin A Dart Build Plugin that uploads debug symbols for Android, iOS/macOS and source maps for Web to Sentry via sentry-cli. For doing i

Jun 6, 2022

Sangre - Sangre streams your backend queries in realtime to your clients minimizing the load via diffs

Sangre Sangre streams your backend queries in realtime to your clients minimizin

May 10, 2022

Dart wrapper via `dart:js` for webusb

Dart wrapper via dart:js for https://wicg.github.io/webusb/ Features canUseUsb g

Jan 25, 2022

Immutable Dart collections via the builder pattern.

Built Collections for Dart Introduction Built Collections are immutable collections using the builder pattern. Each of the core SDK collections is spl

Jun 12, 2022

Lottie-package-example-Flutter - A simple example about lottie package in Flutter

Lottie-package-example-Flutter - A simple example about lottie package in Flutter

Lottie Package example - Flutter ScreenShot ⚠️ Essential Packages lottie: ^1.2.1

Feb 2, 2022

Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in Dart Language.

Flutter package for displaying and animating Scalable Vector   Graphics 1.1 files. The package has been written solely in Dart Language.

Animated SVG | Flutter Package Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in

Jun 13, 2022

A GUI package manager and package installer for Windows Subsystem for Android (WSA)

A GUI package manager and package installer for Windows Subsystem for Android (WSA)

wsa_pacman A GUI package manager and package installer for Windows Subsystem for Android (WSA). Currently provides a double-click GUI installer for .a

Jun 27, 2022

Flutter package to hide out whole application or sections if you are not paid for the job done.

Flutter package to hide out whole application or sections if you are not paid for the job done.

not_paid Worried about your payment? Using this package you can provide a non paid version of your app to the client that consistently starts fading o

Nov 30, 2021
Comments
  • 1. Feat swipe functionality

    Implemented replying to a particular message feature. To test the feature: Just open a chat and swipe right to the message you want to reply to. That message will show itself above the input message field. Simply type the reply and press the send icon.

    Reviewed by glitchpop-frenzy at 2022-04-15 21:49

Related

Helper app to run code on Aliucord iOS via websocket.

aliucordebug A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Jan 25, 2022
a project-m36 websocket client written by flutter/dart

project_m36_websocket_client A Flutter web websocket client for Project-M36. It's also an attempt to bring algebraic datatypes into the Dart land. Pro

Jan 8, 2022
projeto de flutter com Websocket para aplicações com atualização em tempo real, demonstração com chat.

chat_socket A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Jan 3, 2022
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter ?? Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

Jun 22, 2022
how to Integrating facebook audience network to flutter app for banner, interstitial, rewarded, native and native banner

fb_ads_flutter_12 A new Flutter project. Getting Started Watch the complite tutorial for integrating Facebook ads into the Flutter app in our Youtube

Feb 12, 2022
Package your Flutter app into OS-specific bundles (.dmg, .exe, etc.) via Dart or the command line.

flutter_distributor Package your Flutter app into OS-specific bundles (.dmg, .exe, etc.) via Dart or the command line. The flutter_distributor source

Jun 23, 2022
💳 A Flutter package for making payments via credo central. Provides support for both Android and iOS

?? Credo Package for Flutter TODO: Put a short description of the package here that helps potential users know whether this package might be useful fo

Dec 26, 2021
Flutter implementation for ExotikArch via a simple todos CRUD application.
Flutter implementation for ExotikArch via a simple todos CRUD application.

ExotikArch - Flutter setState on steriods ⚡ ExotikArch for Flutter. Deliver production apps fast with flutter. Global State Management Navigation Serv

Jun 2, 2022
QR.Flutter is a Flutter library for simple and fast QR code rendering via a Widget or custom painter.
QR.Flutter is a Flutter library for simple and fast QR code rendering via a Widget or custom painter.

QR.Flutter is a Flutter library for simple and fast QR code rendering via a Widget or custom painter. Need help? Please do not submit an issue for a "

Jun 2, 2022
Add beautiful animated effects & builders in Flutter, via an easy, highly customizable unified API.
Add beautiful animated effects & builders in Flutter, via an easy, highly customizable unified API.

Flutter Animate A performant library that makes it simple to add almost any kind of animated effect in Flutter. Pre-built effects, like fade, scale, s

Jun 26, 2022