Merge pull request #1 from thedumbterminal/reconnect

Reconnect when connection drops

Author: thedumbterminal

CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+## v1.1.0
+(16/07/2017)
+
+* Will now reconnect when the websocket is closed.
+
+## v1.0.4
+(07/03/2017)
+
+* Secure websockets now supported.
+
+## v1.0.3
+(07/03/2017)
+
+* Websocket connection will now use correct hostname.
+
+## v1.0.2
+(07/03/2017)
+
+* Added dist directory to npm release.
+
+## v1.0.1
+(05/03/2017)
+
+* Documentation updated.
+
+## v1.0.0
+(05/03/2017)
+
+* Initial release

README.md

@@ -5,7 +5,7 @@
 
 Tiny browser web framework, which communicates to the server via a websocket. All DOM changes are performed using HTML provided by the server.
 
-Minified size is **2.32** Kb which when transmitted compressed is **883** Bytes!
+Minified size is **2.56** Kb which when transmitted compressed is **945** Bytes!
 
 ## Usage
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiny-browser-framework",
   "description": "Minimal Client JS Framework",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "homepage": "https://github.com/thedumbterminal/TinyBrowserFramework",
   "author": {
     "name": "thedumbterminal",

src/index.js

@@ -9,6 +9,11 @@ TBF.prototype._setupWebsocket = function(){
 	var socketUrl = window.location.protocol.replace('http', 'ws') + '//' + window.location.host + '/websocket';
 	this._websocket = new WebSocket(socketUrl);
 	var self = this;
+	this._websocket.onclose = function(event){
+		setTimeout(function(){
+			self._websocket.readyState > 1 && self._setupWebsocket();
+		}, 1000)
+	}
 	this._websocket.onmessage = function(event){
 		var jsons = JSON.parse(event.data);
 		jsons.forEach(function(json){
@@ -24,9 +29,8 @@ TBF.prototype._augmentInterface = function(){
 	}
 	tags = document.getElementsByTagName('FORM');
 	for(var i = 0; i < tags.length; i++){
-		this._augmentForm(tags.item(i))
+		this._augmentForm(tags.item(i));
 	}
-
 };
 
 TBF.prototype._augmentButton = function(ele){
@@ -105,6 +109,9 @@ TBF.prototype._setupListeners = function(){
 	document.addEventListener('DOMSubtreeModified', function(event) {
 		self._augmentInterface();
 	});
+	window.onbeforeunload = function(){
+		self._websocket && self._websocket.close();
+	};
 };
 
 window.tbfInstance = new TBF();