diff --git a/web/collector/Light9CollectorUi.ts b/web/collector/Light9CollectorUi.ts
--- a/web/collector/Light9CollectorUi.ts
+++ b/web/collector/Light9CollectorUi.ts
@@ -10,7 +10,7 @@ import { SyncedGraph } from "../SyncedGr
 import { Light9CollectorDevice } from "./Light9CollectorDevice";
 export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
 export { Light9CollectorDevice };
-
+import { avro } from "../lib/avro";
 debug.enable("*");
 const log = debug("collector");
 
@@ -34,15 +34,21 @@ export class Light9CollectorUi extends L
       this.graph.runHandler(this.findDevices.bind(this), "findDevices");
     });
 
-    const ws = new ReconnectingWebSocket("ws://localhost:8200/service/collector/updates");
-    ws.addEventListener("message", (ev: any) => {
-      const outputAttrsSet = JSON.parse(ev.data).outputAttrsSet;
+    this.setupListener();
+  }
+
+  async setupListener() {
+    const CollectorUpdateType = await avro.loadType("CollectorUpdate");
+    const ws = new ReconnectingWebSocket(`ws://${location.host}/service/collector/updates`);
+    ws.addEventListener("message", async (ev: ReconnectingWebSocket.MessageEvent) => {
+      const jsMsg = await avro.parseBlob(CollectorUpdateType, ev.data);
+
+      const outputAttrsSet = jsMsg.OutputAttrsSet;
       if (outputAttrsSet) {
         this.updateDev(outputAttrsSet.dev, outputAttrsSet.attrs);
       }
     });
   }
-
   findDevices(patch?: Patch) {
     const U = this.graph.U();