I have an HTML document and a server-side PHP script that I am trying to get to perform a server-send event with. But it just does not work -- nothing happens on page load.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
function BlockElasticScroll(event) {
event.preventDefault() ;
}
</script>
</head>
<body ontouchmove="BlockElasticScroll(event);">
<h1>My Header</h1>
<h2>Sub-Heading</h2>
<div id="pool">250.00</div><div id="non-compat">Sorry but your phone will not work with this app.</div>
<script type="text/javascript">
//check for browser support
if(typeof(EventSource) !== "undefined") {
//create an object, passing it the name and location of the server side script
var source = new EventSource('php/send_sse.php');
//detect message receipt
source.onmessage = function(event) {
//write the received data to the page
document.getElementById('pool').innerHTML = event.data;
};
}
else {
document.getElementById('pool').style.display = 'none';
document.getElementById('non-compat').style.display = 'block';
}
</script>
</body>
</html>
PHP Script (send_sse.php -- works when I render it in a web browser)
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "data: 500.00";
flush();
?>
Some of my troubleshooting
I put a hook into my PHP script to fire off a mail message back to myself. I received the email so I know the HTML doc & javascript is successfully calling the PHP script. For some reason, the PHP script does not call back to the HTML doc.