在Flash Builder4 beta中使用网络监测器跟踪网络流量

本文来自：RIAMeeting

这是一篇来自Adobe开发者中心的文章，由RIAMeeting社区翻译小组王贺翻译，原文地址：http://www.adobe.com/devnet/flex/articles/flashbuilder4_network_monitor.html

Flash Builder4 beta包含了一个新特性，就是网络监测器，它可用于监测一个Flex应用和应用服务器的网络通讯。 它可以监测任何非加密的HTTP请求，包括创建于URLRequest和Flex SDK中的RPC组件（HTTPService，Web服务和RemoteObject）的那些。

注意：网络监视器不能使用SSL，或由数据管理服务管理的数据（由Adobe LiveCycle Data Services托管的数据）。

使用了Flash Remoting来与ColdFusion或其它的应用程序服务通讯的开发者可能还记得NetConnection Debugger，一个允许你在运行时跟踪和监测网络流量的工具。 新的网络监测器让我想起了它们的特性。 它紧密的和Flash Builder结合起来了，所以你不需要切换到额外的应用程序，就能获取到需要的信息。

你可以使用网络监测器来监测Flex客户端和应用服务器之间的数据通讯，并发现服务器需要多长时间来处理和响应请求。

在本教程中，你将使用Adobe ColdFusion和一个简单的Flex应用来尝试使用网络监测器。

ColdFusion代码已经写好了并且不需要数据库。 它兼容ColdFusion8和新发布的ColdFusion9，所以无论你使用哪个版本，都可以使用。 如果不是这两个版本，你可以下载和安装ColdFusion对开发者和学生的免费版本。 如果你不想使用ColdFusion，想使用其它的应用服务器和Flex结合，你可以同样按照这个教程中的大纲，遵循文中所述的步骤，来使用网络监测器监 测网络和应用。

需求

为了了解文中所述的内容，你需要以下软件和文件：

Flash Builder 4 beta 2

1. 下载
2. 了解更多

ColdFusion 8或ColdFusion 9

1. 尝试
2. 购买

示例文件：

1. network_monitor_demo.zip  （ZIP，121kB）

预备知识

建议先了解一些基础知识，包括如何在Flash Builder和Flex中创建应用。 ColdFusion开发经验在这里不是很有必要，因为这个教程的ColdFusion代码已经为你创建好了。

关于作者

David Gassner是Adobe认证讲师和Bardo技术服务的合伙人 ，后者是Adobe授权培训中心，位于西雅图。他是Adobe认证专家和讲师，技术范围包括Dreamweaver，coldfusion，和Flex。 他和Bible共同为Lynda.com制作了一系列的关于Dreamweaver，ColdFusion和Flex的教程。

使用应用程序服务器建立一个Flex项目

在本教程中，您将让Flex应用程序与Adobe ColdFusion使用Flex SDK的RPC的三个组成部分来通讯：

1. HTTPService
2. WebService
3. RemoteObject

应用通过使用HTTPService来检索和解析一个静态的XML文件，WebService调用基于SOAP的Web服务操作，而 RemoteObject则调用一个远程方法。 对于每一个通信协议，你将会使用网络监视器来检查和比较由服务器返回的数据大小和结构。

下载并安装ColdFusion

要运行示例应用程序，您必须首先下载并安装Adobe ColdFusion。 在示例代码文件提供的项目可以运行在ColdFusion 8或ColdFusion 9。

如果你是为了本教程而安装的ColdFusion，请参阅 Adobe ColdFusion 9帮助文档中的安装细节 。 请确保在安装过程中一定要选择服务器配置选项，其中包括Java企业版（JEE） 服务器。 同样要选择内置的开发WEB服务器来代替IIS，Apache，或任何其它的WEB服务器。

注意：当你选择服务器配置和开发Web服务器，你的ColdFusion服务器的端口是8500而不是默认的HTTP 80端口。

最后，请务必完成配置向导，结束安装过程。

导入和配置Flex项目

请按照下列步骤导入Flex项目，包含示例应用程序。

1. 打开Flash Builder4
2. 选择“文件>导入Flex项目（FXP）。
3. 在导入的Flex项目对话框中浏览到 NetworkMonitorDemo.fxp  （见图1）。
4. 单击完成。

图1 从FXP文件导入一个Flex项目

1. 在Package Explorer视图中，展开了新项目的默认包（见图2）。

图2 Package Explorer中显示该项目默认包中的三个的应用程序。

1. 打开该项目的每个应用程序，花一两分钟查看代码。

导入的项目包含三个应用程序，让你用来测试网络监视器：HTTPServiceDemo，RemoteObjectDemo和 WebServiceDemo。 每一个示例程序中都使用了Flex SDK中的一个RPC组件与服务端做通讯，并获取数据。

配置使用ColdFusion的项目。

下面，使用ColdFusion初始化向导配置项目。 Flash Builder 4允许你配置一个已经存在的Flex项目去使用一个应用服务；这是在FlexBuilder 3的时候不具备的一个新特性。

1. 在包浏览视图中，右键点击项目项目（在mac系统中请Control+点击）并在弹出的菜单中选择属性（Properties）。
2. 在属性设置对话框中的分类列表中选择Flex Server。

图3 修改Flex项目来使用ColdFusion服务

1. 选择ColdFusion 作为服务应用的类型（见图3），并选择ColdFusion Flash Remoting

你需要配置你的服务地址，告诉Flash Builder 4你的服务安装在什么地方，以及如何连接到这个服务。 要使用ColdFusion的服务结构配置和开发网络服务时，请按照下面的步骤来配置项目。

1. 将ColdFusion 的初始类型设置为Standalone。
2. 去掉ColdFusion 服务勾选的默认地址。
3. 用ColdFusion Root Folder来指定ColdFusion 服务的根目录名称。 这里有一些示例：
   1. 在Windows上配置ColdFusion 8：C:/ColdFusion8
   2. 在Windows上配置ColdFusion 9：C:/ColdFusion9
   3. 在Mac OS X上配置ColdFusion 8：/Applications/ColdFusion8
   4. 在Mac OS X上配置ColdFusion 9： /Applications/ColdFusion9
4. 点击Validate Configuration按钮来确定Flash Builder 4可以连接上ColdFusion的服务。 你应该可以看到对话框上方显示了一条信息，显示出服务的根目录是合法的。
5. 设置将Flex 应用程序的编译位置设置成ColdFusion 服务根目录下的networkmonitordemo文件夹。 例如，如果你在Windows上使用ColdFusion9，设置输出的路径到C:/ColdFusion9/wwwroot /networkmonitordemo （见图4）
6. 单击确定。

图4. 配置ColdFusion 服务

注意：在ColdFusion 配置中作出的设置可能会发生变化（见图4）. 为你使用的ColdFusion版本作出必要的调整，包括安装路径，设置，操作系统，网络服务。 要确认的是服务路径下的networkmonitordemo 这个命名，在Flex和ColdFusion的代码中都以这个名字来认定网络服务与远程对象调用程序之间的关系。

测试这个Flex应用程序。

下面打开并测试每一个示例程序。

1. 从项目默认文件夹中打开 HTTPServiceDemo.mxml看里面的代码。 这个程序利用HTTPService 实例从服务端得到了一个静态的xml文件：
2. 选择 运行 > 运行 HTTPServiceDemo 来运行这个程序，程序中包含一个DataGrid 组件和一个按钮（见图5）

图5 显示在Flex中的HTTPService 版本的程序

1. 点击获得数据。

稍后，XML数据将被显示在DataGrid中

1. 关闭浏览器
2. 从项目默认文件夹中打开打开WebServiceDemo.mxml看里面的代码。 这个程序使用WebService 类的对象，通过基于SOAP的Web服务来获取数据。
3. 运行这个程序，并点击获取数据。

稍后，数据将被显示在DataGrid中

1. 关闭浏览器
2. 从项目默认文件夹中打开 RemoteObjectDemo.mxml看里面的代码。 这个程序使用RemoteObject 类的对象，通过Flash远程调用ColdFusion 组件的函数（CFC）来获取数据。
3. 运行这个程序，并点击获取数据。

稍后，数据将被显示在DataGrid中

1. 关闭浏览器

web service和remote object的程序调用的都是ColdFusion 上的同一个服务代码。 这段代码打开一个xml文件，并解析它，然后将数据以Array对象的形式返回。

使用网络监视器

一旦你有一个一个程序，并且它成功的通过RPC组件从服务端获取了数据，你就可以使用网络监视器来跟踪和检查在Flex程序（客户端）和应用服务之 间，实时发送的请求和返回的数据包。

为了使用网络监视器，你必须在当前的Flex项目中激活它，并且你必须将程序运行在调试模式下。 一旦它被激活，当你使用了任何一个RPC 组件发送请求时，网络监视器将会跟踪并显示通过网络传输和改变的数据的详细信息。

激活网络监视器服务。

你可以从网络监视器视图中激活网络监视器。 无论在Flash还是Flash调试模式下，这个视图都是默认显示出来的，所以你无需很费力的切换到调试模式下来使用这个工具。

按照下面的步骤在你的项目中激活网络监视器。

1. 打开网络监视器视图。

注意：在默认情况下，网络监视器是显示在Flash Builder界面下面的标签区域上的。 如果你没看到它，选择 窗口 > 网络监视器。

如图6所示，网络监视器视图右上角显示了4个图标。

1.  
   1. 激活/屏蔽
   2. 悬停
   3. 清空
   4. 保存

图6. Flash Builder 4中的网络监视器。

1. 点击激活监视器。 你会看到，图标变成了显示版本的状态，再次点击它可以关闭监视器。

就是那样！ 网络监视器会在程序运行在调试模式下时开始跟踪并显示你所有的请求和返回的信息。

跟踪HTTP请求数据。

现在你已经准备好在调试模式下运行HTTPServiceDemo 这个程序了，并且你可以查看到发送和返回的静态的XML文件。

1. 打开HTTPServiceDemo.mxml
2. 选择 运行 > 调试模式运行 HTTPServiceDemo 来运行这个程序
3. 当程序出现在浏览器中时，点击获得数据。
4. 关闭浏览器，终止调试状态，回到 Flash Builder 4中。
5. 看看网络监视器视图。 左边的面板（见图7）显示出最近的服务交互状态，按列显示出以下信息。
   1. 请求发送到的URL
   2. 发送请求的RPC容器的类型。
   3. 发送的请求，和响应的次数。
   4. 以毫秒为单位的响应时间
   5. 请求方式（就是众所周知的HTTP方式，通常在http请求中这个值不是GET就是POST）

图7 网络监视器的左边的面板，显示了基本的请求统计数据。

1. 点击左边面板中的请求选中它，然后看右面的面板里的信息。 右边的面板有用于以三种格式查看请求和响应的按钮
   1. 树状视图以可展开的视图显示数据。
   2. 行视图以多行文本表单的形式显示数据。
   3. 十六进制视图将数据以十六进制的格式显示出来，这对于二进制数据查看是很有用的。
2. 点击右侧面板的响应数据标签。
3. 点击右边的每个按钮，查看响应的数据在不同的视图下的样子。（见图8）

注意：对于比较大的数据集，可能在行视图和十六进制视图中需要几秒钟来解析呈现数据。

图8. 三种不同视图下显示从服务端返回的数据，并列显示。

如果你以树状视图查看，你可以看到以字节为单位的响应数据长度。 在我的系统上，这个响应的数据的长度是324,059字节，这表示服务返回的多行XML文件加上HTTP 响应头信息的总长度。

跟踪网络服务数据。

下面，请以调试模式运行WebServiceDemo 程序，并查看发送的请求的返回的数据。

1. 打开WebServiceDemo.mxml
2. 选择 运行 > 调试模式运行 WebServiceDemo
3. 当程序出现在浏览器中时，点击获得数据。
4. 在获取到数据并显示在程序中后，关闭浏览器，终止调试状态，回到 Flash Builder 中。
5. 在网络监视器视图中，在左边的面板中选择WebService 请求
6. 在右边的面板中，点击响应数据标签。
7. 请注意，返回的数据明显比HTTPService 返回的数据要长（在我的系统上是521,538字节） 这是因为这类网络服务使用的SOAP格式比在使用HTTPService小程序中简单的XML数据要冗长得多。
8. 展开响应数据，查看返回数据的结构，会看到基于XML的SOAP格式。（见图9）

图9 显示在网络监视器中的一个SOAP网络服务的响应数据。

跟踪RemoteObject 数据

最后一个程序是RemoteObjectDemo 按照下面的步骤以调试模式运行它，并查看发送的请求的返回的数据。

1. 打开 RemoteObjectDemo.mxml
2. 选择 运行 > 调试模式运行RemoteObjectDemo
3. 当程序出现在浏览器中时，点击获得数据。
4. 在获取到数据并显示在程序中后，回到Flash Builder 4中
5. 在网络监视器视图中，主意，有两个请求被列在不同的操作中：client_ping 和getData （见图10）

图10 网络监视器显示出的两个请求是由RemoteObject 向ColdFusion发送的。

client_ping请求是RemoteObject 用来检查服务端是否有响应的。 getData 请求描述了对CFC函数 getData()的调用。

1. 在监视器视图左边点击getData 请求
2. 在右边的面板中，点击响应数据标签。
3. 主意，返回的数据明显比之前的两种请求都要小得多。（在我的系统上是189015字节） 这是因为，Flash 远程调用使用的二进制AMF格式比普通XML和SOAP格式的数据都要紧凑得多。
4. 展开响应数据的每个部分，直到你看到从服务器端返回的数据。

如图11所示，返回的数据体类型是AMF（Action Message Format） 同样值得主意的是返回的数据的数据对象类型是networkmonitordemo.cfc.Contact，一个在服务端ColdFusion 组件定义的强类型值对象。

图11 显示在网络监视器中的一个从ColdFusion返回的AMF格式数据。

AMF是ColdFusion Flash远程调用使用的一种二进制数据格式，可以通过RemoteObject从网络获取数据。 明显变小的响应数据体积减少，是使用这种格式取代使用XML的HTTPService和使用SOAP格式数据的一个直接原因。

我们还可以知道些什么呢？

网络监视器可以帮助你找到有价值的数据，例如请求和返回数据包的体积了，客户端和服务器端交换数据的次数了，实际发送请求的数量了，以及发送和接收 到的数据的结构和内容。 正像你在这篇教程中看到的一样，RPC 组件返回的数据体积存在明显的差异。 作为一个开发者，我的结论是（并且一直都是）尽可能的使用Flash 远程调用和RemoteObject 类，来减少数据包的体积，并提升网络数据交互的速度。

你也可以使用网络监视器来评估每个RPC组件返回数据的时间。 在这几个简单的程序中，WebService 和RemoteObject 类使用了同样的服务器端代码，所以拿它们两个做比较是比较有意义的。 HTTPService 类在接收到数据之后，花费的解析时间会稍微短一些。 无论你使用哪种服务，我都推荐你对每个细节作出测试，并采用比较平均的结果。 有很多可能的因素会影响个别的请求和返回数据。 另外，请确认数据的尺寸是靠谱的，如果你得到了一个过于简单的数据，你也许应该检查一下返回的数据是不是反映了真实的情况。

你可以从下面的资源中学习更多关于网络监视器和其他数据处理的知识，以及调试工具。

1. 数 据服务的监视程序。
2. 调 试和测试程序。
3. Adobe TV:Flash Builder 4相关内容。

最后，请光临Flex开发中心获得更多的帮助和教程。

 

【国内下载】Flex 3 Builder :http://g.csdn.net/5120749
【国内下载】Adobe Flash Builder 4 :http://g.csdn.net/5105812
【官方下载】Flex 3 Builder :http://g.csdn.net/5121278
【官方下载】Adobe Flash Builder 4 :http://g.csdn.net/5120750