HTML5技术

HTML5 基础 - 彼岸时光(12)

字号+ 作者:H5之家 来源:H5之家 2016-03-08 17:00 我要评论( )

1 if ( typeof (w) == 'undefined' ){ 2 w = new Worker('html5/setworkers.js' ); 3 } 然后就可以从 Web Worker 发生和接收消息了。 再 向 Web Worker 添加一个 "onmessage" 事件监听器: 1 w.onmessage = functio

1 if(typeof(w) == 'undefined'){ 2 w = new Worker('html5/setworkers.js'); 3 }

  然后就可以从 Web Worker 发生和接收消息了。

  再向 Web Worker 添加一个 "onmessage" 事件监听器:

1 w.onmessage = function(event){ 2 document.getElementById('result').innerHTML = event.data; 3 };

  当 Web Worker 传递消息时,会执行事件监听器中的代码,event.data 中存有来自 event.data 的数据。

  (4)、终止 Web Worker 

  当创建 Web Worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

  如需终止 web worker,并释放浏览器/计算机资源,需要使用 terminate() 方法:

1 function stopWorker(){ 2 w.terminate(); 3 }

  (5)、Web Workers 和 DOM

  Web Worker 的基本原理就是在当前 JS 的主线程中,使用 Worker 类加载一个 JS 文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的 API:postMessage,onmessage。PostMessage API 用于将一条消息放入到消息队列中,可以向 HTML 页面传回一段消息。onmessage 属性指定当触发消息时运行脚本。

  由于 Web Worker 位于外部文件中,所以它们无法访问下例 JS 对象:window 对象、document 对象、parent 对象。

  虽然 Web Worker 看着如此牛逼,但是也具有局限性,不能访问 DOM,不能跨域加载 JS。Web Worker API 也非常少,几乎都能数的过来,比如可以使用 XMLHttpRequest 发送 Ajax 请求,可以使用 setTimeout()/setInterval 和 clearTimeout()/setInterval(),还可以访问 navigator 的部分属性。

10、HTML5 服务器发送事件

  HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。

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

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

  以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。

  通过服务器发送事件,更新能够自动到达。

  比如:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

  除了 IE 之外,所有主流浏览器均支持服务器发送事件。

  (2)、接收 Server-Sent 事件通知

  EventSource 对象用于接收服务器发送事件通知:

1 var source = new EventSource("html5/getsse.php"); 2 source.onmessage = function(event){ 3 document.getElementById("result").innerHTML += event.data + "<br>"; 4 };

  代码解析:

    ①、创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL,在上面的例子中是:"html5/getsse.php"。

    ②、每接收到一次更新,就会发生 onmessage 事件。

    ③:当 onmessage 事件发生时,把已接收的数据插入 id 为 "result" 的元素中。

  (3)、检测 Server-Sent 事件支持

  可以使用下面的代码来检测浏览器是否支持服务器发送事件:

1 if(typeof(EventSource) !== "undefined"){ 2 var source = new EventSource("html5/getsse.php"); 3 } 4 else{ 5 document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 server-sent 事件..."; 6 }

  这一段代码并不是必要的,在调试程序时,可以在 IE 中查看效果。

  (4)、服务器端代码实例

这篇文章中了解更多关于 WAMP 配置的知识。

  有了本地服务器之后,还需要能够发送数据更新的程序,比如 PHP 和 Node.js。

  PHP 即超文本预处理器,是一种通用开源脚步语言,是用于创建动态交互性站点的强有力的服务器端脚本语言。

  JavaScript 是一种运行在浏览器的脚本,简单,轻巧,易于编辑,而 Node.js 可以说就是运行在服务器端的 JavaScript,Node.js 是一个基于Chrome JavaScript 运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,Node.js 使用事件驱动、非阻塞I/O 模型而得以轻量和高效,他是基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。Node.js 对一些特殊用例进行了优化,提供了替代的 API,使得 V8 在非浏览器环境下运行得更好。

  服务器端事件流的语法也很简单,把 "Content-Type" 报头设置为 "text/event-stream",就可以发送事件流了。

  下面是用于服务器端端的 PHP 代码:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • vue全局配置----小白基础篇 - 星光笔

    vue全局配置----小白基础篇 - 星光笔

    2017-04-28 08:04

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

网友点评
a