HTML5简单入门系列（五）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

本篇将讲述HTML5的服务器发送事件（server-sent event）

Server-Sent 事件

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

以前的做法是网页不断的询问（向服务器发送请求）是否有可用的更新。通过服务器反馈之后，获得更新。

轮训方案

我们使用上篇HTML5简单入门系列（四）web worker的技术简单实现一下该轮训方案，主动向服务器询问是否有更新。

由于web worker不能访问document等对象，是不能和jQuery连用的，这里我们实现一个简单的js原生ajax来实现向服务器发送请求。

1、新建一个WebForm页面，作为ajax请求的后端，代码很简单，只是返回当前时间即可，如下

protected void Page_Load(object sender, EventArgs e)
{
try
{
Response.Write("data:" + DateTime.Now);
Response.Flush();
}
catch(Exception ee)
{
}
}

ps：这里我将webform的前台页面内容清空了，否则会同时返回页面内容。

2、按照web worker的使用方法，我们新建外部js和主线程html页面（和上篇示例中基本一致），代码如下：

webworker2.js

onmessage = function (event) {
ajaxFunction("WebForm2.aspx");
}function ajaxFunction(url) {
var xmlHttp;
var resText;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest(); // 实例化对象
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
postMessage(xmlHttp.responseText);
}
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

当web worker接收到主线程启动的消息后，向webform发起请求。在XMLHTTPRequest的readystatechange事件中，服务器成功（200）返回后则postMessage回主线程更新页面。

webworker2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
web worker实时时间：<div id="workerTime"></div>
<br />
主线程获取当前时间：<div id="curTime"></div>
<button onclick="mainthread()">主线程获取时间</button>
<script>
var interval;
if (typeof Worker != undefined) {
var worker = new Worker("webworker2.js");
worker.onmessage = function (event)
{
document.getElementById("workerTime").textContent = event.data;
}
interval = setInterval('worker.postMessage()', 1000);
} function mainthread() {
document.getElementById("curTime").textContent = new Date();
}
function stop() {
clearInterval(interval);
worker.terminate();
}
setTimeout(stop, 60000);//60秒之后清理interval
</script>
</body>
</html>

这里轮训时间，就是interval = setInterval('worker.postMessage()', 1000); 根据需要适当调整。

这是之前常用的轮训服务方案，而且我们接住web worker实现了多线程轮训。

HTML5 EventSource

再看看HTML5提供给我们的方案。

1、新建一个webform页面，用来充当服务器的数据更新。代码如下：

protected void Page_Load(object sender, EventArgs e)
{
try
{
Response.ContentType = "text/event-stream";
Response.CacheControl = "no-cache";
Response.Write("data:" + DateTime.Now);
Response.Flush();
}
catch(Exception ee)
{
}
}

注意：这里webform的前台内容依然存在，而上边轮训服务中我将其清空了。

2、新建一个html页面，我们在该页面上实现主动数据更新。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="result"></div>
<script>
if (typeof EventSource != undefined) {
var source = new EventSource("WebForm1.aspx");
source.onmessage = function (event) {
document.getElementById("result").innerHTML += event.type + ":" + event.data + "<br />";
}
source.onerror = function (event) {
document.getElementById("result").innerHTML += event.type + "<br />";
}
}
else {
document.getElementById("result").innerHTML = "no support EventSource";
}
</script>
</body>
</html>