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

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. — Ryan
– Ryan, Commented Jul 8, 2021 at 17:53
socket.emit() can be on both sides, so they can listen each other. — Mahi
– Mahi, Commented Jul 9, 2021 at 1:03

Dalija Prasnikar · Accepted Answer · 2023-01-26 12:26:15Z

3

The issue is that there are version compatibilities you need to check the documentation for your plugin like shown below

Version conflicts

edited Jan 26, 2023 at 12:26

Dalija Prasnikar♦

28.7k46 gold badges97 silver badges179 bronze badges

answered Sep 28, 2021 at 19:45

Anoir

411 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chichi Over a year ago

You sir the savior!

Anoir Over a year ago

it's a pleasure ^^

Baris Senyerli · Accepted Answer · 2023-01-26 07:17:34Z

0

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
...
...

edited Jan 26, 2023 at 7:17

answered Jan 26, 2023 at 6:26

Baris Senyerli

9279 silver badges17 bronze badges

Collectives™ on Stack Overflow

Flutter + socket.io connection

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related