Version 1.1.0

Add visibility handling (only when property is set) Saw this in the I/O2016 app and think it is useful.
wburgers · Jun 7, 2016 · 2bf53db · 2bf53db
1 parent 36d984e
commit 2bf53db
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git a/Readme.md b/Readme.md
@@ -15,7 +15,8 @@ As the example above shows, it is possible to data-bind to some of the websocket
 - The array of protocols to use.
 - The status of the connection can only be read, not set. Use it with [status-dot] (https://github.com/wburgers/OZWSS-Polymer-status-dot) for UI visibility of the connection status.
 - The auto propery tells the websocket to automatically connect on page load or url change. If auto is used, remember to data-bind the protocols before the url.
-
+- The handle-visibility property tells the websocket to close the connection when the browser tab/page is out of focus and reopen when the tab is focussed.
+
 The following events are thrown:
 - "websocket-open": tells you the connection is opened.
 - "websocket-error": tells you there was an error. `event.detail.data` contains more info about the error.

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "websocket-component",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/wburgers/websocket-component",
   "description": "A websocket element wrapper",
   "keywords": ["web-components"],

diff --git a/demo/index.html b/demo/index.html
@@ -9,7 +9,7 @@
 	</head>
 	<body>
 		Check your console!
-		<websocket-component id="websocket" url="wss://echo.websocket.org" auto></websocket-component>
+		<websocket-component id="websocket" url="wss://echo.websocket.org" auto handle-visibility></websocket-component>
 		<script>
 			var ws_element = document.getElementById('websocket');
 

diff --git a/test/basic-test.html b/test/basic-test.html
@@ -12,28 +12,28 @@
   <body>
 
     <test-fixture id="websocketComponentWithoutURL">
-			<template>
-				<websocket-component></websocket-component>
-			</template>
-		</test-fixture>
-
-		<test-fixture id="websocketComponentWithURL">
-			<template>
-				<websocket-component url="ws://echo.websocket.org"></websocket-component>
-			</template>
-		</test-fixture>
-
-		<test-fixture id="websocketComponentWithActiveConnection">
-			<template>
-				<websocket-component auto url="ws://echo.websocket.org"></websocket-component>
-			</template>
-		</test-fixture>
+		<template>
+			<websocket-component></websocket-component>
+		</template>
+	</test-fixture>
+
+	<test-fixture id="websocketComponentWithURL">
+		<template>
+			<websocket-component url="ws://echo.websocket.org"></websocket-component>
+		</template>
+	</test-fixture>
+
+	<test-fixture id="websocketComponentWithActiveConnection">
+		<template>
+			<websocket-component auto url="ws://echo.websocket.org"></websocket-component>
+		</template>
+	</test-fixture>
 
     <script>
 		var websocketElementWithoutURL;
 		var websocketElementWithURL;
 		var websocketElementWithActiveConnection;
-		
+
 		var ws;
 
 		setup(function() {
@@ -50,7 +50,7 @@
 			websocketElementWithURL = fixture("websocketComponentWithURL");
 			websocketElementWithActiveConnection = fixture("websocketComponentWithActiveConnection");
 		});
-		
+
 		teardown(function() {
 			window.WebSocket.restore();
 		});

diff --git a/websocket-component.html b/websocket-component.html
@@ -5,7 +5,7 @@
 
 Example:
 
-    <websocket-component auto url="wss://echo.websocket.org"></websocket-component>
+    <websocket-component auto handle-visibility url="wss://echo.websocket.org"></websocket-component>
 
 @element websocket-component
 @demo demo/index.html
@@ -55,6 +55,13 @@
 					value: false,
 					observer: '_autoChange'
 				},
+				/**
+				* If this boolean is set, the websocket will automatically close and reopen when the tab/page is out of focus and focussed again respectively
+				*/
+				handleVisibility: {
+					type: Boolean,
+					value: false,
+				},
 				_ws: {
 					type: Object,
 					observer: '_wsChange'
@@ -63,6 +70,11 @@
 			observers: [
 				'_computeStatus(_ws.readyState)'
 			],
+			ready: function () {
+				if (this.handleVisibility && typeof document.hidden !== 'undefined') {
+					document.addEventListener('visibilitychange', this._handleVisibilityChange.bind(this), false);
+				}
+			},
 			/**
 			* Open the connection manually. May throw errors when already connected or no url is specified.
 			*/
@@ -137,6 +149,13 @@
 				if(!this._ws) {
 					this._computeStatus(undefined);
 				}
+			},
+			_handleVisibilityChange() {
+				if (document.hidden) {
+					this.close();
+				} else {
+					this.open();
+				}
 			}
 		});
 	</script>