Add reconnection in dashboard

web/ipc/client.py

@@ -1,4 +1,4 @@
-import websockets, json
+import websockets, json, asyncio
 from uuid import uuid4
 
 class IPCClient:
@@ -17,13 +17,23 @@ class IPCClient:
         self.callback = callback
         self.id = uuid4()
 
-    async def connect(self):
-        self.websocket = await websockets.connect(f"ws://{self.host}:{self.port}", extra_headers={"Client-Id": str(self.id)})
-        await self.start_receiver()
+    async def connect_and_reconnect(self):
+        while True:
+            await self.connect()
+            print("Reconnect in next 10s!")
+            await asyncio.sleep(10)
 
+    async def connect(self):
+        try:
+            self.websocket = await websockets.connect(f"ws://{self.host}:{self.port}", extra_headers={"Client-Id": str(self.id)})
+            await self.start_receiver()
+        except:
+            pass
+            
     async def send(self, message, user):
         if not self.websocket:
-            await self.connect()
+            return
+        
         data = json.loads(message)
 
         payload = {
@@ -34,6 +44,7 @@ class IPCClient:
         await self.websocket.send(json.dumps(payload))
 
     async def receive(self):
+        print("Connected ipc server!")
         async for message in self.websocket:
             if self.callback:
                 data = json.loads(message)

web/static/css/main.css

@@ -516,17 +516,15 @@ a {
     position: absolute;
     right: 0;
     background-color: rgb(37, 37, 37);
-    width: 350px;
-    max-width: 400px;
+    width: 0px;
     height: 100%;
     overflow: hidden;
-    padding: 1.5rem 1rem;
-    transform: translateX(100%);
     transition: all .5s ease-in-out;
 }
 
 .users-bar.active {
-    transform: translateX(0);
+    width: 350px;
+    padding: 1.5rem 1rem;
 }
 
 .users-bar .info {

web/static/js/objects.js

@@ -225,7 +225,7 @@ class Track {
 
 class Player {
     constructor(userId) {
-        this.socket = new Socket('http://127.0.0.1:5000');
+        this.socket = new Socket(`http://${window.location.hostname}:${window.location.port}`);
         this.socket.connect(this);
         this.socket.addMessageListener((msg) => this.handleMessage(msg));
         this.timer = new Timer(() => this.updateTime(), 1000);

web/webapp.py

@@ -28,7 +28,7 @@ USERS = {}
 def start_ipc_client(loop):
     client = IPCClient(secret_key=app.secret_key)
     asyncio.set_event_loop(loop)
-    loop.run_until_complete(client.connect())
+    loop.run_until_complete(client.connect_and_reconnect())
 
 def create_ipc_client():
     loop = asyncio.new_event_loop()