HTML5学习笔记05

一、HTML5 Web Workers

1、定义

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

2、一个实例

<!DOCTYPE html>
<html>
<body>
    <p>计数: <output id="result"></output></p>
    <button onclick="startWorker()">开始 Worker</button> 
    <button onclick="stopWorker()">停止 Worker</button>
    <br /><br />

<script>
var w;

    function startWorker()
    {
    if(typeof(Worker)!=="undefined")
      {
      if(typeof(w)=="undefined")
      {
      w=new Worker("/example/html5/demo_workers.js");
      }
      w.onmessage = function (event) {
        document.getElementById("result").innerHTML=event.data;
        };
      }
    else
      {
      document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
      }
    }

    function stopWorker()
    { 
        w.terminate();
    }
</script>

</body>
</html>

在创建 web worker 之前，请检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

接着创建web worker文件

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

  • window 对象
  • document 对象
  • parent 对象

二、HTML5服务器发送事件

1、Server-Sent事件-单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

2、实例

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br />";
  };

例子解释：

  • 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
  • 每接收到一次更新，就会发生 onmessage 事件
  • 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

3、检测Server-Sent事件支持

if(typeof(EventSource)!=="undefined")
  {
  // Yes! Server-sent events support!
  // Some code.....
  }
else
  {
  // Sorry! No server-sent events support..
  }

4、服务器端代码实例

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
  • 把报头 "Content-Type" 设置为 "text/event-stream"
  • 规定不对页面进行缓存
  • 输出发送日期（始终以 "data: " 开头）
  • 向网页刷新输出数据

5、EventSource对象

除了使用 onmessage 事件来获取消息，还可以使用其他事件：

事件描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当错误发生
posted @ 2014-05-14 20:30  weddy.zheng  阅读(127)  评论(0)    收藏  举报