add very basic sender element and input example using echo

static/index.js

@@ -98,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) {
@@ -110,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() {
@@ -214,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>