Compare commits
3 commits
e14a063a28
...
c742616e98
Author | SHA1 | Date | |
---|---|---|---|
|
c742616e98 | ||
|
60300ad2c3 | ||
|
fc5a5e1cc1 |
3 changed files with 53 additions and 9 deletions
6
app.py
6
app.py
|
@ -69,3 +69,9 @@ def route_ticker(sock):
|
||||||
sock.send(tick);
|
sock.send(tick);
|
||||||
tick = tick + 1
|
tick = tick + 1
|
||||||
time.sleep(0.5)
|
time.sleep(0.5)
|
||||||
|
|
||||||
|
@sock.route('/echo')
|
||||||
|
def route_echo(sock):
|
||||||
|
while True:
|
||||||
|
data = sock.receive()
|
||||||
|
sock.send(data)
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
class WSElement extends HTMLElement {
|
class WSElement extends HTMLElement {
|
||||||
static #sockets = {};
|
static #sockets = {};
|
||||||
|
#socket;
|
||||||
#delay = 1000;
|
#delay = 1000;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -16,8 +17,6 @@ class WSElement extends HTMLElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
#connect_socket(recreate) {
|
#connect_socket(recreate) {
|
||||||
var ws;
|
|
||||||
|
|
||||||
// `recreate` is used to handle reconnects, removeing the old websocket object
|
// `recreate` is used to handle reconnects, removeing the old websocket object
|
||||||
// and recreating a new one
|
// and recreating a new one
|
||||||
if(recreate && WSElement.#sockets[this.src]) {
|
if(recreate && WSElement.#sockets[this.src]) {
|
||||||
|
@ -28,17 +27,17 @@ class WSElement extends HTMLElement {
|
||||||
// check to see if one exists for this `src` else create
|
// check to see if one exists for this `src` else create
|
||||||
// a new one.
|
// a new one.
|
||||||
if(!(this.src in WSElement.#sockets)) {
|
if(!(this.src in WSElement.#sockets)) {
|
||||||
ws = WSElement.#newSocket(this.src);
|
this.#socket = WSElement.#newSocket(this.src);
|
||||||
WSElement.#sockets[this.src] = ws;
|
WSElement.#sockets[this.src] = this.#socket;
|
||||||
} else {
|
} else {
|
||||||
ws = WSElement.#sockets[this.src];
|
this.#socket = WSElement.#sockets[this.src];
|
||||||
}
|
}
|
||||||
|
|
||||||
// setup event handlers for this WebSocket/Elemnent pair
|
// setup event handlers for this WebSocket/Elemnent pair
|
||||||
ws.addEventListener('error', this.#on_ws_error.bind(this));
|
this.#socket.addEventListener('error', this.#on_ws_error.bind(this));
|
||||||
ws.addEventListener('message', this.#on_ws_message.bind(this));
|
this.#socket.addEventListener('message', this.#on_ws_message.bind(this));
|
||||||
ws.addEventListener('open', this.#on_ws_open.bind(this));
|
this.#socket.addEventListener('open', this.#on_ws_open.bind(this));
|
||||||
ws.addEventListener('close', this.#on_ws_close.bind(this));
|
this.#socket.addEventListener('close', this.#on_ws_close.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
#on_ws_open(sock) {
|
#on_ws_open(sock) {
|
||||||
|
@ -99,6 +98,11 @@ class WSElement extends HTMLElement {
|
||||||
this.innerText = data;
|
this.innerText = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// kind of wonky work around because privates are not inheritted
|
||||||
|
get sock() {
|
||||||
|
return this.#socket;
|
||||||
|
}
|
||||||
|
|
||||||
// static method for creating new sockets, which are tracked
|
// static method for creating new sockets, which are tracked
|
||||||
// on the static propert WSElement.#sockets
|
// on the static propert WSElement.#sockets
|
||||||
static #newSocket(src) {
|
static #newSocket(src) {
|
||||||
|
@ -111,6 +115,34 @@ class WSElement extends HTMLElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class WSSenderElement extends WSElement {
|
||||||
|
send(data) {
|
||||||
|
this.sock.send(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// by default WSSenderElement should not write to it's own .innerText
|
||||||
|
// instead the subclass should override `.message` for desired behavior
|
||||||
|
message(data) {
|
||||||
|
// no nothing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class WSInput extends WSSenderElement {
|
||||||
|
connectedCallback() {
|
||||||
|
super.connectedCallback();
|
||||||
|
|
||||||
|
this.insertAdjacentHTML('beforeend', '<label class="time-label" for="ws-input-send">Send: </label> <input placeholder="Press enter" id="ws-input-send" />');
|
||||||
|
this.input = this.querySelector('input');
|
||||||
|
var self = this;
|
||||||
|
this.input.addEventListener('keyup', function(evt) {
|
||||||
|
if(evt.keyCode === 13) {
|
||||||
|
self.send(self.input.value);
|
||||||
|
self.input.value = '';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Example subclass to display a basic 'Time: 00:00:00'
|
// Example subclass to display a basic 'Time: 00:00:00'
|
||||||
class WSTime extends WSElement {
|
class WSTime extends WSElement {
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
|
@ -215,5 +247,6 @@ class WSTable extends WSElement {
|
||||||
|
|
||||||
// define custom elements
|
// define custom elements
|
||||||
customElements.define('ws-element', WSElement);
|
customElements.define('ws-element', WSElement);
|
||||||
|
customElements.define('ws-input', WSInput);
|
||||||
customElements.define('ws-time', WSTime);
|
customElements.define('ws-time', WSTime);
|
||||||
customElements.define('ws-table', WSTable);
|
customElements.define('ws-table', WSTable);
|
||||||
|
|
|
@ -34,6 +34,11 @@
|
||||||
<div>
|
<div>
|
||||||
<ws-element autoreconnect="false" src="/ticker"></ws-element>
|
<ws-element autoreconnect="false" src="/ticker"></ws-element>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<ws-input src="/echo"></ws-input>
|
||||||
|
<br />
|
||||||
|
Receive: <ws-element src="/echo"></ws-element>
|
||||||
|
</div>
|
||||||
<ws-table limit="10" autoheader src="/logs"></ws-table>
|
<ws-table limit="10" autoheader src="/logs"></ws-table>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue