Flutter - Let's Connect our Chat App to SocketIo Server (Backend) || Realtime Communication || #18

Show your support and subscribe to the channel -: devstack.page.... 🤝🤝
#Flutter #SocketIO#Connection #chatapp
Reference Code:
android:usesCleartextTraffic="true"
Last Video Link: • Flutter - Working on t...
Video Link of Backend Code : • NodeJs - Let's begin w...
-------------------------------------------------------------------------------------------------
GitHub Repo Link: Please Give Star :)
1) WhatsApp Flutter Clone : github.com/Dev...
2) Chat Server (SocketIO) : github.com/Dev...
--------------------------------------------------------------------------------------------------
Support my work :
1) On Patreon: / devstack06
2) On Buy me a Coffee: www.buymeacoff...
-----------------------------------------------------------------------------------------------------
Playlist:-
1) Chat App Front-End:- • Flutter-Chat-UI (Whats...
2) Chat App Back-End:- • Chat Server Developmen...
------------------------------------------------------------------------------------------------------
Other Playlists:-
1) Flutter Model Class : www.youtube.co...
2) MERN Stack Series -: • MERN Videos
3) Rest API development using NodeJS in English -: • Node/ExpressJs Blog ap...
4) NodeJs Rest API Development in Hindi Series -: • NodeJs/ExpressJs Rest ...
--------------------------------------------------------------------------------------------------------
Let's Connect 😊
Twitter -: / devstack06
Patreon: / devstack06
Insta -: / dev_stack06
FB Page-: / devstack06
Github-: github.com/Dev...
----------------------------------------------------------------------------------------------------
Flutter ListView Builder
Flutter Model Data
Flutter Navigation
flutter app
flutter app development
flutter chat app
flutter blog app
chat app development
app bar in flutter
tabbar in flutter
tabview in flutter
flutter apps
app development
backend development
full stack development
blog app
Image picker
signup page using flutter
sign in page using flutter
flutter chat app development
node js backend development
flutter with node js
flutter with express js
flutter mongodb
flutter with firebase
flutter scaffold
flutter material app
flutter tab bar like whatsapp
flutter app demo,
flutter app highlight,
flutter application,
flutter app architecture,
flutter appbar,
flutter app release,
flutter app structure,
flutter app ui,
flutter app with firebase,
flutter app animation,
flutter app android,
flutter app bar,
flutter app butterfly,
flutter appbar leading,
flutter appbar actions,
flutter app bar background image,
flutter app bar back button,
flutter app bar search,
flutter app bar dropdown,
flutter app bar button,
flutter chat app,
flutter complete app,
flutter calculator app,
flutter chat app tutorial,
create flutter app,
flutter cupertino app,
flutter camera app,
flutter change app icon,
flutter app development tutorial,
flutter app dev,
flutter app database,
flutter app deployment,
flutter desktop app,
flutter dating app,
flutter app example,
flutter app example code,
flutter ecommerce app,
flutter login app example,
flutter in existing app,
app en flutter,
export flutter app,
ecommerce app with flutter,
flutter app firebase,
flutter app has stopped,
flutter app hindi,
flutter app history,
flutter mobile app development,
flutter music app,
flutter movie app,
flutter app notifications,
flutter app not running,
flutter app navigation,
flutter news app,
flutter note app,
flutter social network app,
flutter native app,
flutter app on windows,
flutter app on ios,
flutter app on play store,
flutter app orientation,
flutter offline app,
flutter app payment,
flutter app play store,
flutter in app purchase,
flutter pizza app,
publish flutter app,
flutter quiz app,
flutter quotes app,
flutter app routing,
flutter real world app,
flutter restaurant app,
flutter app highlight reel,
flutter login app using rest api,
reactive flutter app,
flutter recipe app,
release flutter app ios,
run flutter app vscode,
flutter app showcase,
flutter app store,
flutter app signing,
flutter app state management,
flutter app studio,
flutter app source code,
flutter app splash screen,
flutter app start slow,
flutter app to apk,
flutter first app tutorial,
flutter taxi app,
app using flutter,
app development using flutter,
flutter uber app,
flutter ui - furniture app,
flutter app versioning,
flutter video app,
flutter app with rest api,
flutter app without appbar,
flutter web app,
flutter wallpaper app,
flutter weather app,

[@ahmedjimmy3704]

so rare this days to see instructor like you , clean , motivated , wasting his time to help others in dark world not yet provided with this science , after all i think you are really great person , thanks for this materials

[@DevStack]

Hey thanks for your valuable comment bro, literally this made my day 🙌🙌🙌🙌

[@kevinvishal9071]

You spoke my heart out.... This series is so much of learning.. So clear and to the point.

[@thengakola6217]

i love seeing those mistakes and fixing them... thats the correct way to teach stuff

[@benatn]

hello i have a problem can you help me?

[@dwinurrohman9733]

good job my friend.. i am always wait for next tutorial

[@Mightypurush]

Great job bro. After One month again i started watching your videos.😅

[@DevStack]

Thank you so much 😀

[@rahul7400]

Very very helpful please create more videos on server connecting like aws

[@someshsahu4638]

very nice video thank you so much 🙏🏼🙏🏼🙏🏼

[@mishubarbu5796]

Thank you so much with the "android:usesCleartextTraffic="true"" part, you saved me !

[@cleanbold4967]

😇 thank you so much for taking efforts for new flutter Devs . Very easy and nice explanation of code ♥️♥️

[@blogfish1237]

Thank you for helping me!!!

[@shreyanshsharma8909]

I am stuck bro. It is still showing my socket connection false. At the time 11:46, in your console, it showed both - false and connected. But in my case, it is only showing false. My app is not being connected to backend part. Please help me.

[@staplepin8099]

same issue did you resolve ??

[@saisuvampatnaik1414]

@@staplepin8099 Did you solve this ???

[@shreyanshsharma8909]

@@staplepin8099 no man, it didn't resolve. I don't know what to do, i tried many things to fix it

[@staplepin8099]

@@shreyanshsharma8909 oh man.. I fixed it

[@staplepin8099]

I used a different version of socket io client that supports the latest socket io server

[@Statuslove0]

socket io client is working on debug but when I build release socket dosen't connects , I have also permitted for internet, but It dosent work

[@learnnow9598]

Good one bro🤩💙. Make video od sending private messages with it

[@happinin]

i think your lectures with UI and making things look good are very informative. i just dont understand. why dont you provide guides or pinned comments/description info for things that get deprecated? The socket setup for this is so different now and works with the new version after many attempts. Also, why would you set up individual socket connections on a single screen? Why not just set it up on the main screen and use the same socket connection for every page? Could you please show us how to do that properly?

[@ericlekwa4573]

How did you get it to work? I have been struggling to open a connection, when I log my info I always get connection status as false

[@happinin]

@@ericlekwa4573 the new versions of the packages should just work in tandem with each other. I also realised i dont have to do the cleartexttraffic thing in android manifest anymore either. It took so much fiddling but I got there. Just don't give up. After so many attempts I finally realised that flutter likes to run on random ports. So you will also have to watch what port you receive from on node. go to ipconfig, get your local IP and use that as your server endpoint URL. here are my dependencies: dependencies: flutter: sdk: flutter provider: ^5.0.0 intl: ^0.15.8 http: ^0.13.0 image_picker: ^0.8.5 shared_preferences: ^2.0.13 font_awesome_flutter: ^8.10.0 google_fonts: ^2.3.1 google_maps_flutter: ^2.1.3 google_maps_controller: ^1.2.0 socket_io_client: ^1.0.2 sqflite: ^2.0.2 location: ^4.2.0 url_launcher: ^6.0.20 progress_indicators: ^1.0.0 emoji_picker_flutter: ^1.1.2 flutter_native_splash: ^2.1.6 and also please note on the newer versions of socketio for flutter the code has changed a bit. So I had to do a bit of messing around in pub.dev. I basically stored the socket in my auth provider for reuse throughout the app like this: IO.Socket get socket { if (!isConnected) { connect(); } return _socket; } bool get isConnected { return _socket != null; } // hook this up to socket getter Future connect() async { _socket = await IO.io( '${config.Config.url}:${config.Config.port}', IO.OptionBuilder() .setTransports(['websocket']) // for Flutter or Dart VM // .setExtraHeaders({'foo': 'bar'}) // optional .build()); await _socket.connect(); _socket.emit('/test', 'hello world!'); _socket.onConnect((data) => print('Connected!')); _socket.on('/reply', (data) { print(data); }); print(_socket.connected); } good luck!

[@davidmtundi3400]

you really are amazing

[@amalasebastian9968]

I am not able to message

[@davidmtundi3400]

i have a question. what if i want to intergrate a shortcode instead to the app

[@sammybutt5895]

at first it showed false then connected but now when i tried again it is only showing false what to do ?

[@Abdullahhhh2001]

did you fix it bro? i have the same problem

[@sammybutt5895]

@@Abdullahhhh2001 check your ip address it changes and when it does you have to change it in both side server and client side and both server and client side also needs to be on the same ip address

[@Abdullahhhh2001]

@@sammybutt5895 I don't know. Can you give me you Instagram Name pls. So I can DM you

[@Abdullahhhh2001]

@@sammybutt5895 I have tried that. It didn't work

[@sammybutt5895]

@@Abdullahhhh2001 yt wont let me write my name lol

[@ALI-px9mw]

I have a question that will this app be able to send and receive messages from normal WhatsApp users?

[@mtdrip9523]

does it include group-chat ?

[@DevStack]

It will :)

[@happinin]

@@DevStack when? and will you show us how to manage sockets across the whole app instead of on one page?

[@snehpaghdal]

connection is not establishing please help

[@adityachaudhary6729]

Thanks for tutorial ❤️❤️, Can you please make a tutorial on how to show user online status ??

[@mafyaoriginal8228]

initiate your socket whenever your app is opened and when your server shows connected is equivalent to online and when he disconnects make it offline untill another connection from the same id to make it online again

[@ManuSharma-l3r]

bro can you make a video with basic socket integration for flutter app with the GetX state management? it would be a big help. i am currently learning flutter.

[@josephjoey3904]

This is cool. I'm wondering if I can integrate a chatbot in nodejs server side and use sockets to open and maintain connections in my flutter app? Thanks

[@DevStack]

yeah, we can integrate chat bot as well :)

[@josephjoey3904]

@@DevStack please tell me how

[@Mukunth]

Hello Bro, How to open and maintain connections via sockets in nodejs server, will it work online, Can you share any video of that process bro...?

[@hamzaalzibaq9517]

where is #4 to #17

[@amalasebastian9968]

rest everything is visible ,getting the connected message also ,but not able to see the message

[@androider5830]

will be add Voice call,video call,voice sending etc?

[@DevStack]

Let's focus on chatting part first :)

[@androider5830]

@@DevStack oky 🙃

[@happinin]

@@DevStack what happened? did you give up half way through or something?

[@saurabhgaming1531]

I have seen most of your video but from where you learn or read this bakend parat

[@saurabhgaming1531]

Because I want also impliment this things in latest version of flutter and socket io

[@harshraj2322]

thanx a lot

[@eenriya]

can you pls do this series in flutter version 2 or above which is nullable. Pls...

[@staplepin8099]

i did all the steps with same versions .. still false : (

[@DevStack]

You will get false but it is connected bro, just follow the video properly :)

[@staplepin8099]

@@DevStack but I dint even get connected like you ; (

[@staplepin8099]

@@DevStack also yeah thanks Sorry it work perfectly fine on android with the Latest beta version of socket io On iOS sadly nothing works.. I did add the extra in info.plist files too .. But thanks a lot man your amazing

[@durgeshpandey8534]

i had made chat app according to you it works on emulator but how to implement this on real android device please tell me brother

[@Rakshith_Kumar]

Can you make same project with react native bro

[@abhay81228]

bhai nhi kr rha connect. :-(

[@abhay81228]

Update => Right now the current version of socket.io is 4+ that's why I couldn't connect but when I used socket version from the video it worked. Hope it helps someone.

[@robithakur007]

its always false, i can't connected.

[@MdLimon-lu8yg]

vai apni golpo r upnnosh bad diye coding e kono aschen

[@fiten9852]

@@MdLimon-lu8yg que linga é essa que voce ta falando

[@syedtabrezpashas3252]

Same here...