Unfinished websocket demo
This commit is contained in:
parent
7a39c7e483
commit
9680949503
42
test.html
42
test.html
|
|
@ -1,42 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>WebSocket test</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<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>
|
|
||||||
115
www/js/fly-ws.js
Normal file
115
www/js/fly-ws.js
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
class FLYSocket {
|
||||||
|
constructor(ws,
|
||||||
|
callbackData = this.callbackDummy,
|
||||||
|
callbackRaw = this.callbackDummy) {
|
||||||
|
this.ws = new WebSocket(ws);
|
||||||
|
this.pointer = 0;
|
||||||
|
|
||||||
|
this.callbackData = callbackData;
|
||||||
|
this.callbackRaw = callbackRaw;
|
||||||
|
|
||||||
|
this.ws.onmessage = this.onMessage.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMessage(e) {
|
||||||
|
new Response(event.data).arrayBuffer().then(
|
||||||
|
function(buff) {
|
||||||
|
let data = new DataView(buff);
|
||||||
|
this.callbackRaw(data);
|
||||||
|
|
||||||
|
if (this.callbackData != this.callbackDummy || true) { // DEBUG
|
||||||
|
this.callbackData( this.parse(data) );
|
||||||
|
}
|
||||||
|
}.bind(this)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
parse(data) {
|
||||||
|
window.data = data; // DEBUG
|
||||||
|
let packets = [];
|
||||||
|
this.pointer = 0;
|
||||||
|
|
||||||
|
while (this.pointer < data.byteLength) {
|
||||||
|
let packetID = data.getInt8(this.pointer++);
|
||||||
|
packets.push({
|
||||||
|
packetID: packetID,
|
||||||
|
value: (this["handle_packet" + packetID] || this.handle_packetInvalid)(data)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return packets;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_packet0(data) {
|
||||||
|
// BxI
|
||||||
|
// B: Length
|
||||||
|
// I: FlightUUID
|
||||||
|
let ret = [];
|
||||||
|
let length = data.getUint8(this.pointer++);
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
ret.push( data.getUint16(this.pointer) );
|
||||||
|
this.pointer += 2;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_packet1(data) {
|
||||||
|
// ?
|
||||||
|
// ?: Subscribed to changes
|
||||||
|
return data.getUint8(this.pointer++) != 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_packet2(data) {
|
||||||
|
// I?
|
||||||
|
// I: FlightUUID
|
||||||
|
// ?: Subscribed to flight data
|
||||||
|
let ret = [];
|
||||||
|
ret.push( data.getUint16(this.pointer) ); this.pointer += 2;
|
||||||
|
ret.push( data.getUint8(this.pointer++) != 0 );
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_packet3(data) { // TODO: implement (Whole data / history)
|
||||||
|
// Ixs
|
||||||
|
// I: Length
|
||||||
|
// s: DataStream
|
||||||
|
return ret = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_packet4(data) {
|
||||||
|
// I?
|
||||||
|
// I: FlightUUID
|
||||||
|
// ?: Flight active
|
||||||
|
let ret = [];
|
||||||
|
ret.push( data.getUint16(this.pointer) ); this.pointer += 2;
|
||||||
|
ret.push( data.getUint8(this.pointer++) != 0 );
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_packet5(data) { // TODO: implement (One frame)
|
||||||
|
// Ixs
|
||||||
|
// I: Length
|
||||||
|
// s: DataStream
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_packetInvalid(data) {
|
||||||
|
throw TypeError(`Invalid DATA: ${Array.from( this.buffer2HexArray(data, --this.pointer) ).join(" ")}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
*buffer2HexArray(buff, start = 0, end = buff.byteLength) {
|
||||||
|
for (let i = start; i < end; i++) {
|
||||||
|
yield hex.push( buff.getUint8(i).toString(16) );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
callbackDummy(_) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Flight {
|
||||||
|
constructor(uuid) {
|
||||||
|
this.uuid = uuid;
|
||||||
|
this.playername;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("OK") // TODO: please remove...
|
||||||
21
www/js/struct/LICENSE
Normal file
21
www/js/struct/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2016 Aksel Jensen (TheRealAksel at github)
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
60
www/js/struct/struct.js
Normal file
60
www/js/struct/struct.js
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
// https://github.com/lyngklip/structjs
|
||||||
|
"use strict"
|
||||||
|
const rechk = /^([<>])?(([1-9]\d*)?([xcbB?hHiIfdsp]))*$/
|
||||||
|
const refmt = /([1-9]\d*)?([xcbB?hHiIfdsp])/g
|
||||||
|
const str = (v,o,c) => String.fromCharCode(
|
||||||
|
...new Uint8Array(v.buffer, v.byteOffset + o, c))
|
||||||
|
const rts = (v,o,c,s) => new Uint8Array(v.buffer, v.byteOffset + o, c)
|
||||||
|
.set(s.split('').map(str => str.charCodeAt(0)))
|
||||||
|
const pst = (v,o,c) => str(v, o + 1, Math.min(v.getUint8(o), c - 1))
|
||||||
|
const tsp = (v,o,c,s) => { v.setUint8(o, s.length); rts(v, o + 1, c - 1, s) }
|
||||||
|
const lut = le => ({
|
||||||
|
x: c=>[1,c,0],
|
||||||
|
c: c=>[c,1,o=>({u:v=>str(v, o, 1) , p:(v,c)=>rts(v, o, 1, c) })],
|
||||||
|
'?': c=>[c,1,o=>({u:v=>Boolean(v.getUint8(o)),p:(v,B)=>v.setUint8(o,B)})],
|
||||||
|
b: c=>[c,1,o=>({u:v=>v.getInt8( o ), p:(v,b)=>v.setInt8( o,b )})],
|
||||||
|
B: c=>[c,1,o=>({u:v=>v.getUint8( o ), p:(v,B)=>v.setUint8( o,B )})],
|
||||||
|
h: c=>[c,2,o=>({u:v=>v.getInt16( o,le), p:(v,h)=>v.setInt16( o,h,le)})],
|
||||||
|
H: c=>[c,2,o=>({u:v=>v.getUint16( o,le), p:(v,H)=>v.setUint16( o,H,le)})],
|
||||||
|
i: c=>[c,4,o=>({u:v=>v.getInt32( o,le), p:(v,i)=>v.setInt32( o,i,le)})],
|
||||||
|
I: c=>[c,4,o=>({u:v=>v.getUint32( o,le), p:(v,I)=>v.setUint32( o,I,le)})],
|
||||||
|
f: c=>[c,4,o=>({u:v=>v.getFloat32(o,le), p:(v,f)=>v.setFloat32(o,f,le)})],
|
||||||
|
d: c=>[c,8,o=>({u:v=>v.getFloat64(o,le), p:(v,d)=>v.setFloat64(o,d,le)})],
|
||||||
|
s: c=>[1,c,o=>({u:v=>str(v,o,c), p:(v,s)=>rts(v,o,c,s.slice(0,c ) )})],
|
||||||
|
p: c=>[1,c,o=>({u:v=>pst(v,o,c), p:(v,s)=>tsp(v,o,c,s.slice(0,c - 1) )})]
|
||||||
|
})
|
||||||
|
const errbuf = new RangeError("Structure larger than remaining buffer")
|
||||||
|
const errval = new RangeError("Not enough values for structure")
|
||||||
|
const struct = format => {
|
||||||
|
let fns = [], size = 0, m = rechk.exec(format)
|
||||||
|
if (!m) { throw new RangeError("Invalid format string") }
|
||||||
|
const t = lut('<' === m[1]), lu = (n, c) => t[c](n ? parseInt(n, 10) : 1)
|
||||||
|
while ((m = refmt.exec(format))) { ((r, s, f) => {
|
||||||
|
for (let i = 0; i < r; ++i, size += s) { if (f) {fns.push(f(size))} }
|
||||||
|
})(...lu(...m.slice(1)))}
|
||||||
|
const unpack_from = (arrb, offs) => {
|
||||||
|
if (arrb.byteLength < (offs|0) + size) { throw errbuf }
|
||||||
|
let v = new DataView(arrb, offs|0)
|
||||||
|
return fns.map(f => f.u(v))
|
||||||
|
}
|
||||||
|
const pack_into = (arrb, offs, ...values) => {
|
||||||
|
if (values.length < fns.length) { throw errval }
|
||||||
|
if (arrb.byteLength < offs + size) { throw errbuf }
|
||||||
|
const v = new DataView(arrb, offs)
|
||||||
|
new Uint8Array(arrb, offs, size).fill(0)
|
||||||
|
fns.forEach((f, i) => f.p(v, values[i]))
|
||||||
|
}
|
||||||
|
const pack = (...values) => {
|
||||||
|
let b = new ArrayBuffer(size)
|
||||||
|
pack_into(b, 0, ...values)
|
||||||
|
return b
|
||||||
|
}
|
||||||
|
const unpack = arrb => unpack_from(arrb, 0)
|
||||||
|
function* iter_unpack(arrb) {
|
||||||
|
for (let offs = 0; offs + size <= arrb.byteLength; offs += size) {
|
||||||
|
yield unpack_from(arrb, offs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Object.freeze({
|
||||||
|
unpack, pack, unpack_from, pack_into, iter_unpack, format, size})
|
||||||
|
}
|
||||||
164
www/main.html
Normal file
164
www/main.html
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
<!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>
|
||||||
Loading…
Reference in New Issue
Block a user