1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css" type="text/css">
<script src="https://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
</head>
<body>
<script src="/socket.io/socket.io.js"></script>
<script>
let world = // fold
{
_socket:undefined,
_frames : 0,
_now : undefined,
_before : new Date(),
update:function() {
// do some things
world._now = new Date();
if (world._now - world._before > 1000) {
$$("framerate").define("value", world._frames);
$$("framerate").refresh();
world._before = world._now;
world._frames = 0;
} else {
world._frames++;
}
},
loop:function() {
world.update();
requestAnimationFrame(world.loop);
},
};
webix.ready(function() {
world._socket = io();
// windows avec text en haut à droite
webix.ui( // fold
{
view:"window",
head:false,
autofit:true,
zIndex:2000,
body:{
id:'framerate',
view:"text",
value:"",
readonly:true,
labelWidth:0,
width:100,
tooltip:'FPS',
},
css:{
'background-color': 'transparent !important',
'box-shadow': 'none !important'
},
borderless:true,
}).show({ x:window.innerWidth-108, y:7 });
world.loop();
// ok
world._socket.on('message', function() // fol
{
for (let i=0; i<1000000000; i++) {
let a = i * 5;
a = a % 3;
}
console.log('done');
});
document.addEventListener("keydown", function() {
world._socket.emit('sendMeMessage', {});
}, false);
});
</script>
</body>
</html> |
Partager