Add client side support.

dlgr/griduniverse/experiment.py

@@ -1649,6 +1649,7 @@ def game_loop(self):
 class Griduniverse(Experiment):
     """Define the structure of the experiment."""
 
+    channel = "griduniverse_ctrl"
     state_count = 0
     replay_path = "/grid"
 
@@ -1839,6 +1840,10 @@ def parse_message(self, raw_message):
             message = json.loads(body)
             return channel, message
 
+    def publish(self, msg):
+        """Publish a message to all griduniverse clients"""
+        self.redis_conn.publish(self.channel, json.dumps(msg))
+
     def handle_connect(self, msg):
         player_id = msg["player_id"]
         if self.config.get("replay", False):
@@ -1860,6 +1865,17 @@ def handle_connect(self, msg):
             game.node_by_player_id[player_id] = node.id
             self.session.add(node)
             self.session.commit()
+            # Send a broadcast message
+            self.publish(
+                "griduniverse",
+                {
+                    "type": "player_added",
+                    "player_id": player_id,
+                    "game": network.id,
+                    "broadcast_channel": game.broadcast_channel,
+                    "control_channel": game.control_channel,
+                },
+            )
             logger.info("Spawning player on the grid...")
             # We use the current node id modulo the number of colours
             # to pick the user's colour. This ensures that players are

dlgr/griduniverse/static/scripts/demo.js

@@ -887,6 +887,15 @@
     );
   }
 
+  function onPlayerAdded(msg) {
+    var newPlayerId = msg.player_id,
+      ego = players.ego();
+
+    if (ego && newPlayerId === ego.id) {
+      socket.addGameChannels(msg.broadcast_channel, msg.control_channel);
+    }
+  }
+
   function onMoveRejected(msg) {
     var offendingPlayerId = msg.player_id,
       ego = players.ego();
@@ -1288,6 +1297,7 @@
         stop: gameOverHandler(player_id),
         wall_built: addWall,
         move_rejection: onMoveRejected,
+        player_added: onPlayerAdded,
       },
     };
     const socket = new socketlib.GUSocket(socketSettings);
@@ -1297,7 +1307,7 @@
         type: "connect",
         player_id: isSpectator ? "spectator" : player_id,
       };
-      socket.send(data);
+      socket.sendGlobal(data);
     });
 
     players.ego_id = player_id;

dlgr/griduniverse/static/scripts/gusocket.js

@@ -9,17 +9,30 @@ export class GUSocket {
   constructor(settings) {
     const tolerance =
       settings.lagTolerance === undefined ? 0.1 : settings.lagTolerance;
-
-    this.broadcastChannel = settings.broadcast;
-    this.controlChannel = settings.control;
+    this.globalBroadcastChannel = settings.broadcast;
+    this.globalControlChannel = settings.control;
     this.callbackMap = settings.callbackMap;
     this.socket = this._makeSocket(
       settings.endpoint,
-      this.broadcastChannel,
+      this.globalBroadcastChannel,
       tolerance,
     );
 
     this.socket.onmessage = (event) => {
+      this._globalDispatch(event);
+    };
+  }
+
+  addGameChannels(broadcastChannel, controlChannel) {
+    this.broadcastChannel = broadcastChannel;
+    this.controlChannel = controlChannel;
+    this.gameSocket = this._makeSocket(
+      settings.endpoint,
+      this.broadcastChannel,
+      tolerance,
+    );
+
+    this.gameSocket.onmessage = (event) => {
       this._dispatch(event);
     };
   }
@@ -33,6 +46,13 @@ export class GUSocket {
     return isOpen;
   }
 
+  sendGlobal(data) {
+    const msg = JSON.stringify(data);
+    const channel = this.globalControlChannel;
+    console.log(`Sending message to the ${channel} channel: ${msg}`);
+    this.socket.send(`${channel}:${msg}`);
+  }
+
   send(data) {
     const msg = JSON.stringify(data);
     const channel = this.controlChannel;
@@ -58,6 +78,27 @@ export class GUSocket {
     return socket;
   }
 
+  _baseDispatch(event) {
+    const msg = JSON.parse(event.data.substring(marker.length));
+    const callback = this.callbackMap[msg.type];
+    if (callback !== undefined) {
+      callback(msg);
+    } else {
+      console.log(`Unrecognized message type ${msg.type} from backend.`);
+    }
+  }
+
+  _globalDispatch(event) {
+    const marker = `${this.globalBroadcastChannel}:`;
+    if (!event.data.startsWith(marker)) {
+      console.log(
+        `Message was not on channel ${this.globalBroadcastChannel}. Ignoring.`,
+      );
+      return;
+    }
+    _baseDispatch(event);
+  }
+
   _dispatch(event) {
     const marker = `${this.broadcastChannel}:`;
     if (!event.data.startsWith(marker)) {
@@ -66,12 +107,6 @@ export class GUSocket {
       );
       return;
     }
-    const msg = JSON.parse(event.data.substring(marker.length));
-    const callback = this.callbackMap[msg.type];
-    if (callback !== undefined) {
-      callback(msg);
-    } else {
-      console.log(`Unrecognized message type ${msg.type} from backend.`);
-    }
+    _baseDispatch(event);
   }
 }