app.py

@@ -69,9 +69,3 @@ def route_ticker(sock):
         sock.send(tick);
         tick = tick + 1
         time.sleep(0.5)
-
-@sock.route('/echo')
-def route_echo(sock):
-    while True:
-        data = sock.receive()
-        sock.send(data)

static/index.js

@@ -1,6 +1,5 @@
 class WSElement extends HTMLElement {
   static #sockets = {};
-  #socket;
   #delay = 1000;
 
   constructor() {
@@ -17,6 +16,8 @@ class WSElement extends HTMLElement {
   }
 
   #connect_socket(recreate) {
+    var ws;
+
     // `recreate` is used to handle reconnects, removeing the old websocket object
     // and recreating a new one
     if(recreate && WSElement.#sockets[this.src]) {
@@ -27,17 +28,17 @@ class WSElement extends HTMLElement {
     // check to see if one exists for this `src` else create
     // a new one.
     if(!(this.src in WSElement.#sockets)) {
-      this.#socket = WSElement.#newSocket(this.src);
+      ws = WSElement.#newSocket(this.src);
-      WSElement.#sockets[this.src] = this.#socket;
+      WSElement.#sockets[this.src] = ws;
     } else {
-      this.#socket = WSElement.#sockets[this.src];
+      ws = WSElement.#sockets[this.src];
     }
 
     // setup event handlers for this WebSocket/Elemnent pair
-    this.#socket.addEventListener('error', this.#on_ws_error.bind(this));
+    ws.addEventListener('error', this.#on_ws_error.bind(this));
-    this.#socket.addEventListener('message', this.#on_ws_message.bind(this));
+    ws.addEventListener('message', this.#on_ws_message.bind(this));
-    this.#socket.addEventListener('open', this.#on_ws_open.bind(this));
+    ws.addEventListener('open', this.#on_ws_open.bind(this));
-    this.#socket.addEventListener('close', this.#on_ws_close.bind(this));
+    ws.addEventListener('close', this.#on_ws_close.bind(this));
   }
 
   #on_ws_open(sock) {
@@ -98,11 +99,6 @@ class WSElement extends HTMLElement {
     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
   // on the static propert WSElement.#sockets
   static #newSocket(src) {
@@ -115,34 +111,6 @@ 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'
 class WSTime extends WSElement {
   connectedCallback() {
@@ -247,6 +215,5 @@ class WSTable extends WSElement {
 
 // define custom elements
 customElements.define('ws-element', WSElement);
-customElements.define('ws-input', WSInput);
 customElements.define('ws-time', WSTime);
 customElements.define('ws-table', WSTable);

templates/index.html

@@ -34,11 +34,6 @@
         <div>
           <ws-element autoreconnect="false" src="/ticker"></ws-element>
         </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>
       </main>
     </div>