WSElement

A demo for a WebSocket based WebComponent custom Element.

Motivation

As I've embraced WebComponent increasingly I find myself writing less and less JavaScript. One place it doesn't seems to have decreased is around WebSockets, so why not try to pass some of this complexity off to an extensible WebComponent?

In a prior project I had experimented with this and it look feasible, but my one off code didn't feel generic enough for general use. This code represents a cleaner more trimmed down version I feel accomplishes this goal better.

Code and Usage

This codebase provides a trimmed down base Element, WSElement, who's default behavior is simply to update it's own innerText. This could be simply used on it's own, embedded in other HTML or extended to provide more complex behavior with in a custom WebComponent.

In addition two subclass Elements are provided to examples of extending the base class.

WSTime provides a slightly more complex example, adding several child elements and perform a partial update.

WSTable increases the complexity by parsing incoming JSON data and dynamically building a Table. It also demonstrates using attributes to control behavior.

Demo Server

To see this in action a demo server has been provided based on Flask. To run it....

python -m venv .
. bin/activate
pip install -r requirements.txt
flask run --debug #optional

(Lack of) Licensing

This isn't really meant to be a consumable module but more of a how-to, feel free to use as you wish under no formal license, with no guarantees.

If/As I developer this further, this may change, please feel free to make suggestions, though again, with no guarantees.

Future

I do hope to develop this further, specifically I'm mulling how this would look when also sending data over the socket, something I haven't needed as much yet.

Donate

Thought this was helpful? Make a donation so I can kept pushing the hacks out.