crosswords/js_client/websocket.js

import { html, css, LitElement } from 'https://unpkg.com/lit-element/lit-element.js?module';

export class WebsocketConnection extends LitElement {
    static get styles() {
        return css``;
    }

    static get properties() {
        return {
            url: { type: String }
        }
    }

    constructor() {
        super();

        this.url = '';
        this.socket = null;
    }


    onopen(event){
        console.log("websocket connected");
    }

    onclose(event){
        console.log("websocket closed");
        setTimeout(() => this.connect(), 1000);
    }

    onerror(event){
        console.log("websocket error, closing...");
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.close();
        }
    }

    onmessage(event){
        console.log("received message:", event.data);
    }

    isSocketConnected(){
        if (! this.socket){
            return false;
        }

        if (this.socket.readyState === WebSocket.OPEN) {
            return true;
        }
        return false;
    }

    sendMessage(msg){
        
        if (this.isSocketConnected()) {
            var string_msg = JSON.stringify(msg);
            this.socket.send(string_msg);
        }
        else {
            console.error("cannot send message, websocket disconnected");
        }

    }

    connect() {
        console.log(`connect to ${this.url}...`);
        this.socket = new WebSocket(this.url);
        this.socket.onopen = (event) => this.onopen(event);
        this.socket.onclose = (event) => this.onclose(event);
        this.socket.onerror = (event) => this.onerror(event);
        this.socket.onmessage = (event) => this.onmessage(event);
    }

    update(props) {
        if (props.has("url")){
            this.connect();
        }
        super.update(props);
    }



    render() {
        // do nothing
        return html``;
    }
}

customElements.define('websocket-connection', WebsocketConnection);