Skip to content

Commit c193ede

Browse files
samduttonsamdutton
committed
Server-Sent Events (EventSource)
1 parent d5c70e2 commit c193ede

File tree

13 files changed

+564
-12
lines changed

13 files changed

+564
-12
lines changed

‎devicemotion/.DS_Store

6 KB
Binary file not shown.

‎devicemotion/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="keywords" content="Sam Dutton, HTML5, JavaScript" />
5+
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
8+
<base target="_blank">
9+
<title>Device Motion</title>
10+
<link rel="stylesheet" href="../css/main.css" />
11+
</head>
12+
<body>
13+
<div id="container">
14+
15+
<h1><a href="../index.html" title="simpl.info home page">simpl.info</a> Device Motion</h1>
16+
17+
<p>More information about Device Motion and Device Orientation on <a href="http://www.html5rocks.com/en/tutorials/device/orientation/" title="HTML5 Rocks tutorial: This End Up: Using Device Orientation">HTML5 Rocks</a>.</p>
18+
19+
<p>You may also want to try out the <a href="/deviceorientation" title="Device Orientation demo on simpl.info">Device Orientation demo</a>.</p>
20+
21+
<p id="data"></p>
22+
23+
<script src="js/main.js"></script>
24+
25+
<a href="https://github.com/samdutton/simpl/blob/master/devicemotion/index.html" title="View source for this page on github" id="viewSource">View source on github</a>
26+
</div>
27+
<script src="../js/lib/ga.js"></script>
28+
</body>
29+
</html>

‎devicemotion/js/main.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var dataDiv = document.querySelector('#data');
2+
function log(message){
3+
dataDiv.innerHTML = message + '<br />' + dataDiv.innerHTML;
4+
}
5+
6+
function handleDeviceMotion(e) {
7+
var x = e.acceleration.x;
8+
var y = e.acceleration.y;
9+
var z = e.acceleration.z;
10+
log('Acceleration: ' + x + ', ' + y + ', ' + z);
11+
12+
var xg = e.accelerationIncludingGravity.x;
13+
var yg = e.accelerationIncludingGravity.y;
14+
var zg = e.accelerationIncludingGravity.z;
15+
log('Acceleration including gravity: ' + xg + ', ' + yg + ', ' + zg);
16+
17+
var alpha = e.rotationRate.alpha;
18+
var beta = e.rotationRate.beta;
19+
var gamma = e.rotationRate.gamma;
20+
log('Rotation rate: ' + alpha + ', ' + beta + ', ' + gamma);
21+
22+
log('Refresh interval: ' + e.interval);
23+
}
24+
25+
if (window.DeviceMotionEvent) {
26+
window.ondevicemotion = handleDeviceMotion;
27+
} else {
28+
log('Device Motion not supported.');
29+
}
30+

‎deviceorientation/index.html

+2-11
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,14 @@
2525
<div id="container">
2626
<h1><a href="../index.html" title="simpl.info home page">simpl.info</a> Device Orientation</h1>
2727

28+
<p id='isAvailable'></p>
2829
<p>Tilting and rotating your laptop or device will transform the following image if Device Orientation is available.</p>
2930
<img src="html5-logo-white.svg" alt="The HTML5 logo" id="orientee" />
31+
<script src="js/main.js"></script>
3032

3133
<a href="https://github.com/samdutton/simpl/blob/master/deviceorientation/index.html" title="View source for this page on github" id="viewSource">View source on github</a>
3234
</div>
3335

34-
<script>
35-
(function() {
36-
var logoElement = document.getElementById('orientee');
37-
window.addEventListener('deviceorientation', function(event) {
38-
var transform = 'rotate(' + event.gamma + 'deg) rotate3d(1, 0, 0, ' + event.beta + 'deg)'
39-
logoElement.style.webkitTransform = transform;
40-
logoElement.style.transform = transform;
41-
}, true);
42-
})();
43-
</script>
44-
4536
<script src="../js/lib/ga.js"></script>
4637
</body>
4738
</html>

‎deviceorientation/js/main.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var logoElement = document.getElementById('orientee');
2+
function handleDeviceOrientation(e) {
3+
var transform = 'rotate(' + e.gamma + 'deg) rotate3d(1, 0, 0, ' + e.beta + 'deg)';
4+
logoElement.style.webkitTransform = transform;
5+
logoElement.style.transform = transform;
6+
}
7+
8+
if (window.DeviceOrientationEvent) {
9+
window.ondeviceorientation = handleDeviceOrientation;
10+
} else {
11+
document.querySelector('p#isAvailable').innerHTML = 'Device Orientation is not available.';
12+
}
13+

‎eventsource/.DS_Store

6 KB
Binary file not shown.

‎eventsource/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="keywords" content="Sam Dutton, HTML5, JavaScript" />
5+
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
8+
<base target="_blank">
9+
<title>Event Source</title>
10+
<link rel="stylesheet" href="../css/main.css" />
11+
</head>
12+
<body>
13+
<div id="container">
14+
<h1><a href="../index.html" title="simpl.info home page">simpl.info</a> Event Source</h1>
15+
16+
17+
<p>The connection with the server is kept open: take a look at your browser's dev tools network panel.</p>
18+
<p>More information about EventSource (aka Server-Sent Events) in Eric Bidelman's <a href="http://www.html5rocks.com/en/tutorials/eventsource/basics/" title="HMTL5 Rocks article by Eric Bidelman: Stream Updates with Server-Sent Events">HTML5 Rocks tutorial</a>.</p>
19+
20+
<p id='data'></p>
21+
<script src="js/main.js"></script>
22+
23+
<a href="https://github.com/samdutton/simpl/blob/master/eventsource/index.html" title="View source for this page on github" id="viewSource">View source on github</a>
24+
</div>
25+
26+
<script src="../js/lib/ga.js"></script>
27+
</body>
28+
</html>

‎eventsource/index.php

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
header('Content-Type: text/event-stream');
3+
header('Cache-Control: no-cache'); // prevent caching of event data
4+
5+
do {
6+
7+
$id = time().PHP_EOL;
8+
$data = 'Server time: '.date('h:i:s', time()).PHP_EOL;
9+
10+
echo "id: $id";
11+
echo "data: $data";
12+
echo PHP_EOL;
13+
14+
ob_flush();
15+
flush();
16+
17+
sleep(5);
18+
19+
} while (true);
20+
21+
// The while loop keeps the connection open.
22+
// Without this, the browser polls roughly every three seconds.
23+
// To see this in action, take a look at your browser's dev tools network panel
24+
// - if you remove the while loop, a new request is made every five seconds.
25+
26+
?>

‎eventsource/js/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var dataDiv = document.querySelector('#data');
2+
function log(message){
3+
dataDiv.innerHTML = message + '<br />' + dataDiv.innerHTML;
4+
}
5+
6+
var source = new EventSource('index.php');
7+
8+
source.onmessage = function(e) {
9+
log(e.data);
10+
};

‎index.html

+4
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ <h1>simpl.info</h1>
5252
<a href="rtcdatachannel" title="RTCDataChannel example">Data channels</a>
5353
<a href="datalist" title="Input datalist element example">&lt;datalist&gt;</a>
5454
<a href="details" title="Details/summary element example">&lt;details&gt; and &lt;summary&gt;</a>
55+
<a href="devicemotion" title="Device Motion example">Device Motion</a>
5556
<a href="deviceorientation" title="Device Orientation example">Device Orientation</a>
57+
<a href="eventsource" title="EventSource (Server-Sent Events) example">EventSource (aka Server-Sent Events)</a>
5658
<a href="localstorage" title="Fieldset example">Fieldset (localStorage example)</a>
5759
<a href="filesystem" title="FileSystem example">FileSystem</a>
5860
<a href="filesystem/blob" title="FileSystem example using the Blob API">FileSystem using Blob</a>
@@ -80,12 +82,14 @@ <h1>simpl.info</h1>
8082
<a href="rtcdatachannel" title="RTCDataChannel">RTCDataChannel (WebRTC)</a>
8183
<a href="rtcpeerconnection" title="RTCPeerConnection">RTCPeerConnection (WebRTC)</a>
8284
<a href="screencapture" title="Screen capture example">Screen capture (getUserMedia + RTCPeerConnection)</a>
85+
<a href="eventsource" title="EventSource (Server-Sent Events) example">Server-Sent Events (aka EventSource)</a>
8386
<a href="sessionstorage" title="sessionStorage example">sessionStorage</a>
8487
<a href="svg" title="SVG example">SVG</a>
8588
<a href="track" title="Track element">&lt;track&gt; with &lt;video&gt;</a>
8689
<a href="track/audio" title="Track element">&lt;track&gt; with &lt;audio&gt;</a>
8790
<a href="useragent" title="User agent example">user agent</a>
8891
<a href="video" title="Video element">&lt;video&gt; (with autoplay)</a>
92+
<a href="videoalpha" title="Video with alpha transparency">&lt;video&gt; (with alpha transparency)</a>
8993
<a href="video/scripted.html" title="Video with scripted playback">&lt;video&gt; (with scripted playback)</a>
9094
<a href="longvideo" title="Long video example (~380MB)">long video (~380MB)</a>
9195
<a href="videomedia" title="Video media query attribute">video with src media query</a>

‎js/.DS_Store

0 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)