注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

isblog主页

或许不一定要做得最多,但一定要做得最好! 能力就是一种财富,积累越多,就越体现你

 
 
 

日志

 
 

HTML5开发:实战网页推送更新机制  

2012-07-26 09:04:18|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
2012-03-21 09:18:47  来源:e800  作者:Vivian 编译  编辑:王鲲鹏  
HTML5服务器发送事件模式可以让你将实时数据更新从服务器推入浏览器。在这篇教程里,我们将了解这一过程,用EventSource对象处理接收的数据并将其写入页面。我们将在客户端使用HTML5和JavaScript,而在服务器端则使用PHP。

适用firefox浏览器!

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

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

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

创建一个HTML5页面

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

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

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

<div id="serverData">Hereis where the server sent data will appear</div>

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

向页面添加脚本

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

<scripttype="text/javascript">

//functions here

</script>

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

//check for browsersupport

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

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

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

//detect message receipt

eSource.onmessage =function(event) {

//write thereceived data to the page

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

};

}

else {

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

}

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

创建一个服务器端脚本

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

<?php

//streaming code

?>

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

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

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

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

//generate randomnumber for demonstration

$new_data = rand(0,1000);

//echo the new number

echo "data: Newrandom number: $new_data";

flush();

出于演示服务器发送事件的目的,我们每次都只在脚本发送更新的时候生成了一个新的随机号码。这段代码首先将一个01000之间的随机新号码作为变量保存。然后它会在文本“data”之后重复这个新号码和一些文本,必须将文本“data:”列入脚本中使其正常运行。最后,脚本会将其发送给浏览器。

更新和测试

你要在服务器上运行这些脚本,看看它们是否能正常运行。上传你的HTML页面和PHP脚本到相同目录。浏览页面,看是否出现更新。

结论

在这篇教程里,我们利用HTML5JavaScriptPHP执行了基本的服务器发送事件的操作。在我们的示例中,在我们示例的服务器端脚本中,我们简单生成了随机数字,但是在你自己的项目中,你可以执行其他服务器端进程,如从不同来源获取数据,为用户发送最新信息而不需要用户浏览器每次都发送更新。

转自:http://www.e800.com.cn/articles/2012/0321/505410.shtml


  评论这张
 
阅读(525)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017