Flutter (emulator) doesn't connect to local Socket.io

Question

I'm trying to connect to my local server in node.js with Socket.io using Flutter. It works ok when i connect from my browser, but it doesn't connect using my Android/iOS emulators. My socket.io code is pretty simple

// socket messages
io.on("connection", client => {
    console.log("New device connected!")

    // print in the console when some device disconnects
    client.on("disconnect", data => {
        console.log("disconnected!")
    })
})

Flutter code (also pretty simple too):

IO.Socket socket = IO.io('http://localhost:3000', <String, dynamic>{
    'transports': ['websocket'],
    'autoConnect': false,
});

// Dart client
socket.on('connect', (_) {
    print('connect');
});
socket.on('event', (data) => print(data));
socket.on('disconnect', (_) => print('disconnect'));
socket.on('fromServer', (_) => print(_));

It always displays "disconnect" every ~30 seconds (in flutter console), also in the node.js it never displays a "New device connected!"

What i'm using?

Flutter Socket.io Dependency

pubspec.xml

dependencies:
  flutter:
    sdk: flutter
  socket_io_client: ^0.9.11
  provider: ^4.3.2+2

Pablo Pantaleon · Accepted Answer · 2021-02-16 14:02:21Z

21

There's different reasons of why this is not working, but here i describe a couple of them of how you can solve it.

First check if server is responding

Check if you can access it using your pc web browser, it should something like

Check if your device web browser have access

If both things are working fine, try with one of these solutions:

Solution #1

The url that you've tested in the emulator browser (not in your pc browser) is the same url that you need to use in your flutter app.

iOS

http://localhost:3000 # port can change, check your node.js config
http://<your_pc_ip:3000>:3000 # you can check it in the preferences or terminal -> ipconfig

Android

http://10.0.2.2:3000
http://localhost:3000 # port can change, check your node.js config
http://<your_pc_ip:3000>:3000 # you can check it in the preferences or terminal -> ipconfig

Solution #2

My node.js project was using socket.io version 3.0.0 (the latest), but it looks like my flutter client doesn't support it, so try to downgrade to version 2.3.0 (don't do it manually, in other words don't modify the file manually)

npm uninstall socket.io
npm install [email protected]

and your package.json will be (in your node.js project)

"dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "socket.io": "^2.3.0"
}

Note: if you want to keep using socket.io version 3.0 instead of v2.3.0 then you should use the new version of flutter client (currently in beta): Flutter Client for Socket.io v3.0

Solution #3

For some reason the "autoConnect" not always work, so try to connect it manually.

IO.Socket socket = IO.io('http://localhost:3000', <String, dynamic>{
    'transports': ['websocket'],
    'autoConnect': true,
});
    
// Dart client
socket.on('connect', (_) {
    print('connect');
});
socket.on('event', (data) => print(data));
socket.on('disconnect', (_) => print('disconnect'));
socket.on('fromServer', (_) => print(_));

// add this line
socket.connect();

Solution #4

Maybe there's a firewall or something blocking your port (mine 3000), try to run it using another port. You need to change the config in your server and also change the url in the flutter app (also test it using your emulator/simulator browser)

and that's it... it should work.

You should see something like: Flutter

Server

edited Feb 16, 2021 at 14:02

answered Nov 14, 2020 at 18:06

Pablo Pantaleon

1,5361 gold badge19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ben Over a year ago

I've been struggling with this for two days. Downgrading my server's socket io version worked for me. Thanks!

MindStudio Over a year ago

Thanks!!! I've been searching for this since hours. @ben There is a beta of the client now that works with v3 socket_io_client: ^2.0.0-beta.2

Pablo Pantaleon Over a year ago

Thanks for the update @MindStudio, let me update my answer

Sparks Over a year ago

Thank you so much my problem was in the socket.io I have installed the new version but when I downgraded to the version you gave it worked fine

Nicat Over a year ago

Thanks you so much. I can not find problem few days. Downgrading worked for me. My server socket.io version is ^3.1.2 and flutter socket client version is ^2.0.0-beta.2

|

scrutycs · Accepted Answer · 2020-12-11 23:00:28Z

2

I had the same Issue using socket_io_client. Using :Socket socket = io(SERVER_ADRESS, <String, dynamic> { 'transports':['websocket'], 'autoConnect' : true}); instead of : Socket socket = io(SERVER_ADRESS);.

answered Dec 11, 2020 at 23:00

scrutycs

291 silver badge2 bronze badges

Comments

Loren.A · Accepted Answer · 2024-07-09 04:09:34Z

0

@Pablo's answer is thorough, but when I was running Socket.io on a python app, my localhost my issue was different.

My original command

uvicorn main:app --reload

I couldn't get to connect.

But specifying the IP like so

uvicorn main:app --reload --host 192.168.1.104 --port 8000

Or a catch all like so

uvicorn main:app --reload --host 0.0.0.0

Worked when I defined the specific IP in the local host url

const localHost = 'http://192.168.1.104:8000';

On mac you get run ipconfig getifaddr en0 to get your device IP

This worked regardless of platform or simulator/physical device.

answered Jul 9, 2024 at 4:09

Loren.A

5,6051 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

Flutter (emulator) doesn't connect to local Socket.io

3 Answers 3

Solution #1

Solution #2

Solution #3

Solution #4

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution #1

Solution #2

Solution #3

Solution #4

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related