模板核心代码:
<!DOCTYPE html> <html> <body> <h1>HTML5实现服务器推送</h1> <div id="rate"></div> <script> // 1 判断当前浏览器是否支持html服务器推送server-send事件 if(typeof(EventSource)!=="undefined") { // 2:定义数据来源的服务器url地址 var URL = "/getData.php"; // 3: 创建一个新的 EventSource 对象,然后指定发送更新的页面的 URL var source=new EventSource(URL); // 4 : 每接收到一次更新,就会发生 onmessage 事件 source.onmessage=function(event) { // 5: 若触发onmessage函数的时候, 把接收到的最新数据更新到 id 为 "rate" 的元素中 document.getElementById("rate").innerHTML+=event.data + "<br>"; }; } else { document.getElementById("rate").innerHTML="抱歉,您的浏览器不支持 server-sent 事件 ..."; } </script> </body> </html>
服务器端核心代码:
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('Y-m-d H:i:s', time()); // 此处可通过接口实时获取美元兑人民币实时汇率 $rate = '1:6.9384'; echo "data:北京时间:{$time} 当前美元兑人民币实时汇率是:{$rate} "; flush(); ?>