crosswords/js_client/websocket.js

89 lines
1.9 KiB
JavaScript

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);