commit 6249aafced0752c0061c2cd7d2c41a87b3a916c9
author Alex Perry <alex.perry96@gmail.com> Sat Feb 29 14:51:49 2020 -0800
committer Alex Perry <alex.perry96@gmail.com> Sun Mar 01 15:29:04 2020 -0800
tree 382d4c86da6a824fca9e5627f551ac58277f697b
parent 5427c9ae7dc5abc57ab8f4e431415476c9a025fc

Rework subscription on webapp.

ConfigHandler is more optional now.
Connection is treated as a service to be injected.

Change-Id: I7efea116fe7ebb895ffdc42aedfe0f1f7b05e874

aos/network/www/config_handler.ts

diff --git a/aos/network/www/config_handler.ts b/aos/network/www/config_handler.ts
index ae9896c..3d20f0d 100644
--- a/aos/network/www/config_handler.ts
+++ b/aos/network/www/config_handler.ts
@@ -1,13 +1,15 @@
 import {Configuration, Channel} from 'aos/configuration_generated';
 import {Connect} from 'aos/network/connect_generated';
+import {Connection} from './proxy';
 
 export class ConfigHandler {
   private readonly root_div = document.getElementById('config');
   private readonly tree_div;
+  private config: Configuration|null = null
 
-  constructor(
-      private readonly config: Configuration,
-      private readonly dataChannel: RTCDataChannel) {
+  constructor(private readonly connection: Connection) {
+    this.connection.addConfigHandler((config) => this.handleConfig(config));
+
     const show_button = document.createElement('button');
     show_button.addEventListener('click', () => this.toggleConfig());
     const show_text = document.createTextNode('Show/Hide Config');
@@ -18,6 +20,11 @@
     this.root_div.appendChild(this.tree_div);
   }
 
+  handleConfig(config: Configuration) {
+    this.config = config;
+    this.printConfig();
+  }
+
   printConfig() {
     for (const i = 0; i < this.config.channelsLength(); i++) {
       const channel_div = document.createElement('div');
@@ -70,9 +77,7 @@
     Connect.addChannelsToTransfer(builder, channelsfb);
     const connect = Connect.endConnect(builder);
     builder.finish(connect);
-    const array = builder.asUint8Array();
-    console.log('connect', array);
-    this.dataChannel.send(array.buffer.slice(array.byteOffset));
+    this.connection.sendConnectMessage(builder);
   }
 
   toggleConfig() {

aos/network/www/proxy.ts

diff --git a/aos/network/www/proxy.ts b/aos/network/www/proxy.ts
index 704fc85..9eb0bb6 100644
--- a/aos/network/www/proxy.ts
+++ b/aos/network/www/proxy.ts
@@ -49,8 +49,11 @@
   private rtcPeerConnection: RTCPeerConnection|null = null;
   private dataChannel: DataChannel|null = null;
   private webSocketUrl: string;
-  private configHandler: ConfigHandler|null = null;
-  private config: Configuration|null = null;
+
+  private configInternal: Configuration|null = null;
+  // A set of functions that accept the config to handle.
+  private readonly configHandlers = new Set<(config: Configuration) => void>();
+
   private readonly handlerFuncs = new Map<string, (data: Uint8Array) => void>();
   private readonly handlers = new Set<Handler>();
 
@@ -59,6 +62,10 @@
     this.webSocketUrl = `ws://${server}/ws`;
   }
 
+  addConfigHandler(handler: (config: Configuration) => void): void {
+    this.configHandlers.add(handler);
+  }
+
   addHandler(id: string, handler: (data: Uint8Array) => void): void {
     this.handlerFuncs.set(id, handler);
   }
@@ -72,17 +79,17 @@
         'message', (e) => this.onWebSocketMessage(e));
   }
 
+  get config() {
+    return this.config_internal;
+  }
+
   // Handle messages on the DataChannel. Handles the Configuration message as
   // all other messages are sent on specific DataChannels.
   onDataChannelMessage(e: MessageEvent): void {
     const fbBuffer = new flatbuffers.ByteBuffer(new Uint8Array(e.data));
-    // TODO(alex): handle config updates if/when required
-    if (!this.configHandler) {
-      const config = Configuration.getRootAsConfiguration(fbBuffer);
-      this.config = config;
-      this.configHandler = new ConfigHandler(config, this.dataChannel);
-      this.configHandler.printConfig();
-      return;
+    this.configInternal = Configuration.getRootAsConfiguration(fbBuffer);
+    for (handler of this.configHandlers) {
+      handler(this.configInternal);
     }
   }
 
@@ -174,4 +181,13 @@
         break;
     }
   }
+
+  /**
+   * Subscribes to messages.
+   * @param a Finished flatbuffer.Builder containing a Connect message to send.
+   */
+  sendConnectMessage(builder: any) {
+    const array = builder.assUint8Array();
+    this.dataChannel.send(array.buffer.slice(array.byteOffset));
+  }
 }

y2020/www/main.ts

diff --git a/y2020/www/main.ts b/y2020/www/main.ts
index e4c0f10..46a0e8a 100644
--- a/y2020/www/main.ts
+++ b/y2020/www/main.ts
@@ -1,10 +1,12 @@
 import {Connection} from 'aos/network/www/proxy';
 
 import {ImageHandler} from './image_handler';
-import {FieldHandler} from './field_handler';
+import {ConfigHandler} from 'aos/network/www/config_handler';
 
 const conn = new Connection();
 
+const configPrinter = new ConfigHandler(conn);
+
 conn.connect();
 
 const iHandler = new ImageHandler();