Flutter + socket.io connection

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'),
          ),
        ],
      ),
    );
  }
}

Solution

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.

Comments

[Ryan]

The socket.emit() call has to be on the server-side and the client has to use the socket.on() call to subscribe to the event.

[Mahi]

socket.emit() can be on both sides, so they can listen each other.

[chichi]

You sir the savior!

[Anoir]

it's a pleasure ^^