Flutter - Let's Connect our Chat App to SocketIo Server (Backend) || Realtime Communication || #18
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- 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,
i love seeing those mistakes and fixing them... thats the correct way to teach stuff
hello i have a problem can you help me?
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
Hey thanks for your valuable comment bro, literally this made my day 🙌🙌🙌🙌
You spoke my heart out.... This series is so much of learning.. So clear and to the point.
Thanks for tutorial ❤️❤️, Can you please make a tutorial on how to show user online status ??
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
I am not able to message
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?
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
@@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!
very nice video thank you so much 🙏🏼🙏🏼🙏🏼
Very very helpful please create more videos on server connecting like aws
Thank you so much with the "android:usesCleartextTraffic="true"" part, you saved me !
connection is not establishing please help
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.
Thank you for helping me!!!
Great job bro. After One month again i started watching your videos.😅
Thank you so much 😀
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
rest everything is visible ,getting the connected message also ,but not able to see the message
I have a question that will this app be able to send and receive messages from normal WhatsApp users?
can you pls do this series in flutter version 2 or above which is nullable. Pls...
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
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
yeah, we can integrate chat bot as well :)
@@DevStack please tell me how
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...?
Good one bro🤩💙. Make video od sending private messages with it
where is #4 to #17
😇 thank you so much for taking efforts for new flutter Devs . Very easy and nice explanation of code ♥️♥️
good job my friend.. i am always wait for next tutorial
Can you make same project with react native bro
I have seen most of your video but from where you learn or read this bakend parat
Because I want also impliment this things in latest version of flutter and socket io
i have a question. what if i want to intergrate a shortcode instead to the app
i did all the steps with same versions .. still false : (
You will get false but it is connected bro, just follow the video properly :)
@@DevStack but I dint even get connected like you ; (
@@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
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.
same issue did you resolve ??
@@staplepin8099 Did you solve this ???
@@staplepin8099 no man, it didn't resolve. I don't know what to do, i tried many things to fix it
@@shreyanshsharma8909 oh man.. I fixed it
I used a different version of socket io client that supports the latest socket io server
does it include group-chat ?
It will :)
@@DevStack when? and will you show us how to manage sockets across the whole app instead of on one page?
at first it showed false then connected but now when i tried again it is only showing false
what to do ?
did you fix it bro? i have the same problem
@@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
@@sammybutt5895 I don't know. Can you give me you Instagram Name pls. So I can DM you
@@sammybutt5895 I have tried that. It didn't work
@@Abdullahhhh2001 yt wont let me write my name lol
you really are amazing
thanx a lot
will be add Voice call,video call,voice sending etc?
Let's focus on chatting part first :)
@@DevStack oky 🙃
@@DevStack what happened? did you give up half way through or something?
its always false, i can't connected.
vai apni golpo r upnnosh bad diye coding e kono aschen
@@MdLimon-lu8yg que linga é essa que voce ta falando
Same here...
bhai nhi kr rha connect. :-(
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.