Unable to subscribe to web socket in flutter

[plasmatiger]

have been using socket_io_client package to implement the real-time messaging in a flutter app. I am stuck at a point where I am unable to figure out where to apply the socket.on function (subscribe). I am attaching my singleChat.dart file which acts as a model (JAVA POJO, DAO, and controller) to feed my messaging. "socket.emit" works and the message is sent to the backend. One can find "socket.on" commented at many places as my attempts.

import '../utility/constant.dart';

import '../exceptions/httpExceptions.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:socket_io_client/socket_io_client.dart' as IO;

// import '../models/message.dart';

class SingleChat with ChangeNotifier {
  List<Message> _messages = [];
  IO.Socket _socket;
  String _authToken = null;
  String _userID = null;

  String _friendID = null;

  void update(String authToken, String userID, List<Message> messages,
      String friendID) {
    _authToken = authToken;
    _messages = messages;
    _userID = userID;
    _friendID = friendID;
  }

  // ChatMessage(this._authToken, this._messages);

  List<Message> get messages {
    return [..._messages];
  }

  String get userID {
    return _userID;
  }

  String get friendID {
    return _friendID;
  }

  void setFriendID(String friendID) {
    _friendID = friendID;
  }

  void initSocket() {
    // print("init socket");
    // print(Constant.chatUrl);
    // print(_socket.connected);
    _socket = IO.io(Constant.socketUrl, <String, dynamic>{
      'transports': ['websocket'],
    });
    // print(_socket.connected);
    //_socket.on("connect", (_) => print('Connected'));
    // print(_socket.connected);

    _socket.emit('user_connected', _userID);
    // _socket.emitWithAck('user_connected', (data) {
    //   print('message getting in acknowledgement');
    // });
    // _socket.on('sent_message', (data) {
    //     print("message getting here");
    //     Message newMessage = Message(
    //         dateTimeOfMessage: DateTime.now(),
    //         isMe: true,
    //         message: data['message'],
    //         messageID: DateTime.now().toIso8601String(),
    //         messageType: "Chat");
    //     _messages.insert(0, newMessage);
    //     notifyListeners();
    //   });
  }

  void checkConnection() {
    print("start check");
    _socket.on('user_connected', (data) => print("user connected" + data));
    print('in checking');
  }

  Future<void> fetchAndSetMessage(String friend) async {
    final url = Constant.chatUrl + "get_message";
    setFriendID(friend);

    try {
      final response = await http.post(url,
          body: json.encode({'sender': _userID, 'reciever': _friendID}),
          headers: {"Content-Type": "application/json"});
      final responseData = json.decode(response.body);
      // print(responseData);
      // if (responseData['status_code'] > 1) {
      //   // print ("in error");
      //   throw HttpExceptions(responseData["message"]);
      // }
      final List<Message> loadedMessage = [];
      responseData.forEach((message) {
        loadedMessage.add(
          Message(
            messageID: message['_id'],
            message: message['message'],
            dateTimeOfMessage: DateTime.parse(message['createdAt']),
            isMe: message['sender'] == _userID ? true : false,
            messageType: message.containsKey('messageType')
                ? message['messageType']
                : "Chat",
            stage: message.containsKey('stage') ? message['stage'] : "",
          ),
        );
      });
      _messages = loadedMessage;
      notifyListeners();
      initSocket();
      checkConnection();
    } catch (error) {
      throw (error);
    }
  }

  Future<void> addMessage(String message) async {
    //const url = "http://10.0.2.2:5000/add-message";
    // final data = json
    //     .encode({"sender": _userID, "reciever": _friendID, "message": message});
    final data = {"sender": _userID, "reciever": _friendID, "message": message};
    //print(data);

    // final id = DateTime.now().toString();
    // final dateTime = DateTime.now().toIso8601String();
    // return http
    //     .post(
    //   url,
    //   body: json.encode({
    //     "messageID": id,
    //     "message": message,
    //     "dateTimeOfMessage": dateTime,
    //     "isMe": "T",
    //     "messageType": "Chat",
    //   }),
    // )
    //     .then((response) {
    //   final newMessage = new Message(
    //     messageID: id,
    //     message: message,
    //     dateTimeOfMessage: DateTime.parse(dateTime),
    //     isMe: true,
    //   );
    try {
      _socket.emit('send_message', data);
      //   _socket.emitWithAck('user_connected', "data", ack:(data) {
      //   print('message getting in acknowledgement');
      // });
      // await Future.delayed(Duration(seconds: 5));
      // print("delay working");
      // _socket.on('sent_message', (data) {
      //     print("message getting here");
      //     Message newMessage = Message(
      //         dateTimeOfMessage: DateTime.now(),
      //         isMe: true,
      //         message: data['message'],
      //         messageID: DateTime.now().toIso8601String(),
      //         messageType: "Chat");
      //     _messages.insert(0, newMessage);
      //     notifyListeners();
      //   });

    } catch (error) {
      print(error);
      throw error;
    }
    return null;
  }

  // Future<void> updateMessage(Message message) async {
  //   final prodIndex = _messages.indexWhere((prod) => prod.id == message.id);
  //   final messageID = message.id;
  //   final url = "http://10.0.2.2:5000/edit-message/$messageID";

  //   await http.put(
  //     url,
  //     body: json.encode({
  //       "title": message.title,
  //       "description": message.description,
  //       "price": message.price,
  //       "imageUrl": message.imageUrl,
  //     }),
  //   );

  //   _messages[prodIndex] = message;
  //   notifyListeners();
  // }

  // Future<void> deleteMessage(String id) async {
  //   final url = "http://10.0.2.2:5000/delete-message/$id";
  //   final prodIndex = _messages.indexWhere((prod) => prod.id == id);
  //   var message = _messages[prodIndex];

  //   _messages.removeWhere((prod) => prod.id == id);
  //   notifyListeners();

  //   final response = await http.delete(url);

  //   if (response.statusCode >= 400) {
  //     _messages.insert(prodIndex, message);
  //     notifyListeners();
  //     throw HttpExceptions("Unable to delete");
  //   }
  //   message = null;

  //   // below code is optimistic call. Can use anytime without async
  //   // http.delete(url).then((response) {
  //   //   if (response.statusCode >= 400) {
  //   //     throw HttpExceptions("Unable to delete");
  //   //   }
  //   //   message = null;
  //   // }).catchError((error) {
  //   //   _messages.insert(prodIndex, message);
  //   //   notifyListeners();
  //   // });
  // }
}

class Message {
  final String messageID;
  final String message;
  final DateTime dateTimeOfMessage;
  final bool isMe;
  final String stage;
  String messageType = "Chat";

  Message({
    this.messageID,
    this.message,
    this.dateTimeOfMessage,
    this.isMe,
    this.stage,
    this.messageType,
  });
}

I am also attaching index.html file which is a template for my node server to test and it's working there.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>

</head>
<body>

    <input type="text" id="username" placeholder="enter username"></input>
    <button onclick="getName()" >Enter</button>
    <ul id="userlist"></ul>
    <textarea id="message"></textarea>
    <button onclick="sendMessage()">Send Message</button>
    <ul id="messages"></ul>
<script>
    var io= io('http://localhost:8081');
    var reciever=''
    var sender=''
    function getName(){
        var username= document.getElementById("username").value;
        sender=username;
        io.emit("user_connected",username);
        
        return false;
    }
    io.on("user_connected",(data)=>{
        console.log(data);
        
        var html=""
        html+="<li><button  onclick='selectUser(this.innerHTML)'>"+data+"</button></li>";
        document.getElementById("userlist").innerHTML+=html;
            
    });
    
    function selectUser(username){
        reciever=username;
        //io.emit('peer_connection',{'sender':sender,'reciever':reciever})
        console.log(username);
        $.ajax({
            url:'http://localhost:8081/get_message',
            method:"POST",
            data:{
                'sender':sender,
                'reciever':reciever
            },
            dataType:'json',
            success: (data)=>{
                //console.log(data);
                var html="";
                for (var i in data){
                    
                    html+="<li>"+data[i].sender+" says: "+data[i].message+"</li>";
                }
                
                document.getElementById('messages').innerHTML+=html;
            }
        });
        
    }
    function sendMessage(){
        var message=document.getElementById('message').value;
        var data={'sender':sender,'reciever':reciever,'message':message}
        var html="";
        html+="<li>you said: "+data.message+"</li>";
        document.getElementById('messages').innerHTML+=html;
        io.emit('send_message',data);

        console.log(message);
        
    }
    io.on('sent_message',(data)=>{
        console.log(data);
        var html="";
        html+="<li>"+data.sender+" says: "+data.message+"</li>";
        document.getElementById('messages').innerHTML+=html;


        
    })


</script>
</body>
</html>