Source: websocket.js

  1. /**
  2.  * Websocket Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/ws.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/ws.html">DEMO</a>
  5.  */
  6. class WS extends HTMLElement {
  7.     constructor() {
  8.         wc.group("WS.constructor")
  9. 	
  10.         super();
  12.         wc.groupEnd();
  13.     };
  14.     
  15.     /**
  16.      * Set observable values here. When Changed, attributeChangedCallback is invoked
  17.      * @observedAttributes
  18.      */
  19.     static get observedAttributes() {
  20.         wc.group("WS.observedAttributes");
  22. 	this.observables = [];
  24.         wc.groupEnd();
  25.         return this.observables;
  26.     };
  28.     /**
  29.      * Called when this is attached to DOM
  30.      * @connectedCallback. 
  31.      */
  32.     connectedCallback() {
  33.         wc.group("WS.connectedCallback")
  34. 	
  35. 	// ADD A RANDOM ID IF NONE EXIST
  36. 	if (!this.id) {
  37. 	    this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  38. 	}
  40. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  41. 	this._initialize();
  43. 	// ADD COMPONENT MARKTOP
  44. 	this.innerHTML = this._template()
  46. 	this.start();
  48. 	// ADD STATS AND OTHER FINAL STUFF
  49. 	this._finalize();
  51. 	ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  53.         wc.groupEnd();
  54.     };
  56.     /**
  57.      * Initial Markup
  58.      * @private
  59.      * @_template
  60.      */
  61.     _template() {
  62.         wc.group("WS.template");
  63. 	
  64. 	var temp = this.dom.content;
  66.         wc.groupEnd();
  67.         return temp;
  68.     };
  70.     /**
  71.      * Called with .setAttribute(...) function call
  72.      * @attributeChangedCallback
  73.      */
  74.     attributeChangedCallback(attr, oldval, newval) {
  75.         wc.group("WS.attributeChangedCallback:", attr, oldval, newval);
  77. 	this.properties = this.properties || [];
  79. 	let obs = WS.observedAttributes;
  81. 	for (let i = 0; i < obs.length; i++) {
  82. 	    if (newval) {
  83. 		this.properties[obs[i]] = newval;
  84. 	    }
  85. 	}
  86. 	
  87. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  88. 	try {
  89. 	    switch(attr) 
  90. 	    {
  91. 		case "header":
  92. 		//this.querySelector("h1").innerHTML = newval;
  93. 		break;
  94. 		
  95. 		default:
  96. 		break;
  97. 	    }
  98. 	} catch(e) {
  99. 	    wc.warn(e.name + ' > ' + e.message);
  100. 	}
  102.         wc.groupEnd();
  103.     };
  105.     /**
  106.      * Stores DOM elements of interest for future use
  107.      * @private
  108.      * @_fetchElements
  109.      */
  110.     _fetchElements() {
  111. 	wc.group("WS._fetchElements");
  112. 	
  113. 	this.dom = this.dom || [];
  114. 	this.dom.content = this.innerHTML;
  116. 	wc.groupEnd();
  117.     };
  119.     /**
  120.      * Component attributes are _fetched and defaults are set if undefined
  121.      * @private
  122.      * @_fetchAttributes
  123.      */
  124.     _fetchAttributes() {
  125. 	wc.group("WS._fetchAttributes");
  126. 	
  127. 	this.properties = {
  128. 	    uparam	: "",
  129. 	    cname	: "ws",
  130. 	    author	: "Mel M. Heravi, Ph.D.",
  131. 	    version	: "1.0"
  132. 	};
  133. 	
  134. 	// SAVE WIDGET SPECIFIC PROPERTIES
  135. 	this.propertiesW = [];
  136. 	
  137. 	// SAVE ALL OTHER PROPERTIES
  138. 	let attrs = wc.getAttributes(this)
  139. 	
  140.  	for (var key in attrs) {
  141. 	    let attr = this.getAttribute(key) || this.properties.key;
  142. 	    this.properties[key]  = this.getAttribute(key);
  143. 	    this.propertiesW[key] = this.getAttribute(key);
  144. 	    wc.log(key + ": " + attrs[key]);
  145. 	}
  147. 	// SET ALL INITIAL ATTRIBUTES
  148.  	for (var key in this.properties) {
  149. 	    switch(key) 
  150. 	    {
  151. 		case "header":
  152. 		break;
  153. 		
  154. 		default:
  155. 		break;
  156. 	    }
  157. 	}
  159. 	wc.log("ATTRIBUTES: ", this.properties);
  161. 	wc.groupEnd();
  162.     };
  164.     /**
  165.      * Initialize component
  166.      * @private
  167.      * @_initialize
  168.      */
  169.     _initialize() {
  170. 	wc.group("WS._initialize:", this.id);
  172. 	// FETCH ALL INTERESTING ELEMENTS
  173. 	this._fetchElements();
  175. 	// FETCH ALL ATTRIBUTES
  176. 	this._fetchAttributes();
  177. 	
  178. 	wc.groupEnd();
  179.     };
  181.     /**
  182.      * Save data for analytics and final wrap up
  183.      * @private
  184.      * @_finalize
  185.      */
  186.     _finalize() {
  187. 	wc.group("WS._finalize:", this.id);
  189. 	this.classList.add("wc");
  191. 	// ADD ANALYTICS HERE
  192. 	wc.setStats(this, this.properties.cname, this.properties.version);
  193. 	
  194. 	// SHOW IT NOW (NO FLICKERS) 
  195. 	this.style.visibility = "visible";
  197. 	wc.groupEnd();
  198.     };
  200.     /**
  201.      * Invoked When component is removed. Usually with a .remove() function call
  202.      * @disconnectedCallback
  203.      */
  204.     disconnectedCallback() {
  205.         wc.group("WS.disconnectedCallback")
  207. 	ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  209.         wc.groupEnd();
  210.     };
  212.     /**
  213.      * Destroy the instance object and artifacts
  214.      * @destroy
  215.      */
  216.     destroy() {
  217. 	wc.group("WS.destroy");
  219. 	// FREE ALL MEMORY
  220. 	// you should delete all created objects here
  221. 	
  222. 	// FREE POINTER
  223. 	delete this;
  224. 	
  225. 	// REMOVE ITEM FROM DOM
  226. 	this.parentNode.removeChild(this);
  228. 	ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  230. 	wc.groupEnd();
  231.     };
  233.     /**
  234.      * Start the instance object and artifacts
  235.      * @start
  236.      */
  237.     start() {
  238. 	wc.group("WS.start");
  240. 	let self = this;
  242. 	window.ws = new WebSocket(this.properties.url);
  244. 	////////////////////////////////////////////////////////////
  245. 	////
  246. 	////////////////////////////////////////////////////////////
  247. 	ws.onopen = () => {
  248. 	    wc.group("ws.onopen");
  250. 	    let time = new Date().getTime();
  252. 	    ws.send("ping")
  254. 	    wc.publish("wc-websocket", {
  255. 		time: new Date().getTime(),
  256. 		type: "info",
  257. 		msg: "CONNECTED",
  258. 		id: self.id
  259. 	    });
  261. 	    wc.groupEnd();
  262. 	}
  264. 	////////////////////////////////////////////////////////////
  265. 	////
  266. 	////////////////////////////////////////////////////////////
  267. 	ws.onerror = (error) => {
  268. 	    wc.group("ws.onerror");
  270. 	    var msg = "UNKNOWN ERROR..."
  272. 	    if (error.target.readyState == 3) {
  273. 		msg = `DISCONNECTED. will try again in ${this.properties.reconnect/1000} seconds...`
  274. 	    }
  276. 	    wc.error("C ERROR:", error.target.readyState, msg)
  278. 	    wc.publish("wc-websocket", {
  279. 		time: new Date().getTime(),
  280. 		type: "error",
  281. 		msg: msg,
  282. 		id: self.id
  283. 	    });
  284. 	    
  285. 	    wc.groupEnd();
  286. 	}
  288. 	////////////////////////////////////////////////////////////
  289. 	////
  290. 	////////////////////////////////////////////////////////////
  291. 	ws.onmessage = (e) => {
  292. 	    wc.group("ws.onmessage");
  294. 	    let msg = e.data;
  295. 	    let x = msg.split(" ");
  297. 	    switch(x[0])
  298. 	    {
  299. 		case "pong":
  300. 		wc.log(`C < ${msg}`);
  302. 		wc.publish("wc-websocket", {
  303. 		    time: new Date().getTime(),
  304. 		    type: "msg",
  305. 		    msg: msg,
  306. 		    id: self.id
  307. 		});
  308. 		break;
  310. 		default:
  311. 		let error = `ERROR: DO NOT UNDERSTAND COMMAND: ${msg}`;
  312. 		wc.error(error);
  314. 		wc.publish("wc-websocket", {
  315. 		    time: new Date().getTime(),
  316. 		    type: "error",
  317. 		    msg: error,
  318. 		    id: self.id
  319. 		});
  320. 		break;
  321. 	    }
  323. 	    // CONFIRM
  324. 	    ws.send("ready");
  325. 	    
  326. 	    wc.groupEnd();
  327. 	}
  329. 	////////////////////////////////////////////////////////////
  330. 	//// RESTART IF DISCONNECTED
  331. 	////////////////////////////////////////////////////////////
  332. 	ws.onclose = function(e) {
  333. 	    wc.group("ws.onclose");
  335. 	    wc.log("DISCONNECTED!");
  336. 	    
  337. 	    wc.publish("wc-websocket", {
  338. 		time: new Date().getTime(),
  339. 		type: "info",
  340. 		msg: "CONNECTION CLOSED",
  341. 		id: self.id
  342. 	    });
  344. 	    setTimeout(() => {
  345. 		self.start()
  346. 	    }, self.properties.reconnect);
  348. 	    wc.groupEnd();
  349. 	};
  351. 	wc.groupEnd();
  352.     }
  353. }
  355. window.customElements.define('wc-websocket', WS);