Error when trying to connect flutter app to web socket

Issue

im trying to connect my flutter app with websocket, i guess server side is working fine but getting error below in client side, any idea why ? And also read similar questions, usually they say 'it's about device connection' but i can work with restful api's in my emulator so i think that's not the issue.

Error

 WebSocketException: Connection to 'http://localhost:8080/socket.io/?EIO=3&transport=websocket#' was not upgraded to websocket

Client Side

 import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:live_chat_mongo/function.dart';
    import 'package:live_chat_mongo/models/Message.dart';
    import 'package:socket_io_client/socket_io_client.dart' as IO;
    
    import 'package:socket_io_client/socket_io_client.dart';
    
    // STEP1:  Stream setup
    class StreamSocket {
      final _socketResponse = StreamController<String>();
    
      void Function(String) get addResponse => _socketResponse.sink.add;
    
      Stream<String> get getResponse => _socketResponse.stream;
    
      void dispose() {
        _socketResponse.close();
      }
    }
    
    StreamSocket streamSocket = StreamSocket();
    
    //STEP2: Add this function in main function in main.dart file and add incoming data to the stream
    void connectAndListen() {
      IO.Socket socket = IO.io('http://localhost:8080/v1',
          OptionBuilder().setTransports(['websocket']).build());
      socket.onConnectError((data) => print(data));
      socket.onConnect((_) {
        print('connect');
      });
    
      //When an event recieved from server, data is added to the stream
      socket.on('event', (data) => streamSocket.addResponse);
      socket.onDisconnect((_) => print('disconnect'));
    }
    
    //Step3: Build widgets with streambuilder
    
    class BuildWithSocketStream extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: StreamBuilder(
            stream: streamSocket.getResponse,
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              return Container(
                child: Text('ds'),
              );
            },
          ),
        );
      }
    }
    
    void main() {
      connectAndListen();
      runApp(MaterialApp(home: BuildWithSocketStream()));
    }

Server Side

require("dotenv").config({ path: "variables.env" });

require("./app/services/mongo");
// require('./app/services/redis');

require("./app/models/User.js");
require("./app/models/Event.js");
require("./app/models/Committee.js");
require("./app/models/Comment.js");
require("./app/models/EventSession.js");
require("./app/models/Subscription.js");
require("./app/models/Form.js");
require("./app/models/Application.js");
require("./app/models/Announcement.js");
require("./app/models/MailToken.js");
require("./app/models/MailError.js");
require("./app/models/BlogPost.js");
require("./app/models/BlogComment.js");
require("./app/models/BlogCategory.js");

const app = require("./app");
var http = require("http").Server(app);
var io = require("socket.io")(http);
io.on("connection", (s) => {
  console.log("socket.io connection");

});
app.set("port", process.env.PORT || 7070);
const server = app.listen(app.get("port"), () => {
  console.log(`Express running → localhost:${server.address().port}`);
});

Solution

I am facing this problem and I solved this issue by changing my version of socket_io_client

Answered By - Farooq Haroon