add very basic sender element and input example using echo

app.py

@@ -69,3 +69,9 @@ 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,5 +1,6 @@
 class WSElement extends HTMLElement {
   static #sockets = {};
+  #socket;
   #delay = 1000;
 
   constructor() {
@@ -16,8 +17,6 @@ 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]) {
@@ -28,17 +27,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)) {
-      ws = WSElement.#newSocket(this.src);
+      this.#socket = WSElement.#newSocket(this.src);
-      WSElement.#sockets[this.src] = ws;
+      WSElement.#sockets[this.src] = this.#socket;
     } else {
-      ws = WSElement.#sockets[this.src];
+      this.#socket = WSElement.#sockets[this.src];
     }
 
     // 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) {
@@ -99,6 +98,11 @@ 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) {
@@ -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'
 class WSTime extends WSElement {
   connectedCallback() {
@@ -215,5 +247,6 @@ 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,6 +34,11 @@
         <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>