fly-socket/www/main.html
2019-07-31 01:08:19 +02:00

164 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>WebSocket DEMO</title>
<script src="js/struct/struct.js"></script>
<script src="js/fly-ws.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px;
display: grid;
background: #141414;
color: #e7e7e7;
}
body {
grid-template: 100px 50px repeat(4, 1fr) / 50px calc(100vh - 150px) calc((100vh - 150px) / 4) 1fr;
grid-template-areas: "title title title console"
"ws-status ws-input ws-connect console"
". map data-al console"
". map data-sp console"
". map data-ps console"
". map data-hp console";
}
body > div {
display: grid;
}
.title {
align-self: center;
justify-self: center;
}
.ws {
align-self: center;
height: 30px;
}
.ws > * {
font-size: 20px;
}
.border {
border: 1px solid dimgray;
}
.ws-status {
justify-self: center;
width: 30px;
background: gray;
}
.online {
background: lime;
}
.offline {
background: red;
}
.ws-connect {
justify-self: start;
}
/* Yea... im seperating this */
.title {
grid-area: title;
}
.ws-status {
grid-area: ws-status;
}
.ws-input {
grid-area: ws-input;
}
.ws-connect {
grid-area: ws-connect;
}
.console {
grid-area: console;
}
.map {
grid-area: map;
}
.data-al {
grid-area: data-al;
}
.data-sp {
grid-area: data-sp;
}
.data-ps {
grid-area: data-ps;
}
.data-hp {
grid-area: data-hp;
}
</style>
</head>
<body>
<div class="title">
<h1>Websocket DEMO</h1>
</div>
<div class="ws ws-status border"></div>
<div class="ws ws-input">
<input id="addr" value="ws://127.0.0.1:7767"/>
</div>
<div class="ws ws-connect">
<button onclick="connect()">Connect</button>
</div>
<div class="map border"></div>
<div class="data-al border"></div>
<div class="data-sp border"></div>
<div class="data-ps border"></div>
<div class="data-hp border"></div>
<div class="console border" id="stdout"></div>
<script>
var fs;
function connect() {
fs = new FLYSocket(
addr.value, // websocket addr
// callbackData
// callbackRaw
);
}
</script>
<!--
<script>
function hex(str)
{
var arr1 = [];
for (var n = 0, l = str.length; n < l; n ++)
{
var hex = Number(str.charCodeAt(n)).toString(16);
arr1.push(hex);
}
return arr1.join(' ');
}
var ws = new WebSocket("ws://127.0.0.1:7767/"),
messages = document.createElement('ul');
ws.onmessage = function (event) {
var messages = document.getElementsByTagName('ul')[0],
message = document.createElement('li'),
res = new Response(event.data).arrayBuffer().then(
function(buff) {
last = buff;
data = new DataView(buff);
data_str = "";
for (let i = 0; i < data.byteLength; i++)
data_str += String.fromCharCode(data.getInt8(i));
content = document.createTextNode(data_str + " | " + hex(data_str));
message.appendChild(content);
messages.appendChild(message);
}
);
};
document.body.appendChild(messages);
</script>-->
</body>
</html>