89 lines
1.9 KiB
JavaScript
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); |