Process messages on the client
This commit is contained in:
parent
5daecdd445
commit
7082e425b7
|
@ -2,15 +2,96 @@
|
||||||
// Create WebSocket connection.
|
// Create WebSocket connection.
|
||||||
const socket = new WebSocket ("ws://localhost:8080" + rootElementPath, "ooui-1.0");
|
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
|
// Connection opened
|
||||||
socket.addEventListener('open', function (event) {
|
socket.addEventListener('open', function (event) {
|
||||||
console.log("Socket opened");
|
console.log("WebSocket opened");
|
||||||
socket.send('Hello Server!');
|
socket.send('Hello Server!');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Listen for messages
|
// Listen for messages
|
||||||
socket.addEventListener('message', function (event) {
|
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);
|
||||||
});
|
});
|
||||||
|
|
|
@ -16,7 +16,7 @@ namespace Ooui
|
||||||
|
|
||||||
public string GetMemberPath (string propertyName)
|
public string GetMemberPath (string propertyName)
|
||||||
{
|
{
|
||||||
return propertyName;
|
return propertyName.ToLowerInvariant ();
|
||||||
}
|
}
|
||||||
|
|
||||||
static readonly Dictionary<string, Mapping> mappings =
|
static readonly Dictionary<string, Mapping> mappings =
|
||||||
|
|
|
@ -21,31 +21,7 @@ namespace Ooui
|
||||||
public string Key = "";
|
public string Key = "";
|
||||||
|
|
||||||
[JsonProperty("v")]
|
[JsonProperty("v")]
|
||||||
public string Value = "";
|
public object 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 enum MessageType
|
public enum MessageType
|
||||||
|
|
|
@ -105,13 +105,12 @@ namespace Ooui
|
||||||
|
|
||||||
protected void LogSet (string propertyName, object value)
|
protected void LogSet (string propertyName, object value)
|
||||||
{
|
{
|
||||||
var m = new Message {
|
Log (new Message {
|
||||||
MessageType = MessageType.Set,
|
MessageType = MessageType.Set,
|
||||||
TargetId = Id,
|
TargetId = Id,
|
||||||
Key = Mapping.GetMemberPath (propertyName),
|
Key = Mapping.GetMemberPath (propertyName),
|
||||||
};
|
Value = value,
|
||||||
m.SetValue (value);
|
});
|
||||||
Log (m);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected bool SetProperty<T> (ref T backingStore, T newValue, [System.Runtime.CompilerServices.CallerMemberName] string propertyName = "")
|
protected bool SetProperty<T> (ref T backingStore, T newValue, [System.Runtime.CompilerServices.CallerMemberName] string propertyName = "")
|
||||||
|
|
|
@ -188,13 +188,25 @@ namespace Ooui
|
||||||
// Communicate!
|
// Communicate!
|
||||||
//
|
//
|
||||||
try {
|
try {
|
||||||
|
//
|
||||||
|
// Send message history, start sending updates, and add it to the body
|
||||||
|
//
|
||||||
foreach (var m in element.AllMessages) {
|
foreach (var m in element.AllMessages) {
|
||||||
if (webSocket.State == WebSocketState.Open) {
|
if (webSocket.State == WebSocketState.Open) {
|
||||||
await SendMessageAsync (webSocket, m, token);
|
await SendMessageAsync (webSocket, m, token);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
element.MessageLogged += onElementMessage;
|
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];
|
var receiveBuffer = new byte[1024];
|
||||||
|
|
||||||
while (webSocket.State == WebSocketState.Open && !token.IsCancellationRequested) {
|
while (webSocket.State == WebSocketState.Open && !token.IsCancellationRequested) {
|
||||||
|
|
Loading…
Reference in New Issue