parent
c6979c1d63
commit
6fcbaa347e
|
@ -1,18 +1,39 @@
|
||||||
|
|
||||||
const debug = false;
|
const debug = false;
|
||||||
|
|
||||||
// Create WebSocket connection.
|
|
||||||
const socket = new WebSocket ("ws://" + document.location.host + rootElementPath, "ooui");
|
|
||||||
|
|
||||||
console.log("Web socket created");
|
|
||||||
|
|
||||||
const nodes = {};
|
const nodes = {};
|
||||||
|
|
||||||
|
let socket = null;
|
||||||
|
|
||||||
|
function ooui (rootElementPath) {
|
||||||
|
socket = new WebSocket ("ws://" + document.location.host + rootElementPath, "ooui");
|
||||||
|
|
||||||
|
socket.addEventListener('open', function (event) {
|
||||||
|
console.log("Web socket opened");
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.addEventListener('message', function (event) {
|
||||||
|
const messages = JSON.parse (event.data);
|
||||||
|
if (debug) console.log("Messages", messages);
|
||||||
|
if (Array.isArray (messages)) {
|
||||||
|
messages.forEach (function (m) {
|
||||||
|
// console.log('Raw value from server', m.v);
|
||||||
|
m.v = fixupValue (m.v);
|
||||||
|
processMessage (m);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("Web socket created");
|
||||||
|
}
|
||||||
|
|
||||||
function getNode (id) {
|
function getNode (id) {
|
||||||
switch (id) {
|
switch (id) {
|
||||||
case "window": return window;
|
case "window": return window;
|
||||||
case "document": return document;
|
case "document": return document;
|
||||||
case "document.body": return document.body;
|
case "document.body":
|
||||||
|
const bodyNode = document.getElementById ("ooui-body");
|
||||||
|
return bodyNode || document.body;
|
||||||
default: return nodes[id];
|
default: return nodes[id];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -115,19 +136,3 @@ function fixupValue (v) {
|
||||||
}
|
}
|
||||||
return v;
|
return v;
|
||||||
}
|
}
|
||||||
|
|
||||||
socket.addEventListener('open', function (event) {
|
|
||||||
console.log("Web socket opened");
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.addEventListener('message', function (event) {
|
|
||||||
const messages = JSON.parse (event.data);
|
|
||||||
if (debug) console.log("Messages", messages);
|
|
||||||
if (Array.isArray (messages)) {
|
|
||||||
messages.forEach (function (m) {
|
|
||||||
// console.log('Raw value from server', m.v);
|
|
||||||
m.v = fixupValue (m.v);
|
|
||||||
processMessage (m);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
28
Ooui/UI.cs
28
Ooui/UI.cs
|
@ -18,6 +18,20 @@ namespace Ooui
|
||||||
|
|
||||||
static readonly byte[] clientJsBytes;
|
static readonly byte[] clientJsBytes;
|
||||||
|
|
||||||
|
public static string Template { get; set; } = $@"<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>@ElementPath</title>
|
||||||
|
<meta name=""viewport"" content=""width=device-width, initial-scale=1"" />
|
||||||
|
<link rel=""stylesheet"" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" integrity=""sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"" crossorigin=""anonymous"">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id=""ooui-body"" class=""container-fluid""></div>
|
||||||
|
<script src=""/ooui.js""></script>
|
||||||
|
<script>ooui(""@ElementPath"");</script>
|
||||||
|
</body>
|
||||||
|
</html>";
|
||||||
|
|
||||||
static string host = "*";
|
static string host = "*";
|
||||||
public static string Host {
|
public static string Host {
|
||||||
get => host;
|
get => host;
|
||||||
|
@ -139,7 +153,7 @@ namespace Ooui
|
||||||
|
|
||||||
Func<Element> ctor;
|
Func<Element> ctor;
|
||||||
|
|
||||||
if (path == "/client.js") {
|
if (path == "/ooui.js") {
|
||||||
response.ContentLength64 = clientJsBytes.LongLength;
|
response.ContentLength64 = clientJsBytes.LongLength;
|
||||||
response.ContentType = "application/javascript";
|
response.ContentType = "application/javascript";
|
||||||
response.ContentEncoding = Encoding.UTF8;
|
response.ContentEncoding = Encoding.UTF8;
|
||||||
|
@ -161,17 +175,17 @@ namespace Ooui
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static string RenderTemplate (string elementPath)
|
||||||
|
{
|
||||||
|
return Template.Replace ("@ElementPath", elementPath);
|
||||||
|
}
|
||||||
|
|
||||||
static void WriteElementHtml (string elementPath, HttpListenerResponse response)
|
static void WriteElementHtml (string elementPath, HttpListenerResponse response)
|
||||||
{
|
{
|
||||||
response.StatusCode = 200;
|
response.StatusCode = 200;
|
||||||
response.ContentType = "text/html";
|
response.ContentType = "text/html";
|
||||||
response.ContentEncoding = Encoding.UTF8;
|
response.ContentEncoding = Encoding.UTF8;
|
||||||
var html = Encoding.UTF8.GetBytes ($@"<html>
|
var html = Encoding.UTF8.GetBytes (RenderTemplate (elementPath));
|
||||||
<head><title>{elementPath}</title></head>
|
|
||||||
<body>
|
|
||||||
<script>rootElementPath = ""{elementPath}"";</script>
|
|
||||||
<script src=""/client.js""> </script></body>
|
|
||||||
</html>");
|
|
||||||
response.ContentLength64 = html.LongLength;
|
response.ContentLength64 = html.LongLength;
|
||||||
using (var s = response.OutputStream) {
|
using (var s = response.OutputStream) {
|
||||||
s.Write (html, 0, html.Length);
|
s.Write (html, 0, html.Length);
|
||||||
|
|
Loading…
Reference in New Issue