20 服务器推送事件-福州大学城社区

20 服务器推送事件网页前端/web开发工程师

/ 福清师大环境科学与工程学院网页前端/web开发工程师 / 2016-08-08

一、介绍

二、实现

示例：

<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2016/8/6
* Time: 16:12
*/

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

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

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="index_03.js"></script>
 </head>
 <body>
 <h1> Status:</h1>
 <div id="StatusDiv"></div>
 <h1>Server Data:</h1>
 <div id="ServerData"></div>
 
 </body>
 </html>

/**
  * Created by Administrator on 2016/8/6.
  */
 var ServerData,StatusDiv;
 var SERVER_URL="index_01.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;
 }

Act师大校友联盟

1914篇文章

大家好，我是小明，请多多指教！

20 服务器推送事件网页前端/web开发工程师

最近内容