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

Answer 1

@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.

Answer 2

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

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

2. 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 socket.io@2.3.0

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

Answer 3

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);.