连接上的 Socket.io 在 Flutter 上不起作用

Question

Socket.io connection is not working on my flutter app. I'm not getting any of the console logs printed in the io.on("connection"...) method of the index.js file. Why this is happening? (DB link is fine). On clicking the button Test Connection It's printing Line 18 but not invoking the socket emit.

My codes are as follows:

socket_client.dart

 import 'package:socket_io_client/socket_io_client.dart' as IO;

class SocketClient {
  IO.Socket? socket;
  static SocketClient? _instance;

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

  static SocketClient get instance {
    _instance ??= SocketClient._internal();
    return _instance!;
  }
}

test_socket.dart

import 'package:flutter/material.dart';
import 'package:socket_tutorial/utils/socket_client.dart';

class CreateRoomScreen extends StatefulWidget {
  const CreateRoomScreen({Key? key}) : super(key: key);

  @override
  State<CreateRoomScreen> createState() => _CreateRoomScreenState();
}

class _CreateRoomScreenState extends State<CreateRoomScreen> {
  final _socketClient = SocketClient.instance.socket!;

  test() {
    print('Line 18');
    _socketClient.emit("test", "Socket Connected");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
            margin: const EdgeInsets.symmetric(
              horizontal: 20,
            ),
            child: ElevatedButton(
              onPressed: test,
              child: const Text(
                "Test Connection",
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                ),
              ),
            )),
      ),
    );
  }
}

index.js

// IMPORTS
const express = require("express");
const http = require("http");
const mongoose = require("mongoose");

// create a server
const app = express();
const port = process.env.PORT || 3000;
var server = http.createServer(app);
var io = require("socket.io")(server);

// middle ware
app.use(express.json());

// connect to mongodb
const DB = "link";

// listening to socket io events from the client (flutter code)
io.on("connection", (socket) => {
  console.log(socket.id);
  socket.on("test", (data) => {
    console.log(data);
  })
  
});

mongoose
  .connect(DB)
  .then(() => {
    console.log("Connection Successful!");
  })
  .catch((e) => {
    console.log(e);
  });

// listen to server
server.listen(port, "0.0.0.0", () => {
  console.log(`Server started and running on port ${port}`);
});

Answer 1

Try calling the test() in initState

@override
void initState() {
  super.initState();
  test();
}