164 lines
5.1 KiB
HTML
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> |