中文 » 全国大学生软件创新大赛专栏

Metro Web应用开发中页面通信问题解决方法

Dawei Cheng 程大伟 (Intel) — Tue, 15 May 2012 12:20:13 +0000

最近在开发Win8应用，遇到Win8 native context和web context 通信的问题，这里将相应的方法分析一下。Win8的介绍和详细信息可以在MSDN上面获得，也可以参考本人介绍开发者预览版时的系列博客

Win8 应用开发介绍（一） Win8新特性\
Win8 应用开发介绍（二） Win8应用为王\
Win8 应用开发介绍（三） Win8开发者工具\
Win8 应用开发介绍（四） Win8应用开发步骤\
Win8 应用开发介绍（五） Win8硬件支持和安全性\
Win8 应用开发介绍（六） Win8伴你随行\

1. 问题描述

Win8可是使用HTML, JavaScript方式来开发Metro Style App。那么传统的HTML网页中，加载web端的JavaScript文件采用的代码方式仍然可以使用吗？如：

src=file:///****.html 或者src=http://****.html 是需要加载web context 的页面，在相应的html文件中可以自由加载remote URL的内容。

在页面中的关系图如下：

通信

现在的问题出现了，Web Context如何和Local Context通信了。Win8 IE全面支持了HTML5，在HTML5中可以使用HTML5 postMessage method在不通的页面中进行通信。

假设我们在Local Context中新建一个button，代码如下：

在JavaScript中，添加ZoomOut函数：

在Web Context中，添加receiveMessage(event) 参考代码如下：

function receiveMessage(event) { switch (event.data.method) { ...... case 'zoomout': var currentZoom = map.getZoom(); map.setView({ zoom: currentZoom - 1 }); break; } }

本篇完。
参考文章：http://alastaira.wordpress.com/2011/09/26/creating-a-windows-8-metro-slippy-map-application/

移动Web应用程序开发高性能JavaScript篇 (三) JavaScript 加载解析和部署

Dawei Cheng 程大伟 (Intel) — Thu, 10 May 2012 15:53:27 +0000

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。博文也分为三个大部分：

1. 众望所归的HTML5将主要介绍HTML5的前世今生，主要功能和API以及相关Demo，Demo的代码都可以在文章附件中下载到；

2. 高性能JavaScript将主要介绍如何让JavaScript更流畅，JavaScript debug和分析工具，可以说，没有JavaScript就不可能有互联网的今天，更不可能有移动互联网的明天，编写高性能的JavaScript至关重要；

3. 变化万千的CSS3将主要介绍如今异常强大的CSS3，结合HTML5编写动态的Web应用。熟练使用异常Fashion & Cool & 炫的CSS3将使Web应用增色不少。

本篇是高性能JavaScript介绍的第三篇，将给大家结合实例例子及分析工具介绍在加载JavaScript代码时，如何编程可以让Web应用或者网页更加高效。

相关文章

移动Web应用程序开发高性能JavaScript篇 (一) JavaScript 性能瓶颈

移动Web应用程序开发高性能JavaScript篇 (二) JavaScript 性能分析工具

加载JavaScript

当Browser在遇到
Hello world!

代码片段二

Script Example
Hello world!
<-- Example of recommend script positioning -->

很显然，代码片段二更高效。因为页面显示部分和JavaScript脚本没有直接的关系，所以完全可以先把界面渲染了再去load脚本。三个JS脚本加载时间我们可以从Chrome分析工具中获得，如下图所示：

将脚本成组加载

由于每个
代码片段二：

Script Example
Hello world!
<-- Example of recommended script positioning -->

两段代码运行后，分别用Chrome开发者工具里面的TimeLine进行分析结果如下图：代码片段二要更加高效。

动态加载脚本

文件对象模型（DOM）允许用户使用JavaScript创建HTML文档中几乎全部的元素和内容。
运行后使用TimeLine分析如下图所示：可以看出JavaScript的加载并没有阻塞UI页面。

XHR脚本

另外一种非阻塞方式加载脚本的方法就是将XMLHttpRequest（XHR）对象加入到页面中。这种方式首先需要创建一个XHR对象，然后下载JavaScript文件，再使用一个动态的
Refresh the page to see the counter increase.

Close the browser window, and try again, and the counter will continue.

运行后会显示：

当关掉网页甚至关掉浏览器之后，再次运行该网页，会发现数据已经存储，而且在上次关掉的基础上进行累加。如下图：

第二个例子展示如何使用Session Storage，代码如下：

运行后：

刷新网页数据会累加，但是关掉网页再打开，会发现数据从新开始，并没有记住上次的数据。

代码下载：地址

3. 总结

Web应用程序开发的HTML5篇介绍到此结束了。HTML5还有很多新的特性在这9篇文章中没有介绍到，如：Web Workers API, WebGL, Device API, Gestures, P2P Networking等，我会在接下来的High performance JavaScript系列和CSS3系列中进行补充。

本系列的全部文章：
相关文章：
移动Web应用程序开发 HTML5篇 (一) HTML5简介
 移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试
 移动Web应用程序开发 HTML5篇 (三) Canvas API
移动Web应用程序开发 HTML5篇 (四) 多媒体 API
移动Web应用程序开发 HTML5篇 (五) 地址位置 API
移动Web应用程序开发 HTML5篇 (六) 通信(Communication) API
移动Web应用程序开发 HTML5篇 (七) Web Sockets API
移动Web应用程序开发 HTML5篇 (八) Offline Web Appliactions

移动Web应用程序开发HTML5篇 (八) Offline Web Applications

Dawei Cheng 程大伟 (Intel) — Fri, 09 Mar 2012 13:16:50 +0000

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。

本篇是HTML5介绍的第八篇，主要介绍HTML5的离线应用Offline Web Applications）。

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

移动Web应用程序开发 HTML5篇 (六) 通信(Communication) API

移动Web应用程序开发 HTML5篇 (七) Web Sockets API

1. 离线应用（Offline Web Applications）介绍

离线应用也是HTML5引入的新的功能之一，当客户端处于离线状态时，浏览器可以加载之前预设的保存在Cache中的资源来实现Web应用的运行，这很多是用在离线Web游戏，连连看，拼图等小游戏，以及一些功能性的web应用中，如记账软件等可以不需要实时联网的应用。当然，需要联网的应用也可以写成离线应用，如Google的离线版Gmail，用户可以正常操作所有邮件，如回复邮件，归类邮件等等，只是这些要等有网络环境后，才会生效。

目前各大浏览器对离线应用的支持情况如下图：

2. 离线应用（Offline Web Applications）创建方法

一个简单的离线应用创建和运行流程如下图所示：

1. 在HTML Page中创建一个Manifest Attribute，如下图所示。这个Manifest Attribute是告诉浏览器，本应用有一个名叫a.manifest的文件。

2. 创建manifest文件，一个典型的cache manifest文件如下图所示。

CACHE MANIFEST后面跟的都是可以下载下来缓存的文件，

NETWORK 表明是需要联网的文件，不进行缓存，

FALLBACK 表明可以进行替代的文件，本例中，首先从网络端获取/app/ajax文件，如果没有获取到，则加载本地cache的default.html。

3. 检查是否在线，使用navigator.onLine这个函数来检测，如果是TRUE则在线，否则不在线。如下图所示：

4. 运行offline 应用，Offline应用在运行的时候会加载相应的Offline API, window.applicationCache.status函数可以准确判断在HTML5中Offline 应用运行过程中的详细情况，一共有以下六个状态：

window.applicationCache有一个update()函数，在运行的时候可以去update其状态。

3. 离线应用例子

这一节我们实现一个缓存地址位置的例子，本例中使用到了移动Web应用程序开发 HTML5篇 (五) 地址位置 API 这篇文章中的一些知识。先看一下运行效果

点击check for update,能够得到更新的地理位置信息。（上图可以得到目前所在位置的经纬度，不小心泄露了我家的地址：））。然后在开发者工具中使用离线模式，如下图所示：

刷新一下，在离线状态下，可以获取之前缓存下来的信息。

本例中的tracker.html 文件如下所示。设定Title，加载对应的脚本文件。

HTML5 Offline Application

Offline Example

Log

tracker.js中进行地理位置的获取和加载，主要函数如下：

/* * Track and report the current location */ var handlePositionUpdate = function(e) { var latitude = e.coords.latitude; var longitude = e.coords.longitude; log("Position update:", latitude, longitude); if(navigator.onLine) { uploadLocations(latitude, longitude); } storeLocation(latitude, longitude); }

tracker.manifest声明离线模式下加载的文件：

CACHE MANIFEST # r128 # JavaScript ./offline.js #./tracker.js ./log.js # stylesheets ./html5.css # images

整个应用代码下载地址：下载

本篇完，参考文献： Pro.HTML5 Programing

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

移动Web应用程序开发 HTML5篇 (六) 通信(Communication) API

移动Web应用程序开发 HTML5篇 (七) Web Sockets API

如何搜索HTML5移动应用：The Everything Project

Dawei Cheng 程大伟 (Intel) — Wed, 07 Mar 2012 13:42:18 +0000

在后PC时代我们面临的一大挑战是经常要在一大堆相互并不关联的应用中苦苦寻觅想要的应用。

和互联网不同，应用并没有通过链接相互联结起来(尽管其实可以做到)。现在的公司都在努力推出越来越多的应用，恨不得把你的整台手机都占领了，但他们都忘了为用户提供通往现有应用的窗口。你想用某个应用时是人工搜寻还是Google 搜索？你能立即判断要启动哪个应用吗？

解决这一难题的一个可能途径是：The Everything Project--应用的移动互联网版本的搜索引擎。（注：该everything.me链接只能通过手机浏览器访问）

The Everything Project目前是一个移动版网站，无论是iPhone, Android, Windows Phone或其它手机都可访问。不久它也会在各大平台上推出原生应用。

手机浏览器访问everything.me后，你会发现它的首页布有一个搜索框、变换的背景图、以及右侧的快捷入口（如图）。

每个不同的背景图都是一个推荐主题，如Everything Taylor Swift，点击以后会进入相关的搜索。所展示的主题会随人们的搜索趋势而变化。

右侧则是The Everything Project的垂直搜索入口，有社交、天气、食物、电影、购物、新闻、游戏等。

真正精彩的地方就在这看上去再普通不过的搜索框上。比如，搜索"Coldplay"。Google等搜索引擎所返回的搜索结果会是一长串的链接，而The Everything Project的返回结果则是与之相关的各种应用--不是应用商店可供下载安装的应用，或是你手机上已有的应用，而是一系列基于HTML5的可马上使用的相关网络应用。

接着，你可以点击其中的任意一款应用，如Wikipedia (Coldplay)，就会呈现相应的在Wikipedia里的关于Coldplay的内容。

The Everything Project收录了部分现成的HTML5应用，其它大部分应用则自己专门逐个定制。

"原生应用总是要比HTML5应用更好一点，但我们的系统出现以后，HTML5应用突然就变得可搜索了，这样，人们使用起来就会极为便利，因而也而具吸引力。" 联合创始人Ami Ben-David表示说。

The Everything Project是一个开放的应用平台，目前还处于测试阶段，正式发布后，任何一位开发者都可以把自己的HTML5应用加入进来。

注：文章来自36氪

移动Web应用程序开发HTML5篇 (七) Web Sockets API

Dawei Cheng 程大伟 (Intel) — Mon, 05 Mar 2012 09:04:15 +0000

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。

本篇是HTML5介绍的第七篇，主要介绍HTML5的Web Sockets API。

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

移动Web应用程序开发 HTML5篇 (六) 通信(Communication) API

介绍

Web Sockets API是HTML5的特性之一，可以通过一个Sockets实现在TCP协议层的全双工通信，Web Sockets目的是提供一个非常有效的通信工具，用来替代传统的Comet和Ajax长轮询操作。目前浏览器对其支持情况如下图：

Web Sockets通信原理

在开发Web应用的过程中，很多情况下需要实时更新数据，如股票操作和分析软件，机票酒店预订软件等等。一个实时HTTP请求的Web应用，其信息流程如下图所示：

目前比较常见的有两种解决方法： HTTP的方式和AJAX方式。他们的通信流程分别如下图所示：

左边是HTTP的方式，也是最早出现的通信方式，客户端发送HTTP Request通过Web Server请求数据库，将结果返回给客户端，但是这种方式在网络通信的过程中会阻碍客户端的UI线程，尤其在实时性要求比较高的场合，网络通信的时间长了以后会直接影响用户体验，于是就出现了AJAX。

右边是AJAX的方式，客户端需要HTTP Request的时候，发起一个JavaScript Call 调用AJAX Engine，由AJAX Engine在后台进行数据请求和处理，不阻碍UI线程，用户还可以和Web进行交互，服务器端数据Ready之后，将其返回给客户端进行UI更新。

对于实时性要求高的应用，利用AJAX技术发展出了长轮询操作(Polling)的技术，有很多代表如：Comet, Pushlets等等。长轮询操作的原理如下：

客户端发起一个HTTP Request，服务器端进行验证，验证通过之后，并不立刻返回数据，而是hold这个connection，当服务器端数据有更新的时候，将数据返回，返回之后客户端立刻再起一个HTTP Request从而实现实时数据更新。这种方式能够很好地实现应用数据的实时更新以及不阻碍UI线程，但是其很长时间有个HTTP connection在维持着，不仅对客户端造成很大的资源消耗，尤其对于流量和电池寿命都很有限的手机客户端，对服务器端也是非常大的挑战，没有一个应用上线，就需要维持一个Connection。而且代码量也比较大。

而Web Sockets API的出现很好地解决了这一问题，一旦连接建立之后，直接由Server端想客户端发数据，不需要每次单独见连接，极大地节省了流量和功耗。其原理图如下：

和传统长轮询操作比，使用Web Socket能够显著节省流量。下图为不同数据请求量的情况下，使用Web Sockets和长轮询的对比关系。

使用Web Sockets API

一个典型的Web Sockets应用创建的步骤如下图所示：

1. 创建一个Web Sockets的对象，代码如上图所示。其中url分别代表Scheme，Host，Port和Server。

2. 添加EventListener，可以监听链接状态，如上图中代码所示。链接状态有：onOpen, onMessage, onClose, onError。

3. 客户端发送消息。发送消息通过Web Sockets对象自带的send函数去发送。

4. 确保Server端已经运行。本例子通过python来创建一个本机的Server端。、

4. Web Sockets 例子

首先在WebSockets HTML文件在中创建如下代码：Load一个本地的ws://localhost:8080/echo URL

WebSocket Test Page

用Python来写一个简单的本地Web Server来相应客户端请求，代码如下：

#!/usr/bin/env python import asyncore import socket import struct import time import hashlib class WebSocketConnection(asyncore.dispatcher_with_send): def __init__(self, conn, server): asyncore.dispatcher_with_send.__init__(self, conn) self.server = server self.server.sessions.append(self) self.readystate = "connecting" self.buffer = "" def handle_read(self): data = self.recv(1024) self.buffer += data if self.readystate == "connecting": self.parse_connecting() elif self.readystate == "open": self.parse_frametype() def handle_close(self): self.server.sessions.remove(self) self.close() def parse_connecting(self): header_end = self.buffer.find("\r\n\r\n") if header_end == -1: return else: header = self.buffer[:header_end] # remove header and four bytes of line endings from buffer self.buffer = self.buffer[header_end+4:] header_lines = header.split("\r\n") headers = {} # validate HTTP request and construct location method, path, protocol = header_lines[0].split(" ") if method != "GET" or protocol != "HTTP/1.1" or path[0] != "/": self.terminate() return # parse headers for line in header_lines[1:]: key, value = line.split(": ") headers[key] = value headers["Location"] = "ws://" + headers["Host"] + path self.readystate = "open" self.handler = self.server.handlers.get(path, None)(self) if "Sec-WebSocket-Key1" in headers.keys(): self.send_server_handshake_76(headers) else: self.send_server_handshake_75(headers) def terminate(self): self.ready_state = "closed" self.close() def send_server_handshake_76(self, headers): """ Send the WebSocket Protocol v.76 handshake response """ key1 = headers["Sec-WebSocket-Key1"] key2 = headers["Sec-WebSocket-Key2"] # read additional 8 bytes from buffer key3, self.buffer = self.buffer[:8], self.buffer[8:] response_token = self.calculate_key(key1, key2, key3) # write out response headers self.send_bytes("HTTP/1.1 101 Web Socket Protocol Handshake\r\n") self.send_bytes("Upgrade: WebSocket\r\n") self.send_bytes("Connection: Upgrade\r\n") self.send_bytes("Sec-WebSocket-Origin: %s\r\n" % headers["Origin"]) self.send_bytes("Sec-WebSocket-Location: %s\r\n" % headers["Location"]) if "Sec-WebSocket-Protocol" in headers: protocol = headers["Sec-WebSocket-Protocol"] self.send_bytes("Sec-WebSocket-Protocol: %s\r\n" % protocol) self.send_bytes("\r\n") # write out hashed response token self.send_bytes(response_token) def calculate_key(self, key1, key2, key3): # parse keys 1 and 2 by extracting numerical characters num1 = int("".join([digit for digit in list(key1) if digit.isdigit()])) spaces1 = len([char for char in list(key1) if char == " "]) num2 = int("".join([digit for digit in list(key2) if digit.isdigit()])) spaces2 = len([char for char in list(key2) if char == " "]) combined = struct.pack(">II", num1/spaces1, num2/spaces2) + key3 # md5 sum the combined bytes return hashlib.md5(combined).digest() def send_server_handshake_75(self, headers): """ Send the WebSocket Protocol v.75 handshake response """ self.send_bytes("HTTP/1.1 101 Web Socket Protocol Handshake\r\n") self.send_bytes("Upgrade: WebSocket\r\n") self.send_bytes("Connection: Upgrade\r\n") self.send_bytes("WebSocket-Origin: %s\r\n" % headers["Origin"]) self.send_bytes("WebSocket-Location: %s\r\n" % headers["Location"]) if "Protocol" in headers: self.send_bytes("WebSocket-Protocol: %s\r\n" % headers["Protocol"]) self.send_bytes("\r\n") def parse_frametype(self): while len(self.buffer): type_byte = self.buffer[0] if type_byte == "\x00": if not self.parse_textframe(): return def parse_textframe(self): terminator_index = self.buffer.find("\xFF") if terminator_index != -1: frame = self.buffer[1:terminator_index] self.buffer = self.buffer[terminator_index+1:] s = frame.decode("UTF8") self.handler.dispatch(s) return True else: # incomplete frame return false def send(self, s): if self.readystate == "open": self.send_bytes("\x00") self.send_bytes(s.encode("UTF8")) self.send_bytes("\xFF") def send_bytes(self, bytes): asyncore.dispatcher_with_send.send(self, bytes) class EchoHandler(object): """ The EchoHandler repeats each incoming string to the same Web Socket. """ def __init__(self, conn): self.conn = conn def dispatch(self, data): self.conn.send("echo: " + data) class WebSocketServer(asyncore.dispatcher): def __init__(self, port=80, handlers=None): asyncore.dispatcher.__init__(self) self.handlers = handlers self.sessions = [] self.port = port self.create_socket(socket.AF_INET, socket.SOCK_STREAM) self.set_reuse_addr() self.bind(("", port)) self.listen(5) def handle_accept(self): conn, addr = self.accept() session = WebSocketConnection(conn, self) if __name__ == "__main__": print "Starting WebSocket Server" WebSocketServer(port=8080, handlers={"/echo": EchoHandler}) asyncore.loop()

本例完整代码的下载地址：下载

本篇完（参考文献Pro HTML5 Programing）

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

移动Web应用程序开发 HTML5篇 (六) 通信(Communication) API

移动Web应用程序开发HTML5篇 (六) Communication API

Dawei Cheng 程大伟 (Intel) — Fri, 02 Mar 2012 09:09:03 +0000

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。

本篇是HTML5介绍的第六篇，主要介绍HTML5的Communication API。

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

1. Communcation API 介绍

通信（Communication）API是HTML5中用来实现正在运行的两个页面之间进行通信和信息共享的API，在开发Web应用程序时，其主要功能就是可以实现应用程序进程间通信。目前浏览器对其支持情况如下图：

2. Communcation API 运行流程

通信（Communication）API是HTML5中用来实现正在运行的两个页面之间进行通信和信息共享的API，

如上图所示，

Application在进行通信的时候被分为Host page（发送信息的页面），Client Page（接受信息的页面）。

Host page在发送信息的时候可以在代码中指定其信息为广播还是指定目标和端口进行发送。

发送之后，相应的接收端可以接收相同协议的Host page发送过来的消息。

当然，接收端有一个权限验证的过程，验证其消息来源于可信区域。

3. Communication API使用介绍

通信（Communication）API在HTML5中的使用的使用步骤主要分为三步，如下图所示：

从图中，大家可以看出如何写相应的代码。

在Host page端onSendMessage函数负责发送信息，并指定信息的发送方式：

function onSendMessage(e) { //Loop through all the open windows and send the message for(var d = 0; d < windows.length; d++){ windows[d].postMessage($('#message').val(), 'http://localhost'); windows[d].focus(); } //Reset the textarea $('#message').val(''); }

在Client page端messageHandler函数来接收信息。

function messageHandler(e) { //Check the origin of the message switch(e.origin) { //if it is the domain that we are listening from case "http://experiments.72lions.com": $('#message').append('
' + e.data + '
').css('display','block').stop().animate({opacity:1}, 200); break; default: //Do nothing if the domain is not the one we are listening from } }

运行结果如图所示。

完整代码下载地址：下载

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

本篇完，参考文章. Pro HTML5 Programing

中文 » 全国大学生软件创新大赛专栏

Metro Web应用开发中页面通信问题解决方法

移动Web应用程序开发 高性能JavaScript篇 (三) JavaScript 加载解析和部署

移动Web应用程序开发HTML5篇 (八) Offline Web Applications

Log

如何搜索HTML5移动应用：The Everything Project

移动Web应用程序开发HTML5篇 (七) Web Sockets API

移动Web应用程序开发HTML5篇 (六) Communication API

移动Web应用程序开发高性能JavaScript篇 (三) JavaScript 加载解析和部署