Not working with flutter socket.io-client since version 3

[Mrbeyond]

Describe the bug
As from version 3 for server side, the socket.io-client for flutter android does not connect and keeps saying connection error where as version 2 works quite alright but the maintenance message is enough to be scared of.

There should be sync update and support with the flutter app as well as it works in javascript frameworks.

[hatemragab]

Use flutter socket io Clint v 1.0.2 it works good with me on Last version 4.4.*

[taylanyildiz]

@hatemragab It doesn't work. I used socket_io_client 1.0.2 in Mobile side , socket.io 4.4.0 in Server side. If you can actually connect so I do not believe 👎🏽 that. Can you tell us ?

If you used socket.io 4.4.0 in server side. You can use socket_io_client 2.0.0-beta.4-nullsafety.0 in mobile side.

[hatemragab]

Yes you can connect v1.0.2 to server v 4.4.1
If you can't this is your fault
You can check my open source chat app
https://github.com/hatemragab/v_chat_sdk

[Fintasys]

I have to agree with @taylanyildiz , 1.0.2 didn't work for me but the 2.0.0-beta worked with newest socket.io server version (4.4.1)

[jcguerreroh]

I have to agree with @taylanyildiz , 1.0.2 didn't work for me but the 2.0.0-beta worked with newest socket.io server version (4.4.1)

Completely agree with you man...

[jcguerreroh]

Appearently we have to use the socket_io_client: ^2.0.0-beta.4-nullsafety.0 so it works

[arisAlexis]

doesn't work for me. There are quite a few issues open with the same thing. I can send to server but never receive the message on the client. Using latest packages for both.

[Lewynation]

If you are connecting to the localhost on an IOS emulator you need to point you uri to localhost(127.0.0.1), however if you are using an android emulator then use (10.0.0.2) so your uri will look something like this (http://10.0.0.2:3000)

My bug
I am using the latest packages and cant seem to get the data passed back from the server to my client app, any fix?

[darrachequesne]

@Lewynation are you able to reach the server? Do you get a "connect" event?

[FranStok]

I dont get a onConnect event. The server console says "client connected", but the onConnect event never executes.

[dev-devarsh4]

Unable to connect with server

There is no log report on server side while connecting to the server

Flutter version 3.10.2
socket_io_client: ^2.0.3+1

[✓] Flutter (Channel stable, 3.10.2, on macOS 13.3.1 22E261 darwin-arm64, locale en-IN)
[✓] Android toolchain: develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode: develop for iOS and macOS (Xcode 14.2)
[✓] Chrome: develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.80.2)
[✓] Connected device (2 available)
[✓] Network resources

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart';

class ChatPage extends StatefulWidget {
  const ChatPage({super.key});

  @override
  State<ChatPage> createState() _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  final List<String> _mgs = [];
  final TextEditingController _controller = TextEditingController();

  Socket socket = io(
    // There is no log report on server side while connecting to the server

    // Here [xxxxxx] is my client secret
      "wss://free.blr2.piesocket.com/v3/xxxxxx",
      <String, dynamic>{
        'transports': ['websocket'],
        'autoConnect': false,
      });
  @override
  void initState() {
    super.initState();
    socket.connect();
    socket.onConnect((_) {
      print('connecting');
    });
    socket.on('received_message', (data) => log(data));
    // socket.emit('user_login', [
    //   {"user_id": 1}
    // ]);
    socket.onDisconnect((_) => log('disconnect'));
  }

  @override
  void dispose() {
    super.dispose();
    socket.disconnect();
    socket.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
        children: [
          LimitedBox(
            maxHeight: MediaQuery.of(context).size.height * 0.8,
            child: _mgs.isEmpty
                ? const Center(
                    child: Text("No Messages"),
                  )
                : ListView.builder(
                    itemCount: _mgs.length,
                    shrinkWrap: true,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Align(
                          alignment: Alignment.centerRight,
                          child: Text(_mgs[index]),
                        ),
                      );
                    },
                  ),
          ),
          LimitedBox(
            maxHeight: MediaQuery.of(context).size.height * 0.2,
            child: Container(
              padding: const EdgeInsets.symmetric (horizontal: 8),
              color: Colors.blueGrey[100],
              child: Row(
                children: [
                  Flexible(
                    child: TextField(
                      style: const TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.w400,
                      ),
                      maxLength: 42,
                      controller: _controller,
                      maxLines: 1,
                      onChanged: (text) {},
                      decoration: const InputDecoration(
                        contentPadding: EdgeInsets.only(top: 5),
                        hintText: 'Enter Message',
                        hintStyle: TextStyle(fontSize: 17, fontWeight: FontWeight.w400),
                        counter: Offstage(),
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 40,
                    width: 40,
                    child: IconButton(
                        onPressed: () {
                          _mgs.add(_controller.text.trim());
                          socket.emit('send_message', [
                            {
                              "user_id": 1,
                              "to_user_id": 2,
                              "message": _controller.text.trim(),
                            }
                          ]);
                           _controller.clear();
                        },
                        icon: const Icon(Icons.send)),
                  )
                ],
              ),
            ),
          )
        ],
      )),
    );
  }
}

[Jimesh843]

@dev-devarsh4 I am also unable to connect to socket. I am using socket_io_client package version 2.0.3+1 and in backend i have 4.7.3 version of node.

[KailashPogra]

any one find solution for it

[ashifali3147]

I am using version 3.0.2 because the documentation states that version 3 or higher is required if server-side usage with 4.7 and above. However, it is still not working. I have tried multiple versions (1, 2) but none of them have been successful. Any solution?