Process messages on the client

Ooui/Client.js

@@ -2,15 +2,96 @@
 // Create WebSocket connection.
 const socket = new WebSocket ("ws://localhost:8080" + rootElementPath, "ooui-1.0");
 
-console.log("Socket created");
+console.log("WebSocket created");
+
+const nodes = {}
+
+function getNode (id) {
+    switch (id) {
+        case "window": return window;
+        case "document": return document;
+        case "document.body": return document.body;
+        default: return nodes[id];
+    }
+}
+
+function msgCreate (m) {
+    const id = m.id;
+    const tagName = m.v;
+    const node = tagName === "text" ?
+        document.createTextNode ("") :
+        document.createElement (tagName);
+    if (tagName !== "text")
+        node.id = id;
+    nodes[id] = node;
+    console.log ("Created Node", node);
+}
+
+function msgSet (m) {
+    const id = m.id;
+    const node = getNode (id);
+    if (!node) {
+        console.error ("Unknown Node Id", m);
+        return;
+    }
+    node[m.k] = m.v;
+    console.log ("Set Property", node, m.k, m.v);
+}
+
+function msgCall (m) {
+    const id = m.id;
+    const node = getNode (id);
+    // \u2999
+    if (!node) {
+        console.error ("Unknown Node Id", m);
+        return;
+    }
+    const f = node[m.k];
+    console.log ("Call", node, f, m.v);
+    f.apply (node, m.v);
+}
+
+function processMessage (m) {
+    switch (m.m) {
+        case "Create":
+            msgCreate (m);
+            break;
+        case "Set":
+            msgSet (m);
+            break;
+        case "Call":
+            msgCall (m);
+            break;
+        default:
+            console.error ("Unknown message type", m.m, m);
+    }
+}
+
+function fixupValue (v) {
+    if (Array.isArray (v)) {
+        for (x in v) {
+            v[x] = fixupValue (v[x]);
+        }
+        return v;
+    }
+    else if (typeof v === 'string' || v instanceof String) {
+        if ((v.length === 9) && (v[0] === "\u2999")) {
+            return getNode (v.substr(1));
+        }
+    }
+    return v;
+}
 
 // Connection opened
 socket.addEventListener('open', function (event) {
-    console.log("Socket opened");
+    console.log("WebSocket opened");
     socket.send('Hello Server!');
 });
 
 // Listen for messages
 socket.addEventListener('message', function (event) {
-    console.log('Message from server', JSON.parse (event.data));
+    const message = JSON.parse (event.data);
+    message.v = fixupValue (message.v);
+    console.log('Message from server', message);
+    processMessage (message);
 });

Ooui/Mapping.cs

@@ -16,7 +16,7 @@ namespace Ooui
 
         public string GetMemberPath (string propertyName)
         {
-            return propertyName;
+            return propertyName.ToLowerInvariant ();
         }
 
         static readonly Dictionary<string, Mapping> mappings =

Ooui/Message.cs

@@ -21,31 +21,7 @@ namespace Ooui
         public string Key = "";
 
         [JsonProperty("v")]
-        public string Value = "";
-
-        public void SetValue (object value)
-        {
-            switch (value) {
-                case null:
-                    Value = "null";
-                    break;
-                case String s:
-                    Value = EncodeString (s);
-                    break;
-                default:
-                    Value = JsonConvert.SerializeObject (value);
-                    break;
-            }
-        }
-
-        public static string EncodeString (string s)
-        {
-            return s;
-        }
-        public static string DecodeString (string s)
-        {
-            return s;
-        }
+        public object Value = "";
     }
 
     public enum MessageType

Ooui/Node.cs

@@ -105,13 +105,12 @@ namespace Ooui
 
         protected void LogSet (string propertyName, object value)
         {
-            var m = new Message {
+            Log (new Message {
                 MessageType = MessageType.Set,
                 TargetId = Id,
                 Key = Mapping.GetMemberPath (propertyName),
-            };
-            m.SetValue (value);
-            Log (m);
+                Value = value,
+            });
         }
 
         protected bool SetProperty<T> (ref T backingStore, T newValue, [System.Runtime.CompilerServices.CallerMemberName] string propertyName = "")

Ooui/Server.cs

@@ -188,13 +188,25 @@ namespace Ooui
             // Communicate!
             //
             try {
+                //
+                // Send message history, start sending updates, and add it to the body
+                //
                 foreach (var m in element.AllMessages) {
                     if (webSocket.State == WebSocketState.Open) {
                         await SendMessageAsync (webSocket, m, token);
                     }
                 }
                 element.MessageLogged += onElementMessage;
+                await SendMessageAsync (webSocket, new Message {
+                    TargetId = "document.body",
+                    MessageType = MessageType.Call,
+                    Key = "appendChild",
+                    Value = new[] { "\u2999" + element.Id },
+                }, token);
 
+                //
+                // Listen for events
+                //
                 var receiveBuffer = new byte[1024];
 
                 while (webSocket.State == WebSocketState.Open && !token.IsCancellationRequested) {