H5 EventSource 实现web页面推送功能demo

转载于 2017-10-11 09:42:00 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MrZouJian/p/7649040.html

文章标签：

#php

本文介绍了一个使用H5EventSource实现web页面实时推送功能的示例。通过监听服务器发送的数据更新通知，可以实时地将服务器端的消息推送到客户端页面上。此示例包含完整的JavaScript代码，演示了如何建立连接、处理打开、错误和消息事件。

/**
 * H5 EventSource 实现web页面推送功能demo
 */

var serverData,statusDiv;
var SERVER_URL = "index.php";  //servers Url Adress

window.onload = function(){
	/*
	<div id="statusDiv"></div>
    <div id="serverData"></div>
	*/
    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;
}

转载于:https://www.cnblogs.com/MrZouJian/p/7649040.html