您好!欢迎来到渥瑞达北美h5/html5培训 返回大首页 |视频下载 | 联系我们 | 网站地图
h5培训 h5培训就业保障

H5服务器发送事件

 WH5服务器发送事件教程视频


 

 
 
1、HTML5 办事器发送事务

  HTML5 办事器发送事务许可网页获得来自办事器的更新。

2、Server-Sent 事务 - 单向新闻通报

  Server-Sent 事务指的是网页主动获取来自办事器的更新。以前也可能做到这一点,条件是网页不得不讯问是否有可用的更新。经由过程办事器发送事务,更新可以或许主动达到。例子:Facebook/Twitter 更新、估价更新、新的博文、赛事效果等。

3、吸收 Server-Sent 事务通知

  EventSource 工具用于吸收办事器发送事务通知:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>获取办事端更新数据</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined"){
    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event){
       document.getElementById("result").innerHTML+=event.data + "<br>";
    };
}else{
    document.getElementById("result").innerHTML="歉仄,你的阅读器不支撑 server-sent 事务...";
}
</script>
</body>
</html>



实例剖析:

  (1)、建立一个新的 EventSource 工具,然后划定发送更新的页面的 URL(本例中是 "demo_sse.php")

  (2)、每吸收到一次更新,就会产生 onmessage 事务。

  (3)、当 onmessage 事务产生时,把已吸收的数据推入 id 为 "result" 的元素中。


4、检测 Server-Sent 事务支撑

  以下实例,我们编写了一段分外的代码来检测办事器发送事务的阅读器支撑情形:

if(typeof(EventSource)!=="undefined"){
   // 阅读器支撑 Server-Sent
   // 一些代码.....
}else{
   // 阅读器不支撑 Server-Sent..
}


5、办事器端代码实例

  为了让上面的例子可以运行,还须要可以或许发送数据更新的办事器(好比 PHP 和 ASP)。办事器端事务流的语法长短常简朴的。把 "Content-Type" 报头设置为 "text/event-stream"。如今,您可以最先发送事务流了。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>


代码诠释:

把报头 "Content-Type" 设置为 "text/event-stream",划定差池页面举行缓存,输动身送日期(始终以 "data: " 开首),向网页刷新输出数据


6、EventSource 工具

  在上面的例子中,我们应用 onmessage 事务来获作废息。不外还可以应用其他事务:

   onopen:当通往办事器的毗连被打开

   onmessage:当吸收到新闻

   onerror:当产生毛病

相关推荐

网站地图 联系我们