Flutter socket io doesn't connect to node js socket io server

Question

I'm trying to build a simple flutter chat application using a node.js matchmaking server. I've worked with this for a few hours already but I simple cannot get the app to connect with the server.

Here's the node js server:

var express=require('express');
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

var allClients = {};

io.on('connection', function (socket) {
    io.to(socket.id).emit('userCount', Object.keys(allClients).length);
    console.log(socket.id,'joined');
    //match making logic
});

var port = 8080;
console.log(port);
server.listen(port);

Flutter connecting code:

//Find a match for the user
void findMatch() async {
    SocketIO socketIO = SocketIOManager().createSocketIO("http://192.168.0.32:8080", "/");
    print('Created');
    await socketIO.init(); //code execution pauses indefinitely at this line
    print('Initialized');
    await socketIO.connect();
    print('Connected');

    socketIO.sendMessage('new user', data);

    socketIO.subscribe('match found', (data) async {
      UserData peerData = await getUserData(data.peerId);
      redirectToPage(context, Chat(peerId: data.peerId, peerData: peerData));
    });
}

When the function is run, the code execution pauses at the line shown above, and the node js server doesn't react at all. However this shows up on the debug console.

D/FlutterSocketIoPlugin: FlutterSocketIoPlugin( 4490): onMethodCall: socketInit - domain: http://192.168.0.32:8080 - with namespace: /
D/FlutterSocketIoPlugin: TOTAL SOCKETS: ( 4490): 0                                                                 
D/FlutterSocketIoPlugin: TOTAL SOCKETS: ( 4490): 0                                                                 
D/FlutterSocketIoPlugin: added SocketIO( 4490): http://192.168.0.32:8080/                                          
D/FlutterSocketIoPlugin: SocketIO( 4490): connecting...null                                                        

Any help is appreciated. Thank you!

I wrote a simple node js client as suggested in the comments, and it connects to the server successfully.

//client.js
var io = require('socket.io-client');
var socket = io.connect('http://localhost:8080', {reconnect: true});

// Add a connect listener
socket.on('connect', function (socket) {
    console.log('Connected!');
});
socket.emit('CH01', 'me', 'test msg');

Edit:

Removing the 'await's before the socket functions in findMatch() gets me this.

D/FlutterSocketIoPlugin: SocketIO(21368): reconnect_error: [{"cause":{"cause":{"detailMessage":"CLEARTEXT communication to 192.168.0.32 not permitted by network security policy","stackTrace":[],"suppressedExceptions":[]},"detailMessage":"websocket error","stackTrace":[],"suppressedExceptions":[]},"detailMessage":"Connection error","stackTrace":[],"suppressedExceptions":[]}]

I tried android:usesCleartextTraffic="true" in AndroidManifest.xml but it doesn't seem to work. Changing http to https gives SSL handshake aborted. Maybe deploying the socket server on a remote machine with an SSL certificate will work? Will continue digging.

Solution 1

I tried above code with this flutter plugin here as I think you are also using the same, but I also got the same problem. I tried to see any error log generated by Logcat and I found an entry connecting...null and it was stuck there but don't know how to fix or what is the problem. I tried it with another flutter plugin here and tested it in emulator, it worked fine for below sample code. If you can use a different flutter plugin then this might be useful.

var express = require('express');
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

io.on('connection', function (socket) {
    console.log(socket.id, 'joined');
    socket.on('/test', function (msg) {
        console.log(msg);
    });
});

var port = 8080;
console.log(port);
server.listen(port);

Flutter client code -

IO.Socket socket = IO.io('http://10.0.2.2:8080', <String, dynamic>{
   'transports': ['websocket'],
   'autoConnect': false,
});
socket.connect();
socket.emit('/test', 'test');

Solution 2

Downgrading my server's socket.io version worked for me. Just as above, if you are using nodejs try uninstalling socket.io and installing an older version as follows:

npm uninstall socket.io
npm install [email protected]

Most flutter socket io client packages are compatible with socket.io version 2.3.0. I would recommend you downgrade to this incase you are experiencing a similar problem.

Solution 3

Try downgrading your server's socket io version. Some socket io client packages(flutter) are not compatible with the latest server-side socket io (node.js). My server configuration was using version 3.0.4. For some reason, it was incompatible with adhara_socket_io: 0.4.2 and socket_io_client: 0.9.12. By downgrading my node.js socket io version worked for both client libraries

npm uninstall socket.io
npm install [email protected]

Solution 4

work too

server(nodejs) => "socket.io": "^2.4.1"

client(flutter) => socket_io_client: ^1.0.1

View more solutions