<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Server side Event</title>
		<link rel="icon" type="image/ico" href="/tests-favicon.ico"/>
		<style>
			body {
				max-width: 40em;
				margin: auto;
			}
		</style>
		<script>
			window.addEventListener('load', function () {
				var ul = document.querySelector('ul');
				
				var progressLi = document.createElement('li');
				var progress = document.createElement('progress');
				var progressTest = document.createElement('span');
				progressTest.style.marginLeft = '8px';
				progress.setAttribute('max', '100');
				progress.setAttribute('value', '0');
				progressLi.appendChild(progress);
				progressLi.appendChild(progressTest);
				ul.appendChild(progressLi);
				
				var evtSource = new EventSource('pusher.php');
				evtSource.addEventListener('progressBar', function (e) {
					progressTest.textContent = Math.floor(e.data) + '%';
					progress.setAttribute('value', e.data);
					progress.setAttribute('title', e.data);
				});
			});
		</script>
	</head>
	
	<body>
		<h1>Server-side events</h1>
		<p>
			In this demo, server pushes a random incrementing float value to client every second,
			and client side shows it using a progress bar (could be used to show an upload progress).
		</p>
		<ul id="sse">
		</ul>
	</body>
</html>
