Html服务器推送事件

最新推荐文章于 2023-09-18 09:08:56 发布

qq_1913284695

最新推荐文章于 2023-09-18 09:08:56 发布

阅读量645

点赞数

分类专栏： html5基础

html5基础专栏收录该内容

68 篇文章 0 订阅

订阅专栏

comet技术（基于 HTTP 长连接的“服务器推”技术）：前端发一个ajax,服务端不释放，不停地向前端发数据。说白了，还是前端主动发请求，服务器被动。

以下，服务器为主动方，向前段发请求的技术。

连接：http://www.runoob.com/html/html5-serversentevents.html

html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="index.js"></script>
</head>
<body>
    <h1>Status:</h1>
    <div id="statusDiv"></div>
    <h1>Server Data:</h1>
    <div id="serverData"></div>
</body>
</html>

js:

/**
 * Created by wwtliu on 14/8/18.
 */

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;
}

php服务端

<?php
/**
 * Created by PhpStorm.
 * User: wwtliu
 * Date: 14/8/18
 * Time: 下午4:39
 */

header('Content-Type:text/event-stream');  
 
getNews();
function getNews(){
 	echo "event:newDate\n";  
    echo 'data:'.date('Y-m-d H-i-s');  
    echo "\n\n";  
    flush();  
 } ?>