实战：用下列代码创建HTML5开发的页面

原创

9ria 2014-01-01 11:18:05 博主文章分类：娱乐游戏 ©著作权

文章标签 HTML5开发 HTML5开发环境 HTML5开发教程 文章分类 服务器

©著作权归作者所有：来自51CTO博客作者9ria的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5服务器发送事件模式可以让你将实时数据更新从服务器推入浏览器。在这篇教程里，我们将了解这一过程，用EventSource对象处理接收的数据并将其写入页面。我们将在客户端使用HTML5和JavaScript，而在服务器端则使用PHP。

　　【e800编译】HTML5开发的服务器发送事件模式可以让你将实时数据更新从服务器推入浏览器。

　　在这篇教程里，我们将了解这一过程，用EventSource对象处理接收的数据并将其写入页面。我们将在客户端使用HTML5和JavaScript，而在服务器端则使用PHP。

　　在现有模式下，如Ajax，网页中的代码会持续询问服务器是否要提供新数据，而客户端则负责要对这一信息发出请求。有了服务器发送的请求，你就可以把数据导出服务器，这样就可以从那儿推出更新，而不需要客户端代码不停对其发出请求。一旦页面发出服务器发送事件，服务器脚本就会持续发送更新。你的JavaScript代码会在接收到新数据的时候将其写入页面。

　　创建一个HTML5页面

　　用下列代码创建你的HTML5页面：

　　添加一个要素显示服务器发送的数据

　　我们要在一个专用页面要素里显示从服务器接收到的数据，所以请将下列代码添加到你的页面：

Hereis where the serversent data will appear

　　你可以在要素中放置任何你喜欢的内容，只要它具备ID属性，因为你要能在脚本中识别出它来。占位符文本应该只在页面第一次加载的时候出现，但是在脚本运行时消失。

　　向页面添加脚本

　　由于你希望这一功能继续接收和处理更新，所以我们要在页面主体部分添加脚本。当然，你自己的页面或许是在用户互动上执行功能，但是就此代码演示而言，需要我们将下列脚本添加到页面末端，在closing body标签前：

//functions here

　　该脚本会在浏览器安排页面的的时候执行，所以服务器发送的事件会直接被发起。下一步是将JavaScript代码添加到脚本部分：

//check for browsersupport

if(typeof(EventSource)!=="undefined"){

//create an object, passingitthe name and location of the server side script

var eSource =newEventSource("send_sse.php");

//detect message receipt

eSource.onmessage=function(event) {

//write thereceived data tothe page

document.getElementById("serverData").innerHTML=event.data;

};

}

else {

document.getElementById("serverData").innerHTML="Whoops!Yourbrowser doesn't receive server-sent events.";

}

　　该脚本首先是检查浏览器是否支持EventSource模式。如果不支持，就将一个报错信息写入服务器数据页面要素。如果浏览器支持此模式，那么服务器发送的进程就开始。首先，脚本会创建一个EventSource类的对象，再将要提供数据流更新的服务器端脚本的URL传给它。而后，脚本会创建一个事件收听器功能在EventSource对象接收到服务器更新数据时进行收听。这个时候，脚本会将一个引用送到更新页码要素并为其写入新数据。

　　创建一个服务器端脚本

　　我们现在需要创建服务器端PHP脚本以便向页面发送更新。创建一个新文件并将其保存为send_sse.php文件或是其他自选名称，只要你是修改了上面JavaScriptEventSource代码来反映正确名称和所在存储目录。在你的PHP文件中输入如下代码：

//streaming code

　　按照下面的方式设置标头，开始你的PHP脚本：

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

header('Cache-Control:no-cache');

　　这个代码从脚本到流数据都进行了设置脚本，可以防止缓冲的发生。将下列代码加入脚本，放在closing php标签前面：

//generate randomnumber fordemonstration

$new_data = rand(0,1000);

//echo the new number

echo "data: Newrandomnumber: $new_data";

flush();