《初级前端1.22》 HTML5 服务器推送事件SSE（Server-sent Events）

Server-Sent 事件 - 单向消息传递，指的是网页自动获取来自服务器的更新。

 

详细的实现： http://www.cnblogs.com/woodk/articles/5189851.html

 

SSE实现：

SSE中文文档：https://developer.mozilla.org/zh-CN/docs/Server-sent_events/EventSource

使用服务器发送事件： https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sse</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <h1>Status:</h1>
    <div id="statusDiv"></div>
    <h1>Server Data:</h1>
    <div id="serverData"></div>
</body>
</html>

index.php

<?php 

header('Content-Type:text/event-stream');

for($i=0; $i<100; $i++){
    date_default_timezone_set("Asia/Shanghai");
    echo "event:newDate\n";
    echo 'data:'.date('Y-m-d H:i:s');
    echo "\n\n";
    ob_flush();
    flush();
    sleep(1);
}

?>

index.js

var serverData, statusDiv;
var SERVER_URL = "index.php";

window.onload = function(){
    serverData = document.getElementById("serverData");
    statusDiv = document.getElementById("statusDiv");
    startlistenServer();
}

function startlistenServer(){
    statusDiv.innerHTML = "start Connect Server...";
    var es = new EventSource(SERVER_URL);
    es.addEventListener("newDate", newDateHandler);
    es.onopen = openHandler;
    es.onerror = errorHandler;
    es.onmessage = messageHandler;

}

function openHandler(e){
    statusDiv.innerHTML = "Server open";
}

function errorHandler(e){
    statusDiv.innerHTML = "Error";
}

function messageHandler(e){
    serverData.innerHTML = e.data;
}

function newDateHandler(e){
    serverData.innerHTML = e.data;
}

 

运行index.html，结果：

时间不断刷新...

posted @ 2016-02-16 10:59  暖风叔叔  阅读(1172)  评论(0)    收藏  举报