Flutter + socket.io 连接

Question

I am trying to connect nodejs socket using Flutter socket.io_client. but It's not connecting, Server running fine. Below is server code, In flutter I used socket.io_client. There is no error, but still not connecting. I am a beginner in both socket and nodejs. Help me to find out what's the problem?

myserver.js

const socketio = require('socket.io');
const express = require('express');
const http = require('http');
const app = express();

server = app.listen(3000);
//io server
 //const io = require("socket.io")(server);
//3000 or any other port.
const io = http.createServer(app);
const PORT = 3000 || process.env.PORT;

console.log(`Server running on port ${PORT}`);

var userConnection = [];

io.on('connect', (socket)=> 
{
console.log(`nside connection`);
socket.on('users_info_to_signaling_server', (data) =>
{        
var other_users = userConnection.filter(p=> p.meeting_id == data.meetingid);    
// data saves to userConnection variable
// connection id and socket id are same
userConnection.push({
    connectionId: socket.id,
    user_id: data.current_user_name,
    meeting_id: data.meetingid,
})

})
    
})

Flutter code

import 'package:flutter/material.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _localRenderer = new RTCVideoRenderer();
  final _remoteRenderer = new RTCVideoRenderer();
  //final _remoteRenderer2 = new RTCVideoRenderer();

  TextEditingController titleController = TextEditingController();

  IO.Socket socket;

  @override
  void dispose() {
    // TODO: implement dispose
    titleController.dispose();
    super.dispose();
  }

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

  void connectToServer() {
    //initializing with backend server

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

    //connection to server
    socket.connect();
    
    socket.onConnect((_) {
     
      if (socket.connected) {
        print('socket connected');
        socket.emit('users_info_to_signaling_server',
            {"current_user_name": "abccheck", "meetingid": "testing"});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              Container(
                height: 210,
                child: Row(
                  children: [
                    Container(
                      margin: EdgeInsets.all(8.0),
                      padding: EdgeInsets.all(8.0),
                      height: 200,
                      width: 350,
                      decoration: BoxDecoration(color: Colors.black),
                      key: Key('local'),
                      child: RTCVideoView(_localRenderer),
                    ),
                    Container(
                      margin: EdgeInsets.all(8.0),
                      padding: EdgeInsets.all(8.0),
                      height: 200,
                      width: 350,
                      decoration: BoxDecoration(color: Colors.black),
                      key: Key('remote'),
                      child: RTCVideoView(_localRenderer),
                    ),
                    Container(
                      margin: EdgeInsets.all(8.0),
                      padding: EdgeInsets.all(8.0),
                      height: 200,
                      width: 350,
                      decoration: BoxDecoration(color: Colors.black),
                      key: Key('remote2'),
                      child: RTCVideoView(_localRenderer),
                    ),
                  ],
                ),
              )
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: titleController,
              decoration: InputDecoration(
                hintText: 'Name or MeetingID',
                alignLabelWithHint: true,
              ),
            ),
          ),
          SizedBox(
            height: 8.0,
          ),
          RaisedButton(
            onPressed: () {},
            child: Text('Host'),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text('Join'),
          ),
        ],
      ),
    );
  }
}

Answer 1

Probably i'm late but maybe one day i would help someone else. So the issue is that there are version compatibilities you need to check the documentations for your plugin like below Version conflitcts

good luck hope this help have a great day.

Answer 2

Here is my solution: You need to write 192.168.1.x instead of localhost . If you run Express app port 3000 then:

socket = IO.io('http://192.168.1.x:3000', <String, dynamic>{
      'transports': ['websocket'],
      'autoConnect': false,
    });

To find out your local ip address in windows, open cmd and write ipconfig .

...
...
 IPv4 Address. . . . . . . . . . . : 192.168.1.x
...
...