pingInterval now working on android

client/lib/home_screen.dart

@@ -1,178 +1,201 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart'; // for going in fullscreen mode
-import 'package:flutter/scheduler.dart';  // to add scheduler start sending touch on touch start
+import 'package:flutter/scheduler.dart'; // to add scheduler start sending touch on touch start
 
 import 'package:shared_preferences/shared_preferences.dart';
 
 // import 'package:web_socket_channel/status.dart' as status;
 
-import 'ws_server_connection_handler.dart';
+// import 'ws_server_connection_handler.dart';
+import 'package:web_socket_client/web_socket_client.dart';
 
 import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 
-import 'package:flutter/foundation.dart' show kIsWeb; // to check of platform is web
+import 'package:flutter/foundation.dart'
+    show kIsWeb; // to check of platform is web
 import 'vibration/vibration_exporter.dart';
 
 import "dart:convert";
 import "dart:async";
 
-void enterFullScreen(){
-  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive,overlays: []);
+void enterFullScreen() {
+  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive, overlays: []);
 }
-void exitFullScreen(){
-  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays:SystemUiOverlay.values);
+
+void exitFullScreen() {
+  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
+      overlays: SystemUiOverlay.values);
 }
 
-class HomeScreen extends StatefulWidget{
+class HomeScreen extends StatefulWidget {
   const HomeScreen({super.key});
-  
 
   @override
-  State<HomeScreen> createState(){
+  State<HomeScreen> createState() {
     return HomeScreenState();
   }
 }
 
-class HomeScreenState extends State<HomeScreen>{
-  late CustomWSChannel channel;
-  late double width,height;
+class HomeScreenState extends State<HomeScreen> {
+  late WebSocket socket;
+  late double width, height;
   late SharedPreferences prefs;
-  double containerHeight = 0,containerWidth=0;
+  double containerHeight = 0, containerWidth = 0;
 
   late Timer sendTouchScheduler;
+  Timer endSendTouchTimer = Timer(Duration.zero, () {});
 
-  double touchsize=100;
-  double touchX = 0,touchY=0;
-  bool isTouching=false;
+  double touchsize = 100;
+  double touchX = 0, touchY = 0;
+  bool isTouching = false;
 
-  bool hasCollided=false; // hascollided can be useful to show any type special effect later on
+  bool hasCollided =
+      false; // hascollided can be useful to show any type special effect later on
 
   late List<dynamic> userList;
-  late List<String> roomidList,roomnameList;
-  String currRoomId="",currRoomName="";
-  String username="";
-  String userid="";
-  String profileColor="ff000000";
-  Map<String,Map> othersTouchPoints={};
-  final double outsidepadding=15;
-  final int touchRefreshRate = 1000~/30;  // 30 fps
+  late List<String> roomidList, roomnameList;
+  String currRoomId = "", currRoomName = "";
+  String username = "";
+  String userid = "";
+  String profileColor = "ff000000";
+  Map<String, Map> othersTouchPoints = {};
+  final double outsidepadding = 15;
+  final int touchRefreshRate = 1000 ~/ 30; // 30 fps
   // final int touchRefreshRate = 1000~/60;  // 60 fps
+  // bool isConnected = false;
 
-   GlobalKey headerKey = GlobalKey(); // to calculate the header's height
+  GlobalKey headerKey = GlobalKey(); // to calculate the header's height
 
   @override
-  void initState(){
+  void initState() {
     super.initState();
     enterFullScreen();
-    roomidList=[];
-    roomnameList=[];
-    userList=[];
+    roomidList = [];
+    roomnameList = [];
+    userList = [];
 
     // roomidList=["1","2"];
     // roomnameList=["room 1","room 2"];
 
-    Map data={
+    Map data = {
       "user": {
-      "username": "enemy",
-      "id": "string",
+        "username": "enemy",
+        "id": "string",
       },
       "position": {
-        "x": 0.0+touchsize/2,  // top left corner
-        "y": 0.0+touchsize/2,  // top left corner
+        "x": 0.0 + touchsize / 2, // top left corner
+        "y": 0.0 + touchsize / 2, // top left corner
       },
       "color": "ff2244bb", // Hex value.
       "intensity": 1, // Vibration intensity.
-      };
+    };
 
-    othersTouchPoints[data['user']['id']]=data;
-    
+    othersTouchPoints[data['user']['id']] = data;
 
-    WidgetsBinding.instance.addPostFrameCallback((_){ // this function is called after the build method is done executing
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      // this function is called after the build method is done executing
       getPreferences();
       connectWebsocket();
     });
-    
-    // just for debugging 
+
+    // just for debugging
     // WidgetsBinding.instance.addPostFrameCallback((_){
     //   showSnackBar(getHeaderHeight().toString());
     // });
-    
+
     // just for debugging vibrations
     // Vibration.vibrate(pattern:[100]);
     // Vibration.vibrate(pattern:[200,100]);
-
   }
 
   @override
-  void dispose(){
+  void dispose() {
     exitFullScreen();
-    channel.sink.close();
+    socket.close();
     super.dispose();
   }
 
-  void showSnackBar(String text){
+  void showSnackBar(String text) {
     ScaffoldMessenger.of(context).hideCurrentSnackBar();
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content:Text(text)
-      )
-    );
+    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(text)));
   }
 
-  double? getHeaderHeight(){
-    var size=headerKey.currentContext?.size;
+  double? getHeaderHeight() {
+    var size = headerKey.currentContext?.size;
     // debugPrint(size?.height);
     return size?.height;
   }
 
-  void getPreferences() async{
+  void getPreferences() async {
     prefs = await SharedPreferences.getInstance();
 
     // initialize empty room list if no preferences found
-    if(!prefs.containsKey("roomid_list")){
-      prefs.setStringList("roomid_list",[]);
-      prefs.setStringList("roomname_list",[]);
+    if (!prefs.containsKey("roomid_list")) {
+      prefs.setStringList("roomid_list", []);
+      prefs.setStringList("roomname_list", []);
     }
     // intialize from preferences
     setState(() {
-      roomidList=prefs.getStringList("roomid_list")!;
-      roomnameList=prefs.getStringList("roomname_list")!;
-      username=prefs.getString("username")!;  // to get the username from device's local storage
-      profileColor=prefs.getString("profile_color")!; // to get the profilecolor from device's local storage
+      roomidList = prefs.getStringList("roomid_list")!;
+      roomnameList = prefs.getStringList("roomname_list")!;
+      username = prefs.getString(
+          "username")!; // to get the username from device's local storage
+      profileColor = prefs.getString(
+          "profile_color")!; // to get the profilecolor from device's local storage
     });
   }
 
+  void connectWebsocket() async {
+    const timeout = Duration(seconds: 10);
+    const backoff = ConstantBackoff(Duration(seconds: 1));
+    const pingInterval = Duration(seconds: 3);
 
-  void connectWebsocket() async{
+    final socketUri = Uri.parse(const String.fromEnvironment("WS_SERVER_URL",
+        defaultValue: "ws://localhost:3000"));
 
-    channel=CustomWSChannel(
-      
-      const String.fromEnvironment(
-        "WS_SERVER_URL",
-        defaultValue: "ws://localhost:3000"
-      ),
-      
-      onMessage: responseHandler,
-      onErrorShowMessage:(msg,e){
-        showSnackBar(msg);
-      },
-      onConnect:(){
-        showSnackBar("connected");
-        setUsername();
-        
-        // on connected test connection
-        Object data = {
-          "route":"test_connection"
-        };
-        channel.sink.add(json.encode(data));
-      }
+    socket = WebSocket(
+      socketUri,
+      timeout: timeout,
+      backoff: backoff,
+      pingInterval: pingInterval,
     );
-    
+
+    socket.connection.listen((state) {
+      debugPrint("state:\t $state");
+      if (state is Connected || state is Reconnected) {
+        // isConnected = true;
+        onConnected();
+      }
+
+      // isConnected = false;
+
+      if (state is Connecting || state is Reconnecting) {
+        showSnackBar("Connecting");
+      }
+
+      if (state is Disconnected) {
+        showSnackBar("Disconnected");
+      }
+    });
+
+    socket.messages.listen(responseHandler);
+  }
+
+  bool isConnected(){
+    return socket.connection.state is Connected || socket.connection.state is Reconnected;
+  }
+  void onConnected() {
+    showSnackBar("connected");
+    setUsername();
+
+    // on connected test connection
+    Object data = {"route": "test_connection"};
+    socket.send(json.encode(data));
   }
 
-  void setUsername() async{
+  void setUsername() async {
     prefs = await SharedPreferences.getInstance();
-    if(!await channel.isConnected()){
+    if (!isConnected()) {
       return;
     }
     // set username
@@ -180,129 +203,127 @@ class HomeScreenState extends State<HomeScreen>{
       "route": "set_username",
       "username": prefs.getString("username"),
     };
-    
-    channel.sink.add(json.encode(data));
 
+    socket.send(json.encode(data));
   }
-  
+
   void responseHandler(message) {
     // message.get
     Map map;
     final String type;
-    
-    try{
-      map = jsonDecode(message);  // try to decode the message into json format
-    }
-    catch(e){
+
+    try {
+      map = jsonDecode(message); // try to decode the message into json format
+    } catch (e) {
       debugPrint("can't decode to json:\t$message");
       return;
     }
-    
+
     // if any error found do nothing
-    if(map.containsKey("error")){
+    if (map.containsKey("error")) {
       debugPrint(map.toString());
       return;
     }
-    
-    type = map["message"];  // get the type of the message
 
-    if(type=="test_connection_response"){
+    type = map["message"]; // get the type of the message
+  
+
+    if (type == "test_connection_response") {
       // testing connection
       debugPrint("test_connection successful");
-
-    }
-    else if(type=="set_username_response"){
+    } else if (type == "pong") {
+      debugPrint("pong"); // handling pongs
+    } else if (type == "set_username_response") {
       debugPrint(map.toString());
       setState(() {
-        userid=map['user']['id']; // set our userid
+        userid = map['user']['id']; // set our userid
       });
-    }
-    else if(type=="join_room_response"){  // on error
+    } else if (type == "join_room_response") {
+      // on error
       // debugPrint(map.toString());
       showSnackBar(map['status']);
-    }
-    else if(type=="room_update"){
+    } else if (type == "room_update") {
       debugPrint(map.toString());
-      if(currRoomId!=map['roomId']){  // only update on room change
-        setState((){
-          currRoomId=map['roomId'];
-          currRoomName=map['roomId'];
+      if (currRoomId != map['roomId']) {
+        // only update on room change
+        setState(() {
+          currRoomId = map['roomId'];
+          currRoomName = map['roomId'];
         });
       }
-  
+
       // update users list
       setState(() {
-        userList=map['users'];
+        userList = map['users'];
       });
-      
-    }
-    else if(type=="send_vibration_response"){ // handles when we send_touch without being in a room
+    } else if (type == "send_vibration_response") {
+      // handles when we send_touch without being in a room
       debugPrint(map.toString());
-      showSnackBar(map['status']);  // shows error that we are not part of the room
+      showSnackBar(
+          map['status']); // shows error that we are not part of the room
       setState(() {
-        currRoomId="";    // clears the current roomid
-        currRoomName="";
+        currRoomId = ""; // clears the current roomid
+        currRoomName = "";
+        userList = [];
       });
-    }
-    else if(type=="receive_touch"){
-      if(map['user']['id']==userid){  // this is touch which we originated so we ignore it
+    } else if (type == "receive_touch") {
+      if (map['user']['id'] == userid) {
+        // this is touch which we originated so we ignore it
         // debugPrint("self touch received. Ignore this");
         return;
       }
-    
+
       // touch received to update othersTouchPoints
       // debugPrint(map);
-      if(map['type']=='enabled'){  // add touch point
-      
-        // static height and width 
-        double staticHeight=getHeaderHeight()!+outsidepadding*2;    // this is the extra static height 
-        double staticWidth=outsidepadding*2;    // this is the extra static width
-        
+      if (map['type'] == 'enabled') {
+        // add touch point
+
+        // static height and width
+        double staticHeight = getHeaderHeight()! +
+            outsidepadding * 2; // this is the extra static height
+        double staticWidth =
+            outsidepadding * 2; // this is the extra static width
+
         // rescale point according to the screen
-        map['position']['x']*=width-staticWidth;
-        map['position']['y']*=height-staticHeight;
-        
+        map['position']['x'] *= width - staticWidth;
+        map['position']['y'] *= height - staticHeight;
+
         // debugPrint(map['position']['x'].toString());
         // debugPrint(map['position']['y'].toString());
         setState(() {
-          othersTouchPoints[map['id']]=map; // updating other's touch points
+          othersTouchPoints[map['id']] = map; // updating other's touch points
         });
-      }
-      else{   // map['type']=='disabled'
+      } else {
+        // map['type']=='disabled'
         setState(() {
-          othersTouchPoints.remove(map['id']);  // delete the touch point
+          othersTouchPoints.remove(map['id']); // delete the touch point
         });
       }
-    
     }
-
   }
 
-  
-
-
-  void toggleContainer(){
+  void toggleContainer() {
     // to toggle the visibility of the center popup container
-    if(containerHeight==0){
+    if (containerHeight == 0) {
       setState(() {
-        containerHeight=200;
-        containerWidth=220;
+        containerHeight = 200;
+        containerWidth = 220;
       });
-    }
-    else{
+    } else {
       setState(() {
-        containerHeight=0;
-        containerWidth=0;
+        containerHeight = 0;
+        containerWidth = 0;
       });
     }
   }
 
-  void createRoom({String roomId=""}) async{
+  void createRoom({String roomId = ""}) async {
     // it is used to create a room in server
     // or to connect to an existing room
     Map data;
+    print(isConnected());
 
-    if(!await channel.isConnected()){
+    if (!isConnected()) {
       return;
     }
 
@@ -312,217 +333,213 @@ class HomeScreenState extends State<HomeScreen>{
       "username": username,
     };
 
-    // to join existing room 
-    if(roomId.isNotEmpty){
-      data["roomId"]=roomId;
+    // to join existing room
+    if (roomId.isNotEmpty) {
+      data["roomId"] = roomId;
     }
-    channel.sink.add(json.encode(data));
+    socket.send(json.encode(data));
 
     // we will get in the room with the server data
     // from the room_update response
   }
 
-  void joinRoomForm(){
+  void joinRoomForm() {
     // popup for entering the room id to join an existing room
-     
+
     showDialog(
-      context: context, 
-      builder:(context) {
-       
+      context: context,
+      builder: (context) {
         return AlertDialog(
-          content:SingleChildScrollView(
-            child:Column(
-              children: [
-
-                TextField(
-                  decoration:const InputDecoration(
-                    hintText: "Enter Room ID",
-                  ),
-
-                  onSubmitted: (value){
-                    Navigator.pop(context); // close the dialog
-                    createRoom(roomId:value); // join room
-                  },
-                ),
-            ])
-          ),
+          content: SingleChildScrollView(
+              child: Column(children: [
+            TextField(
+              decoration: const InputDecoration(
+                hintText: "Enter Room ID",
+              ),
+              onSubmitted: (value) {
+                Navigator.pop(context); // close the dialog
+                createRoom(roomId: value); // join room
+              },
+            ),
+          ])),
         );
       },
     );
   }
-  
-  Widget header(){
 
-    Color buttoncolor=const Color.fromARGB(255, 70, 70, 70);
-    
+  Widget header() {
+    Color buttoncolor = const Color.fromARGB(255, 70, 70, 70);
+
     return Padding(
-      key:headerKey,
-      padding:const EdgeInsets.symmetric(vertical:20),
-      child:Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
+      key: headerKey,
+      padding: const EdgeInsets.symmetric(vertical: 20),
+      child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
+        // sub row to group create/join room button and roomuserslist
+        Row(children: [
+          // create/join room popup
+          CircleAvatar(
+            backgroundColor: buttoncolor,
+            child: PopupMenuButton(
+              onSelected: (value) {
+                switch (value) {
+                  case 'createRoom':
+                    return createRoom();
+                  case 'joinRoom':
+                    return joinRoomForm();
+                  default:
+                    throw UnimplementedError();
+                }
+              },
+              icon: const Icon(Icons.add, color: Colors.white), // + icon
+              tooltip: "Create/Join Room",
+              itemBuilder: (context) => const [
+                PopupMenuItem(
+                  value: "createRoom",
+                  child: Text("Create Room"),
+                ),
+                PopupMenuItem(
+                  value: "joinRoom",
+                  child: Text("Join Room"),
+                ),
+              ],
+            ),
+          ),
 
-              // sub row to group create/join room button and roomuserslist
-              Row(
-                children: [
-
-                  // create/join room popup 
-                  CircleAvatar(
-                    backgroundColor: buttoncolor,
-                    child: PopupMenuButton(
-                      onSelected: (value){
-                        switch(value){
-                          case 'createRoom':
-                            return createRoom();
-                          case 'joinRoom':
-                            return joinRoomForm();
-                          default:
-                            throw UnimplementedError();
-                        }
-                      },
-                      icon:const Icon(Icons.add,color:Colors.white),  // + icon
-                      tooltip: "Create/Join Room",
-                      itemBuilder: (context)=>const[
-                  
-                        PopupMenuItem(
-                          value:"createRoom",
-                          child: Text("Create Room"),
-                        ),
-                  
-                        PopupMenuItem(
-                          value:"joinRoom",
-                          child: Text("Join Room"),
-                        ),
-                     
-                      ],
+          // users list
+          Container(
+            margin: const EdgeInsets.only(left: 10),
+            child: Row(children: [
+              ...userList.map(
+                (user) {
+                  return Container(
+                    // each person's name who is in a room
+                    height: 50,
+                    width: 50,
+                    margin: const EdgeInsets.only(left: 4),
+                    alignment: Alignment.center,
+                    decoration: BoxDecoration(
+                      color: Colors
+                          .white, // white background // we can also use their profilecolor here
+                      borderRadius: BorderRadius.circular(50),
                     ),
-                  ),
-
-                  // users list
-                  Container(
-                    margin:const EdgeInsets.only(left:10),
-                    child: Row(children: [
-                      ...userList.map((user) {
-
-                        return Container( // each person's name who is in a room
-                          height: 50,
-                          width:50,
-                          margin:const EdgeInsets.only(left:4),
-                          alignment:Alignment.center,
-                          decoration: BoxDecoration(
-                            color: Colors.white,  // white background // we can also use their profilecolor here
-                            borderRadius: BorderRadius.circular(50),
-                          ),
-                          child: Text(user["username"], // their username
-                            style:const TextStyle(
-                              color: Colors.black,
-                            ),
-                          ),
-                        );
-                      },).toList(),
-
-                    ]),
-                  )
-      
-              ]),
-
-              // centered Lobby thing
-              GestureDetector(
-                onTap:toggleContainer,
-                onLongPress:() async{ // long press to copy roomid to clipboard
-                  // copy to clipboard
-                  await Clipboard.setData(ClipboardData(text:currRoomId));
-                  showSnackBar("copied!");
-                },
-                child:Row(  // roomid+dropdown_icon
-                  children:[
-                    
-                    // roomid 
-                    Text(
-                      currRoomName.isEmpty?"Lobby":currRoomName,
-                      style:const TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.w500,
-                        overflow:TextOverflow.ellipsis,
+                    child: Text(
+                      user["username"], // their username
+                      style: const TextStyle(
+                        color: Colors.black,
                       ),
                     ),
-
-                    // icon based on if the container is visible or not
-                    if(containerHeight==0)...[
-                    const Icon(Icons.arrow_drop_down),
-                    ]
-                    else...[
-                    const Icon(Icons.arrow_drop_up),
-                    ]   
-
-                ]),
+                  );
+                },
+              ).toList(),
+            ]),
+          )
+        ]),
+
+        // centered Lobby thing
+        GestureDetector(
+          onTap: toggleContainer,
+          onLongPress: () async {
+            // long press to copy roomid to clipboard
+            // copy to clipboard
+            await Clipboard.setData(ClipboardData(text: currRoomId));
+            showSnackBar("copied!");
+          },
+          child: Row(// roomid+dropdown_icon
+              children: [
+            // roomid
+            Text(
+              currRoomName.isEmpty ? "Lobby" : currRoomName,
+              style: const TextStyle(
+                fontSize: 20,
+                fontWeight: FontWeight.w500,
+                overflow: TextOverflow.ellipsis,
               ),
+            ),
 
-              // settings button
-              CircleAvatar(
-                backgroundColor: buttoncolor,
-                child:IconButton(
-
-                  tooltip: "setings", // text which is showed when long pressing or hovering
-                  onPressed: (){},  // does nothing till now
-                  icon:const Icon(
-                    Icons.settings,
-                    color:Colors.white,
-                  ),
-                ),
-              ),
+            // icon based on if the container is visible or not
+            if (containerHeight == 0) ...[
+              const Icon(Icons.arrow_drop_down),
+            ] else ...[
+              const Icon(Icons.arrow_drop_up),
+            ]
+          ]),
+        ),
 
+        // settings button
+        CircleAvatar(
+          backgroundColor: buttoncolor,
+          child: IconButton(
+            tooltip:
+                "setings", // text which is showed when long pressing or hovering
+            onPressed: () {}, // does nothing till now
+            icon: const Icon(
+              Icons.settings,
+              color: Colors.white,
+            ),
+          ),
+        ),
       ]),
-
     );
   }
 
-
-  void startSendTouch(){
+  void startSendTouch() {
     // to start the send_touch scheduler
 
-    sendTouchScheduler=Timer.periodic(
-      Duration(milliseconds: touchRefreshRate), (timer) async {
-        // send touch to server
-        Map data;
-        double staticHeight=getHeaderHeight()!+outsidepadding*2;    // this is the extra static height which change with resize
-        double staticWidth=outsidepadding*2;    // this is the extra static height which change with resize
-
-        if(!await channel.isConnected()){
-          return;
-        }
-        data={
-          "route": "send_touch",
-          "id": 1,
-          "type": "enabled",  // Whether the vibration is active or not.
-          "position": {
-            "x": touchX/(width-staticWidth),  // send ratio x e.g. : x:700, width:800,  then send 0.875
-            "y": touchY/(height-staticHeight), // send ratio y e.g. : y:400, height:800 then send 0.5
-          },
-          "color": profileColor, // Hex value. Default: random
-          // "intensity"?: 1 // Vibration intensity. Default: 1
-        };
-        // debugPrint(data['position']['x']);
-        // debugPrint(data['position']['y']);
-        channel.sink.add(jsonEncode(data));
+    // endSendTouchTimer.cancel();
+
+    sendTouchScheduler =
+        Timer.periodic(Duration(milliseconds: touchRefreshRate), (timer) async {
+      // send touch to server
+      Map data;
+      double staticHeight = getHeaderHeight()! +
+          outsidepadding *
+              2; // this is the extra static height which change with resize
+      double staticWidth = outsidepadding *
+          2; // this is the extra static height which change with resize
+
+      // debugPrint("isaAlive:"+channel.isAliave.toString());
+      debugPrint("isConnected():" + isConnected().toString());
+      // debugPrint("see:"+channel.sink.toString());
+      if (!isConnected()) {
+        return;
       }
-    );
+      data = {
+        "route": "send_touch",
+        "id": 1,
+        "type": "enabled", // Whether the vibration is active or not.
+        "position": {
+          "x": touchX /
+              (width -
+                  staticWidth), // send ratio x e.g. : x:700, width:800,  then send 0.875
+          "y": touchY /
+              (height -
+                  staticHeight), // send ratio y e.g. : y:400, height:800 then send 0.5
+        },
+        "color": profileColor, // Hex value. Default: random
+        // "intensity"?: 1 // Vibration intensity. Default: 1
+      };
+      // debugPrint(data['position']['x']);
+      // debugPrint(data['position']['y']);
+      socket.send(jsonEncode(data));
+    });
+
+    // endSendTouchTimer = Timer(const Duration(milliseconds: 1000),() {sendTouchScheduler.cancel(); });
   }
 
-  void stopSendTouch() async{
+  void stopSendTouch() async {
     // to stop the send_touch scheduler
 
     sendTouchScheduler.cancel();
 
     // send one last touch to tell touch is ended
     Map data;
-    if(!await channel.isConnected()){
+    if (!isConnected()) {
       return;
     }
-    data={
+    data = {
       "route": "send_touch",
       "id": 1,
-      "type": "disabled",  // Whether the vibration is active or not.
+      "type": "disabled", // Whether the vibration is active or not.
       "position": {
         "x": 0,
         "y": 0,
@@ -531,17 +548,15 @@ class HomeScreenState extends State<HomeScreen>{
       // "intensity"?: 1 // Vibration intensity. Default: 1
     };
 
-    channel.sink.add(jsonEncode(data));
-
+    socket.send(jsonEncode(data));
   }
 
-  Widget buildTouchPoint({
-    required bool visible,
-    required double x,
-    required double y,
-    required double size,
-    required Color color
-    }){
+  Widget buildTouchPoint(
+      {required bool visible,
+      required double x,
+      required double y,
+      required double size,
+      required Color color}) {
     /*
       bool visible: if the touchpoint is visible
       double x: touchpoint's center x position
@@ -550,28 +565,28 @@ class HomeScreenState extends State<HomeScreen>{
       double size: touchpoint's size
       Color color: touchpoint's color
     */
-    
-    color=color.withOpacity(0.5); // make the color a little translucent
+
+    color = color.withOpacity(0.5); // make the color a little translucent
 
     return Visibility(
-      visible:visible,
+      visible: visible,
       child: AnimatedPositioned(
         duration: Duration(milliseconds: touchRefreshRate),
-        left:x-size/2,
-        top:y-size/2,
+        left: x - size / 2,
+        top: y - size / 2,
         child: Container(
-          width:size,
-          height:size,
+          width: size,
+          height: size,
           decoration: BoxDecoration(
-            color:color,
-            borderRadius: BorderRadius.circular(50),
-            boxShadow: [
-              BoxShadow(
-                color:color,
-                blurRadius: 10,
-                spreadRadius: 5,
-              ),
-          ]),
+              color: color,
+              borderRadius: BorderRadius.circular(50),
+              boxShadow: [
+                BoxShadow(
+                  color: color,
+                  blurRadius: 10,
+                  spreadRadius: 5,
+                ),
+              ]),
         ),
       ),
     );
@@ -580,38 +595,34 @@ class HomeScreenState extends State<HomeScreen>{
   void detectTouchCollision({
     required double x,
     required double y,
-  }){
+  }) {
     // detect our touch point collision with any other's TouchPoints
 
-    for(Map map in othersTouchPoints.values){
-    
-      double dx = (map["position"]["x"]-x).abs();
-      double dy = (map["position"]["y"]-y).abs();
+    for (Map map in othersTouchPoints.values) {
+      double dx = (map["position"]["x"] - x).abs();
+      double dy = (map["position"]["y"] - y).abs();
       // debugPrint("x:"+x.toString()+"\ty:"+y.toString());
       // debugPrint("dx:"+dx.toString()+"\tdy:"+dy.toString());
-      if (dx<=touchsize && dy<=touchsize){
-
-        if(hasCollided==false){
+      if (dx <= touchsize && dy <= touchsize) {
+        if (hasCollided == false) {
           // Collision Started
           debugPrint("Touch Collision started");
 
           startHapticFeedback();
-          
+
           setState(() {
-            hasCollided=true;
+            hasCollided = true;
           });
         }
-      }
-      else{
-
-        if(hasCollided==true){
+      } else {
+        if (hasCollided == true) {
           // collision ended
           debugPrint("Touch Collision ended");
-          
+
           endHapticFeedback();
 
           setState(() {
-              hasCollided=false;
+            hasCollided = false;
           });
         }
         // debugPrint("No Touch Collision.");
@@ -619,71 +630,65 @@ class HomeScreenState extends State<HomeScreen>{
     }
   }
 
-  void startHapticFeedback() async{
-
-    if(kIsWeb){
+  void startHapticFeedback() async {
+    if (kIsWeb) {
       // different handler for web
       // showSnackBar("web");
       // off,on,off
-      Vibration.vibrate(pattern:[20,100], repeat: 0);  // short fast
+      Vibration.vibrate(pattern: [20, 100], repeat: 0); // short fast
       // Vibration.vibrate(pattern:[100, 200, 400],repeat: 0);   // slow
-    }
-    else{
+    } else {
       // showSnackBar("mobile");
-      if (await Vibration.hasVibrator()==true) {
+      if (await Vibration.hasVibrator() == true) {
         // off,on,off
-        Vibration.vibrate(pattern:[20,100], repeat: 0);  // short fast
-        // Vibration.vibrate(pattern:[100, 200, 400],repeat: 0);   // slow     
+        Vibration.vibrate(pattern: [20, 100], repeat: 0); // short fast
+        // Vibration.vibrate(pattern:[100, 200, 400],repeat: 0);   // slow
       }
     }
-  
   }
 
-  void endHapticFeedback() async{
-    if(kIsWeb){
+  void endHapticFeedback() async {
+    if (kIsWeb) {
       // different handler for web
       Vibration.cancel();
-    }
-    else{
-      if (await Vibration.hasVibrator()==true) {
+    } else {
+      if (await Vibration.hasVibrator() == true) {
         Vibration.cancel();
       }
     }
   }
 
-  void detectTouchStart(DragStartDetails details){
+  void detectTouchStart(DragStartDetails details) {
     // to detect touch start on screen to start the send_touch scheduler
-    
+
     // debugPrint(details.localPosition);
 
     // update our touch point on our screen
     setState(() {
       touchX = details.localPosition.dx;
       touchY = details.localPosition.dy;
-      isTouching=true; // show it
+      isTouching = true; // show it
     });
 
-
     // detect Collision for haptic feedback
     detectTouchCollision(
-      x:details.localPosition.dx,
-      y:details.localPosition.dy,
+      x: details.localPosition.dx,
+      y: details.localPosition.dy,
     );
-  
-    
+
     // start send Touch Scheduler
-    if(currRoomId.isNotEmpty){  // only send touch if we are part of a room
-      SchedulerBinding.instance.addPostFrameCallback((_) { 
+    if (currRoomId.isNotEmpty) {
+      // only send touch if we are part of a room
+      SchedulerBinding.instance.addPostFrameCallback((_) {
         startSendTouch();
       });
-    }
-    else{
+    } else {
       // we are not joined in a room
-      // so can't send_touch 
+      // so can't send_touch
     }
-    
   }
-  void detectTouchUpdate(DragUpdateDetails details){
+
+  void detectTouchUpdate(DragUpdateDetails details) {
     // to update touchpoint
 
     // debugPrint(details.localPosition);
@@ -696,163 +701,143 @@ class HomeScreenState extends State<HomeScreen>{
 
     // detect Collision
     detectTouchCollision(
-      x:details.localPosition.dx,
-      y:details.localPosition.dy,
+      x: details.localPosition.dx,
+      y: details.localPosition.dy,
     );
-    
   }
 
-  
-
-  void detectTouchEnd(DragEndDetails details){
+  void detectTouchEnd(DragEndDetails details) {
     // triggered on touch end
 
     // update our touch point on our screen
     setState(() {
       touchX = 0;
       touchY = 0;
-      isTouching=false; // hide it
+      isTouching = false; // hide it
     });
-    
+
     // detect Collision end
     detectTouchCollision(
-      x:-1000,
-      y:-1000,
+      x: -1000,
+      y: -1000,
     );
 
-
     // stop send Touch Scheduler and send stop touch message
-    if(currRoomId.isNotEmpty){
-      SchedulerBinding.instance.addPostFrameCallback((_) { 
+    if (currRoomId.isNotEmpty) {
+      SchedulerBinding.instance.addPostFrameCallback((_) {
         stopSendTouch();
       });
-    }
-    else{
+    } else {
       // can't send_touch end to server cuz we are not in a room
     }
   }
 
-  Widget mainSection(){
+  Widget mainSection() {
     // this is the main touch area
 
-    
-    return Expanded(  // expanded for it to take up all the available space
+    return Expanded(
+      // expanded for it to take up all the available space
 
       child: GestureDetector(
-        onPanStart:(details){
-          detectTouchStart(details);  // on touch start
+        onPanStart: (details) {
+          detectTouchStart(details); // on touch start
         },
-        onPanUpdate:(details){
-          detectTouchUpdate(details);  // on touch update
+        onPanUpdate: (details) {
+          detectTouchUpdate(details); // on touch update
         },
-        onPanEnd:(details){
-          detectTouchEnd(details);  // on touch end
+        onPanEnd: (details) {
+          detectTouchEnd(details); // on touch end
         },
-        child:Container(
+        child: Container(
           decoration: BoxDecoration(
-            color:Colors.grey.shade900,
+            color: Colors.grey.shade900,
             borderRadius: BorderRadius.circular(50),
           ),
           clipBehavior: Clip.hardEdge,
-          child:Stack(
-            clipBehavior: Clip.hardEdge,
-            children: [
-              
-              // render received touch points
-              ...othersTouchPoints.values.map<Widget>((map){
-                  return buildTouchPoint(
-                visible:true,
-                x:map['position']['x'],
-                y:map['position']['y'],
-                size:touchsize,
-                color:colorFromHex(map['color'])!,     
+          child: Stack(clipBehavior: Clip.hardEdge, children: [
+            // render received touch points
+            ...othersTouchPoints.values.map<Widget>((map) {
+              return buildTouchPoint(
+                visible: true,
+                x: map['position']['x'],
+                y: map['position']['y'],
+                size: touchsize,
+                color: colorFromHex(map['color'])!,
               );
-              }).toList(),
-              
-
-              // our touch point
-              buildTouchPoint(
-                visible:isTouching,
-                x:touchX,
-                y:touchY,
-                size:touchsize,
-                color:colorFromHex(profileColor)!,    
-              ),
- 
+            }).toList(),
+
+            // our touch point
+            buildTouchPoint(
+              visible: isTouching,
+              x: touchX,
+              y: touchY,
+              size: touchsize,
+              color: colorFromHex(profileColor)!,
+            ),
           ]),
         ),
       ),
     );
-
   }
 
-  
   @override
-  Widget build(BuildContext context){
-    width = MediaQuery.of(context).size.width;  // to get screen width
-    height = MediaQuery.of(context).size.height;  // to get screen height
+  Widget build(BuildContext context) {
+    width = MediaQuery.of(context).size.width; // to get screen width
+    height = MediaQuery.of(context).size.height; // to get screen height
 
     return Scaffold(
-    
-      body:Stack(
-        alignment: Alignment.center,
-        children: [
+      body: Stack(alignment: Alignment.center, children: [
+        //outermost background
+        Container(
+          color: const Color.fromARGB(255, 14, 14, 14),
+        ),
 
-          //outermost background
-          Container(
-            color:const Color.fromARGB(255, 14, 14, 14),
+        //  header and main touch area
+        Padding(
+          padding: EdgeInsets.all(outsidepadding),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment
+                .stretch, // mainSection expands in height because of this
+            children: [
+              header(),
+              mainSection(),
+            ],
           ),
+        ),
 
-          //  header and main touch area
-          Padding(
-            padding: EdgeInsets.all(outsidepadding),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch, // mainSection expands in height because of this
-              children: [
-                header(),
-                mainSection(),
-              ],
+        //floating Room menu
+        Positioned(
+          top: 100,
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 100),
+            height: containerHeight,
+            width: containerWidth,
+            clipBehavior: Clip.hardEdge,
+            curve: Curves.easeIn,
+            decoration: BoxDecoration(
+              color: const Color.fromARGB(255, 67, 67, 67),
+              borderRadius: BorderRadius.circular(20),
             ),
-          ),
-
-          //floating Room menu
-          Positioned(
-            top:100,
-            child: AnimatedContainer(
-              duration:const Duration(milliseconds: 100),
-              height: containerHeight,
-              width: containerWidth,
-              clipBehavior: Clip.hardEdge,
-              curve: Curves.easeIn,
-              decoration:BoxDecoration(
-                color:const Color.fromARGB(255, 67, 67, 67),
-                borderRadius: BorderRadius.circular(20),
-              ),
-              child:ListView(
-                children: [
-
-                  Container(
-                    margin:const EdgeInsets.all(20)+const EdgeInsets.symmetric(horizontal: 40),
-                    child: TextButton(  // exit room button
-                      onPressed: (){},
-                      style:TextButton.styleFrom(
-                        backgroundColor:const Color.fromARGB(255, 239, 83, 80),
-                        foregroundColor:const Color.fromARGB(255, 255, 255, 255),        
-                        shape:RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(20)
-                        ),
-                      ),
-                      child:const Text("Exit Room"),
-                    ),
+            child: ListView(children: [
+              Container(
+                margin: const EdgeInsets.all(20) +
+                    const EdgeInsets.symmetric(horizontal: 40),
+                child: TextButton(
+                  // exit room button
+                  onPressed: () {},
+                  style: TextButton.styleFrom(
+                    backgroundColor: const Color.fromARGB(255, 239, 83, 80),
+                    foregroundColor: const Color.fromARGB(255, 255, 255, 255),
+                    shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(20)),
                   ),
-          
-              ]),
-             
-            ),
+                  child: const Text("Exit Room"),
+                ),
+              ),
+            ]),
           ),
-
+        ),
       ]),
-
     );
   }
-}
+}

client/lib/ws_server_connection_handler.dart

@@ -1,79 +1,145 @@
+import 'dart:convert';
+import 'dart:io';
+
 import 'package:web_socket_channel/web_socket_channel.dart';
 import 'package:web_socket_channel/status.dart' as status;
+import 'package:flutter/scheduler.dart';
+import "dart:async";
+import 'package:flutter/src/foundation/print.dart';
+
 
-class CustomWSChannel{
+
+class CustomWSChannel {
   /*
   created custom class for web socket handler
   with support for reconnect
   */
-  late WebSocketChannel channel;  // to store the websocketchannel
-  bool webSocketConnected=false;  // boolean flag to check if we are connected to the websocket
-  int reconnectAttempts=0;  // to keep track of how many times we have tried to reconnect
+  late WebSocketChannel channel; // to store the websocketchannel
+  bool isAlive =
+      false; // boolean flag to check if we are connected to the websocket
+  bool isConnected = false;
+  int reconnectAttempts =
+      0; // to keep track of how many times we have tried to reconnect
   late Uri serverUri;
-  int delay;  // to set amount of delay between reconnects
-  void Function(dynamic) onMessage; // function which is called everytime we receive an message from the server
-  void Function(String,dynamic) onErrorShowMessage; // triggered everytime an error occur
-  void Function() onConnect; // function which is called everytime we are connected to the server
-  
-
-  CustomWSChannel(serverUrl,{this.delay=5,required this.onConnect,required this.onMessage,required this.onErrorShowMessage}){
-    serverUri=Uri.parse(serverUrl);
+  int delay; // to set amount of delay between reconnects
+  int pingInterval; // pings to the server after every pingInterval time and if pong is not received close the socket
+  Timer pingScheduler=Timer(Duration.zero, () { });
+  void Function(dynamic)
+      onMessage; // function which is called everytime we receive an message from the server
+  void Function(String, dynamic)
+      onErrorShowMessage; // triggered everytime an error occur
+  void Function()
+      onConnect; // function which is called everytime we are connected to the server
+
+  CustomWSChannel(serverUrl,
+      {this.delay = 5,
+      this.pingInterval = 5000,
+      required this.onConnect,
+      required this.onMessage,
+      required this.onErrorShowMessage}) {
+    serverUri = Uri.parse(serverUrl);
     connect();
   }
 
+
   get sink => channel.sink;
-  get ready =>channel.ready;
-  
-  Future<bool> isConnected() async{
-    try{
-      await channel.ready;
-      return true;
-    } 
-    catch(e){
-      debugFn("we are not connected");
-      return false;
-    }
+  get ready => channel.ready;
+
+  // Future<bool> isConnected() async{
+  //   try{
+  //     await channel.ready;
+  //     return true;
+  //   }
+  //   catch(e){
+  //     debugFn("we are not connected");
+  //     return false;
+  //   }
+  // }
+  void ping() {
+    // send ping
+    // channel.
+    channel.sink.add(jsonEncode({"route": "get_pong"}));
   }
 
-  void onDone() async{
+  void handlepong() {
+    //
+    isAlive = true;
+    isConnected = true; 
+
+  }
+
+  void onDone() async {
+    isConnected = false; 
+    isAlive = false;
+    
+    debugPrint("onDone called");
+    pingScheduler.cancel();
+    await channel.sink.close();
     debugFn("Reconnecting in $delay seconds, attempt $reconnectAttempts ");
-    webSocketConnected=false;
+
     // channel = null;
-    channel.sink.close(status.goingAway); // close old connection
+
     await Future.delayed(Duration(seconds: delay));
     connect();
   }
-  void onError(error){
-    debugFn("Error while connecting.",e:error);
+
+  void onError(error) {
+    debugFn("Error while connecting.", e: error);
     reconnectAttempts += 1;
   }
 
-  void connect() async{
-      
-    try{
-      channel=WebSocketChannel.connect(
-        serverUri
-      );
+  void connect() async {
+    final Timer connectTimeout;
+    try {
+      channel = WebSocketChannel.connect(serverUri);
+
+      channel.stream.listen(onMessage, onDone: onDone, onError: onError);
+      // channel.stream.listen(onMessage, onError:onError);
+
+      connectTimeout = Timer(const Duration(seconds: 5),(){
+
+      debugPrint('connectTimeout');
+        channel.sink.close();
+        // channel.
+        // onDone();
+      });
       
-      channel.stream.listen(onMessage, onDone:onDone, onError:onError);
-    // channel.stream.listen(onMessage, onError:onError);
+      debugPrint('before channel.ready');
       await channel.ready;
-      onConnect();
-    }
-    catch(e){
-      debugFn("can't connect to the server",e:e);
+      debugPrint('after channel.ready');
+      
+      connectTimeout.cancel();
+
+      // await channel.sink.done;
+      // await channel.stream.drain();
+      // channel.stream.
+
+      debugPrint('Reconnected successfully');
+      
+      // isAlive = true;
+      // isConnected = true; 
+
+      // onConnect();
+      // pingScheduler =
+      //   Timer.periodic(Duration(milliseconds: pingInterval), (timer) async {
+      //     if(isAlive==false)  return onDone();
+          
+      //     ping();
+      //     // set isAlive False
+      //     isAlive = false;
+      
+      // });
+    } catch (e) {
+      debugFn("can't connect to the server", e: e);
     }
     
-    
   }
 
-
-  void debugFn(String s,{e=""}){
+  void debugFn(String s, {e = ""}) {
     // print("space");
     // print("Custom Message:"+s);
     // print("Custom Error:"+e.toString());
 
-    onErrorShowMessage(s,e);
-    
-  } 
-}
+    onErrorShowMessage(s, e);
+  }
+}

client/pubspec.yaml

@@ -15,6 +15,7 @@ dependencies:
   shared_preferences: ^2.2.2
   vibration: ^1.8.3
   web_socket_channel: ^2.4.0
+  web_socket_client: ^0.1.0
 
 dev_dependencies:
   flutter_test: