Flutter应用与Node.js Server无法建立Socket.IO连接问题

我开发了一款基于Flutter的聊天应用，通过Socket.IO与Node.js服务器通信。Node.js服务器负责连接管理、根据收发方ID将用户加入指定房间及转发消息，但目前Flutter应用无法与服务器建立连接，两端已实现必要连接逻辑，仍无法交换消息，且已确认服务器在正确端口运行。

Node.js Socket.IO 代码 #

require("dotenv").config();
const express = require("express");

const mongoose = require("mongoose");
const app = express();
const authRouter = require("./routes/auth");
const updateRouter = require("./routes/update_user");
const statusRouter = require("./routes/status");
const http = require("http");
const path = require("path");
const socketIo = require("socket.io");
const server = http.createServer(app);
const io = socketIo(server);
// 静态托管上传的头像
app.use("/uploads", express.static(path.join(__dirname, "uploads")));

//process.env.PORT ||
const PORT = 3000;
io.on("connection", (socket) => {
  console.log("用户已连接");

  socket.on("join", (data) => {
    const { senderId, receiverId } = data;
    const roomId = `${senderId}_${receiverId}`;
    socket.join(roomId);
    console.log(`用户 ${senderId} 加入房间 ${roomId}`);
  });

  socket.on("message", (data) => {
    const { senderId, receiverId, message } = data;
    const roomId = `${senderId}_${receiverId}`;
    io.to(roomId).emit("message", { senderId, message });
  });

  socket.on("disconnect", () => {
    console.log("用户已断开连接");
  });
});

mongoose
  .connect(process.env.MONGO_URL)
  .then(() => {
    console.log("mongoDB 连接成功");
  })
  .catch((err) => {
    console.log(err);
  });
app.use(express.json());
app.use(authRouter);
app.use(updateRouter);
app.use(statusRouter);
app.listen(PORT, () => {
  console.log(`服务运行在端口 ${PORT}`);
});

Node.js 依赖版本 #

"dependencies": {
    "socket.io": "^4.7.5"
  }      

Flutter 代码 #

import 'package:amezone/constants/api_url.dart';
import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;

class ChatScreen extends StatefulWidget {
  final String receiverId;
  final String senderId;

  ChatScreen({Key? key, required this.senderId, required this.receiverId})
      : super(key: key);

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];
  late IO.Socket socket;

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

  void connect() {
    socket = IO.io(baseUrl, <String, dynamic>{
      "transports": ["websocket"],
      "autoConnect": false,
    });

    socket.connect();
    socket.onConnect((data) {
      print('已连接');
      socket.emit('join',
          {'senderId': widget.senderId, 'receiverId': widget.receiverId});
    });

    socket.on('message', (data) {
      final senderId = data['senderId'];
      final message = data['message'];
      setState(() {
        _messages.add('$senderId: $message');
      });
    });
    print(socket.connected);
  }

  void _sendMessage(String message) {
    socket.emit('message', {
      'senderId': widget.senderId,
      'receiverId': widget.receiverId,
      'message': message
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Socket.IO 聊天'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: '输入消息'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    _sendMessage(_controller.text);
                    _controller.clear();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

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

Flutter 依赖版本 #

socket_io_client: ^2.0.3+1

内容的提问来源于stack exchange，提问作者The Ultimate Gaming