WebSocket Interactive UI

You are reading a single comment by @MrTimcakes and its replies. Click here to read the full conversation.

•

MrTimcakes

@Gordon Thanks, using a separate request for the script solved that. Now memory usage looks like this before and after the clients connection.

>process.memory();
={ "free": 769, "usage": 631, "total": 1400, "history": 551 }
[WS] "40"
>process.memory();
={ "free": 559, "usage": 841, "total": 1400, "history": 199 }

New Code

var page = '<body style="width:100%;height:100%;overflow:hidden;"><svg style="width:100%;height:100%;"  viewbox="0 0 500 500" id="svg"><path style="fill:#80e5ff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 250 0 C 111.92882 3.7895613e-14 0 111.92882 0 250 C -1.249508e-14 341.05067 48.689713 420.72528 121.4375 464.4375 L 154.625 409.40625 C 100.50052 376.95218 64.28125 317.69934 64.28125 250 C 64.28125 147.43284 147.43284 64.28125 250 64.28125 C 352.56716 64.28125 435.71875 147.43284 435.71875 250 C 435.71875 317.53896 399.66155 376.65256 345.75 409.15625 L 378.71875 464.34375 C 451.37991 420.61135 500 340.98541 500 250 C 500 111.92882 388.07118 -1.8947806e-14 250 0 z " id="ring"/> <rect style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="needle" width="16" height="80" x="242"/> <text xml:space="preserve" style="font-size:122.59261322px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica;-inkscape-font-specification:Helvetica" x="250.01915" y="845.31812" id="text"><tspan id="label" x="250.01915" y="292.95594">0</tspan></text> <path style="fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="up" d="m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z" transform="matrix(0.61903879,0,0,0.61903879,95.682477,91.16682)" /> <path transform="matrix(0.61903879,0,0,-0.61903879,95.682477,408.80767)" d="m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z" id="dn" style="fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none" /></svg><script src="/interact.js"></script></body>';
var script = 'var ws=new WebSocket("ws://"+location.host,"protocolOne"),timestamp=Date.now(),pos=50,dragging=!1;function $(a){return document.getElementById(a)}function setPos(a){0>a&&(a=0);100<a&&(a=100);pos=a;100<Date.now()-timestamp&&(timestamp=Date.now(),ws.send(pos));$("label").textContent=pos;a=2.8*(pos-50);$("needle").setAttribute("transform","rotate("+a+" 250 250)")}setPos(pos);function dragStart(){dragging=!0;$("ring").style.fill="#ff0000"}document.addEventListener("mousemove",function(a){if(dragging){a.preventDefault();var b=$("svg");setPos(Math.round(180*Math.atan2(a.clientX-b.clientWidth/2,b.clientHeight/2-a.clientY)/Math.PI/2.8+50))}});document.addEventListener("mouseup",function(a){dragging=!1;$("ring").style.fill="#80e5ff";$("up").style.fill="#d5f6ff";$("dn").style.fill="#d5f6ff"});function touchHandler(a){var b=a.changedTouches[0],c="";switch(a.type){case "touchstart":c="mousedown";break;case "touchmove":c="mousemove";break;case "touchend":c="mouseup";break;default:return}var d=document.createEvent("MouseEvent");d.initMouseEvent(c,!0,!0,window,1,b.screenX,b.screenY,b.clientX,b.clientY,!1,!1,!1,!1,0,null);b.target.dispatchEvent(d);a.preventDefault()}document.addEventListener("touchstart",touchHandler,!0);document.addEventListener("touchmove",touchHandler,!0);document.addEventListener("touchend",touchHandler,!0);document.addEventListener("touchcancel",touchHandler,!0);$("ring").onmousedown=dragStart;$("needle").onmousedown=dragStart;$("up").onmousedown=function(a){a.preventDefault();this.style.fill="#00ff00"};$("dn").onmousedown=function(a){a.preventDefault();this.style.fill="#ff0000"};$("up").onmouseup=function(a){setPos(pos+10)};$("dn").onmouseup=function(a){setPos(pos-10)};';

function onPageRequest(req, res) {
  var a = url.parse(req.url, true);
  if(a.pathname == "/interact.js"){
    res.writeHead(200, {'Content-Type': 'application/javascript'});
    res.end(script);
  }else{
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(page);
  }
}

var server = require('ws').createServer(onPageRequest);
server.listen(8000);
server.on("websocket", function(ws) {
    ws.on('message',function(msg) { print("[WS] "+JSON.stringify(msg)); });
    ws.send("Hello from Espruino!");
});

WebSocket Interactive UI

About

Espruino