Show active workers in the debug mode

pkg/coordinator/handlers.go

@@ -233,7 +233,7 @@ func (s *Server) WS(w http.ResponseWriter, r *http.Request) {
 
 	bc.Send(cws.WSPacket{
 		ID:   "init",
-		Data: createInitPackage(wc.StunTurnServer, s.library.GetAll()),
+		Data: createInitPackage(wc.Id, wc.StunTurnServer, s.library.GetAll()),
 	}, nil)
 
 	// If peerconnection is done (client.Done is signalled), we close peerconnection
@@ -360,15 +360,14 @@ func (s *Server) cleanWorker(wc *WorkerClient, workerID string) {
 	wc.Close()
 }
 
-// createInitPackage returns serverhost + game list in encoded wspacket format
+// createInitPackage returns xid + serverhost + game list in encoded wspacket format
 // This package will be sent to initialize
-func createInitPackage(stunturn string, games []games.GameMetadata) string {
+func createInitPackage(id xid.ID, stunturn string, games []games.GameMetadata) string {
 	var gameName []string
 	for _, game := range games {
 		gameName = append(gameName, game.Name)
 	}
-
-	initPackage := append([]string{stunturn}, gameName...)
+	initPackage := append([]string{id.String(), stunturn}, gameName...)
 	encodedList, _ := json.Marshal(initPackage)
 	return string(encodedList)
 }

web/css/ui.css

@@ -157,6 +157,12 @@
     background-color: #e7e7e7;
 }
 
+.server-list div.active::before {
+    content: '>';
+    position: absolute;
+    left: 4px;
+}
+
 .server-list .server-list__header {
     font-weight: bold;
     padding: 1em 1em .6em 1em;

web/js/controller.js

@@ -428,6 +428,7 @@
     });
 
     event.sub(MEDIA_STREAM_INITIALIZED, (data) => {
+        workerManager.whoami(data.xid);
         rtcp.start(data.stunturn);
         gameList.set(data.games);
     });
@@ -463,4 +464,4 @@
 
     // initial app state
     setState(app.state.eden);
-})(document, event, env, gameList, input, KEY, log, message, recording, room, rtcp, settings, socket, stats, stream, utils);
+})(document, event, env, gameList, input, KEY, log, message, recording, room, rtcp, settings, socket, stats, stream, utils, workerManager);

web/js/network/socket.js

@@ -56,10 +56,10 @@ const socket = (() => {
             switch (message) {
                 case 'init':
                     // TODO: Read from struct
-                    // init package has 2 part [stunturn, game1, game2, game3 ...]
-                    // const [stunturn, ...games] = data;
-                    let serverData = JSON.parse(data.data);
-                    event.pub(MEDIA_STREAM_INITIALIZED, {stunturn: serverData.shift(), games: serverData});
+                    // init package has 3 part [xid, stunturn, game1, game2, game3 ...]
+                    const [xid, stunturn, ...games] = JSON.parse(data.data);
+                    // let serverData = data.data);
+                    event.pub(MEDIA_STREAM_INITIALIZED, {xid: xid, stunturn: stunturn, games: games});
                     break;
                 case 'offer':
                     // this is offer from worker

web/js/workerManager.js

@@ -40,10 +40,16 @@ const workerManager = (() => {
         },
         fields = Object.keys(list);
 
+    let state = {
+        lastId: null,
+        workers: [],
+    }
+
     const onNewData = (dat = {servers: []}) => {
         panel.setLoad(false);
         index.r();
-        _render(dat?.servers);
+        state.workers = dat?.servers || [];
+        _render(state.workers);
     }
 
     function _render(servers = []) {
@@ -63,11 +69,16 @@ const workerManager = (() => {
         });
         content.append(header)
 
-        const renderRow = (server) => (row) => fields.forEach(field => {
-            const val = server.hasOwnProperty(field) ? server[field] : '';
-            const renderer = list[field]?.renderer;
-            row.append(gui.create('span', (f) => f.append(renderer ? renderer(server) : val)));
-        })
+        const renderRow = (server) => (row) => {
+            if (server?.id && state.lastId && state.lastId === server?.xid) {
+                row.classList.add('active');
+            }
+            return fields.forEach(field => {
+                const val = server.hasOwnProperty(field) ? server[field] : '';
+                const renderer = list[field]?.renderer;
+                row.append(gui.create('span', (f) => f.append(renderer ? renderer(server) : val)));
+            })
+        }
         servers.forEach(server => content.append(gui.create('div', renderRow(server))))
         panel.setContent(content);
     }
@@ -112,9 +123,15 @@ const workerManager = (() => {
         }))
     };
 
+    const whoami = (id) => {
+        state.lastId = id;
+        _render(state.workers);
+    }
+
     event.sub(GET_SERVER_LIST, onNewData);
 
     return {
         checkLatencies,
+        whoami,
     }
 })(ajax, document, event, gui, log, socket, utils);