added reconnecting to server ability and showing messages in snackbar

client/lib/HomeScreen.dart

@@ -7,6 +7,8 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'package:web_socket_channel/web_socket_channel.dart';
 import 'package:web_socket_channel/status.dart' as status;
 
+import 'ws_server_connection_handler.dart';
+
 import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 
 import 'package:flutter/foundation.dart' show kIsWeb; // to check of platform is web
@@ -36,7 +38,7 @@ class HomeScreen extends StatefulWidget{
 }
 
 class HomeScreenState extends State<HomeScreen>{
-  late WebSocketChannel channel;
+  late Custom_ws_channel channel;
   late double width,height;
   late SharedPreferences prefs;
   double containerHeight = 0,containerWidth=0;
@@ -70,10 +72,6 @@ class HomeScreenState extends State<HomeScreen>{
 
     // roomidList=["1","2"];
     // roomnameList=["room 1","room 2"];
-    getPreferences();
-    // setPreferences();
-    connectWebsocket();
-    setUsername();
 
     Map data={
       "user": {
@@ -91,6 +89,13 @@ class HomeScreenState extends State<HomeScreen>{
     othersTouchPoints[data['user']['id']]=data;
     
     // just for debugging
+    WidgetsBinding.instance.addPostFrameCallback((_){
+      getPreferences();
+    // setPreferences();
+      connectWebsocket();
+      setUsername();
+    });
+
     // WidgetsBinding.instance.addPostFrameCallback((_){
     //   ScaffoldMessenger.of(context).hideCurrentSnackBar();
     //     ScaffoldMessenger.of(context).showSnackBar(
@@ -149,132 +154,122 @@ class HomeScreenState extends State<HomeScreen>{
 
   void connectWebsocket() async{
 
-    try{
-      channel=WebSocketChannel.connect(Uri.parse(
-        String.fromEnvironment(
+    channel=Custom_ws_channel(
+        const String.fromEnvironment(
           "WS_SERVER_URL",
           defaultValue: "ws://localhost:3000"
-        )
-        
-      ));
+        ),
+        onMessage: response_handler,
+        // onMessage: (value){},
+        onErrorShowMessage:(msg,e){showSnackBar(msg);},
+      );
 
-      await channel.ready;  // after this we are connected to the server
-    }
-    catch(e){
-      print("Can't connect to the web socket server");
+    if(!await channel.isConnected()){
       return;
     }
-
-    // test connection
     Object data = {
       "route":"test_connection"
     };
     channel.sink.add(json.encode(data));
+    
+  }
 
-    channel.stream.listen((message) {
-      // message.get
-      Map map;
-      final String type;
-      try{
-        map = jsonDecode(message);
-      }
-      catch(e){
-        print("can't decode to json:\t"+message);
+  void response_handler(message) {
+    // message.get
+    Map map;
+    final String type;
+    try{
+      map = jsonDecode(message);
+    }
+    catch(e){
+      print("can't decode to json:\t"+message);
+      return;
+    }
+    
+    // if any error found do nothing
+    if(map.containsKey("error")){
+      print(map);
+      return;
+    }
+    
+    type = map["message"];
+
+    if(type=="test_connection_response"){
+      // testing connection
+      print("test_connection successful");
+
+    }
+    else if(type=="join_room_response"){
+      print(map);
+    }
+    else if(type=="set_username_response"){
+      print(map);
+      setState(() {
+        userid=map['user']['id'];
+      });
+    }
+    else if(type=="get_rooms_response"){
+      print(map);
+    }
+    else if(type=="room_update"){
+      print(map);
+      enterRoom(map);
+    }
+    else if(type=="send_vibration_response"){ // handles when we send_touch without being in a room
+      print(map);
+      showSnackBar(map['status']);
+      setState(() {
+        currRoomId="";
+        currRoomName="";
+      });
+    }
+    else if(type=="receive_touch"){
+      if(map['user']['id']==userid){
+        // ignore this
+        // print("self touch received. Ignore this");
         return;
       }
+    
+      // touch received to update othersTouchPoints
+      // print(map);
       
-      // if any error found do nothing
-      if(map.containsKey("error")){
-        print(map);
-        return;
-      }
+      if(map['type']=='enabled'){  // add touch point
       
-      type = map["message"];
-
-      if(type=="test_connection_response"){
-        // testing connection
-        print("test_connection successful");
-
-      }
-      else if(type=="join_room_response"){
-        print(map);
-      }
-      else if(type=="set_username_response"){
-        print(map);
+      // static width and height
+      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
+      
+      // rescale point according to the screen
+      map['position']['x']*=width-staticWidth;
+      map['position']['y']*=height-staticHeight;
+      
+      // print(map['position']['x'].toString());
+      // print(map['position']['y'].toString());
         setState(() {
-          userid=map['user']['id'];
+          othersTouchPoints[map['id']]=map;
         });
       }
-      else if(type=="get_rooms_response"){
-        print(map);
-      }
-      else if(type=="room_update"){
-        print(map);
-        enterRoom(map);
-      }
-      else if(type=="send_vibration_response"){ // handles when we send_touch without being in a room
-        print(map);
-        ScaffoldMessenger.of(context).hideCurrentSnackBar();
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content:Text(map['status'])
-          )
-        );
-      }
-      else if(type=="receive_touch"){
-        if(map['user']['id']==userid){
-          // ignore this
-          // print("self touch received. Ignore this");
-          return;
-        }
-      
-        // touch received to update othersTouchPoints
-        // print(map);
-        
-        if(map['type']=='enabled'){  // add touch point
-        
-        // static width and height
-        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
-        
-        // rescale point according to the screen
-        map['position']['x']*=width-staticWidth;
-        map['position']['y']*=height-staticHeight;
-        
-        // print(map['position']['x'].toString());
-        // print(map['position']['y'].toString());
-          setState(() {
-            othersTouchPoints[map['id']]=map;
-          });
-        }
-        else{// delete the touch point
-          setState(() {
-            othersTouchPoints.remove(map['id']);
-          });
-        }
-      
+      else{// delete the touch point
+        setState(() {
+          othersTouchPoints.remove(map['id']);
+        });
       }
-
-    });
     
-  }
+    }
 
+  }
 
   void setUsername() async{
     prefs = await SharedPreferences.getInstance();
-    try{
-      await channel.ready;
-    }
-    catch(e){
-      print("Can't connect to the web socket server");
+    if(!await channel.isConnected()){
       return;
     }
-
     // set username
     Map data = {
       "route": "set_username",
       "username": prefs.getString("username"),
     };
+    
     channel.sink.add(json.encode(data));
 
   }
@@ -305,11 +300,7 @@ class HomeScreenState extends State<HomeScreen>{
     // it is used to create a room in server
     Map data;
 
-    try{
-      await channel.ready;
-    }
-    catch(e){
-      print("Can't connect to the web socket server");
+    if(!await channel.isConnected()){
       return;
     }
 
@@ -455,11 +446,7 @@ class HomeScreenState extends State<HomeScreen>{
         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
 
-        try{
-          await channel.ready;
-        }
-        catch(e){
-          print("Can't connect to the web socket server");
+        if(!await channel.isConnected()){
           return;
         }
         data={
@@ -486,11 +473,7 @@ class HomeScreenState extends State<HomeScreen>{
     sendTouchScheduler.cancel();
     // send one last touch to tell touch is ended
     Map data;
-    try{
-      await channel.ready;
-    }
-    catch(e){
-      print("Can't connect to the web socket server");
+    if(!await channel.isConnected()){
       return;
     }
     data={
@@ -796,39 +779,45 @@ class HomeScreenState extends State<HomeScreen>{
                 color:const Color.fromARGB(255, 67, 67, 67),
                 borderRadius: BorderRadius.circular(40),
               ),
-              child: ListView.builder(
-                itemCount: roomidList.length,
-                itemBuilder: ((context, index){
-                  return Row(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    // crossAxisAlignment: CrossAxisAlignment.stretch,
-                    children: [
-                      Expanded(
-                        child: Container(
-                          padding:EdgeInsets.all(8),
-                          decoration: BoxDecoration(
-                            // border:Border(
-                            //   bottom:BorderSide(
-                            //     color:Color.fromRGBO(200, 200, 200, 1),
-                            //     width: 4
-                            //   ),
-                            // ),
-                          ),
-                          child: Text(
-                            roomnameList[index],
-                            textAlign:TextAlign.center,
-                            maxLines: 1,
-                            style:TextStyle(
-                              fontSize:20,
-                              overflow: TextOverflow.clip,
+              // child:TextFormField(
+              //   initialValue:currRoomId,
+              //   // decoration: InputDecoration(
+              //   //   val
+              //   // ),
+              // ),
+              // child: ListView.builder(
+              //   itemCount: roomidList.length,
+              //   itemBuilder: ((context, index){
+              //     return Row(
+              //       mainAxisAlignment: MainAxisAlignment.center,
+              //       // crossAxisAlignment: CrossAxisAlignment.stretch,
+              //       children: [
+              //         Expanded(
+              //           child: Container(
+              //             padding:EdgeInsets.all(8),
+              //             decoration: BoxDecoration(
+              //               // border:Border(
+              //               //   bottom:BorderSide(
+              //               //     color:Color.fromRGBO(200, 200, 200, 1),
+              //               //     width: 4
+              //               //   ),
+              //               // ),
+              //             ),
+              //             child: Text(
+              //               roomnameList[index],
+              //               textAlign:TextAlign.center,
+              //               maxLines: 1,
+              //               style:TextStyle(
+              //                 fontSize:20,
+              //                 overflow: TextOverflow.clip,
                               
-                            ),
-                            )
-                        ),
-                      ),
-                    ],
-                  );
-              })),
+              //               ),
+              //               )
+              //           ),
+              //         ),
+              //       ],
+              //     );
+              // })),
               curve: Curves.easeIn,
             ),
           ),

client/lib/ws_server_connection_handler.dart

@@ -0,0 +1,75 @@
+import 'package:web_socket_channel/web_socket_channel.dart';
+import 'package:web_socket_channel/status.dart' as status;
+
+class Custom_ws_channel{
+  late WebSocketChannel channel;
+  bool webSocketConnected=false;
+  int reconnectAttempts=0;
+  String serverUrl;
+  late Uri serverUri;
+  int delay;
+  void Function(dynamic) onMessage;
+  void Function(String,dynamic) onErrorShowMessage;
+  
+
+  Custom_ws_channel(this.serverUrl,{this.delay=5,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;
+    }
+  }
+
+  void onDone() async{
+    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);
+    reconnectAttempts += 1;
+  }
+
+  void connect() async{
+      
+    try{
+      channel=WebSocketChannel.connect(
+        serverUri
+      );
+      
+      channel.stream.listen(onMessage, onDone:onDone, onError:onError);
+    // channel.stream.listen(onMessage, onError:onError);
+      await channel.ready;
+      debugFn("connected");
+    }
+    catch(e){
+      debugFn("can't connect to the server",e:e);
+    }
+    
+    
+  }
+
+
+  void debugFn(String s,{e=""}){
+    // print("space");
+    // print("Custom Message:"+s);
+    // print("Custom Error:"+e.toString());
+
+    onErrorShowMessage(s,e);
+    
+  } 
+}