Tracing network traffic with the Network Monitor in Flash Builder 4

 Flash Builder 4 includes a new feature, the Network Monitor, whichcan be used to debug network traffic between a Flex application and anapplication server at runtime. It works with any non-encrypted HTTPrequest, including those created with the URLRequest class and the FlexSDK’s RPC components (HTTPService, WebService, and RemoteObject).

Note: TheNetwork Monitor does not work on data exchanged over a secureconnection with SSL, or with data that’s managed by the Data ManagementService (a service hosted by Adobe LiveCycle Data Services).

Developerswho’ve used Flash Remoting since its early days to communicate withColdFusion or other application servers might remember the NetConnection Debugger,a tool that allowed you to trace and inspect network traffic atruntime. The new Network Monitor brings back these capabilities andimproves on them. It’s tightly integrated into Flash Builder 4, so youno longer need to start up an extra application to get the debugginginformation you need.

You can use theNetwork Monitor to inspect the contents of requests and responses sentbetween the Flex client and the application server, and to find out howlong the server is taking to respond to a request.

In this tutorial, you’ll use Adobe ColdFusion and a set of sample Flex applications to try out the Network Monitor.

TheColdFusion code is already written and doesn’t require a database. It’scompatible with both ColdFusion 8 and the newly released ColdFusion 9,so if you already have one of these versions installed you’re all set.If not, you can download and install the Developer and Trial editions of ColdFusionfree. If you typically use another application server with Flex andFlash Builder 4 and you don’t want to install ColdFusion, you canfollow steps similar to those outlined in this article with your ownapplications to test the Network Monitor with your server.

For this tutorial, you’ll use a set of Flex applications thatcommunicate with Adobe ColdFusion using the Flex SDK’s three RPCcomponents:

• HTTPService
• WebService
• RemoteObject

Theapplications use HTTPService to retrieve and parse a static XML file,WebService to call a SOAP-based web service operation, and RemoteObjectto call a remote method. For each communication protocol, you’ll usethe Network Monitor to inspect and compare the size and structure ofthe data returned by the server.

Download and install ColdFusion

Torun the sample applications, you must first download and install AdobeColdFusion. The code provided in the sample files works on eitherColdFusion 8 or ColdFusion 9.

If you’re installing ColdFusion for this tutorial, please refer to Adobe ColdFusion 9 Help for installation details.Be sure to select the server configuration option that includes a JavaEnterprise Edition (JEE) server during the installation process. Alsochoose the built-in development web server rather than InternetInformation Services, Apache, or any other web server.

Note:When you choose the server configuration and the development webserver, your ColdFusion server listens on port 8500 instead of thedefault HTTP port of 80.

Lastly, make sure you complete the configuration wizard that appears at the end of the installation process.

Import and configure the Flex project

Follow these steps to import the Flex project that contains the sample applications.

1. Open Flash Builder 4.
2. Choose File > Import Flex Project (FXP).
3. In the Import Flex Project dialog box browse to NetworkMonitorDemo.fxp (see Figure 1).
4. Click Finish.

5. In the Package Explorer view, expand the new project’s default package (see Figure 2).

6. Open each of the project’s applications and take a minute to look over the code.

Theimported project contains three applications that you’ll use to testthe Network Monitor: HTTPServiceDemo, RemoteObjectDemo, andWebServiceDemo. Each uses one of the Flex SDK’s RPC components tocommunicate with the server and retrieve data.

Configure the project for use with ColdFusion

Nextyou’ll configure the project for use with your installation ofColdFusion. Flash Builder 4 allows you to configure an existing Flexproject for use with an application server; this is a new feature thatwasn’t available with Flex Builder 3.

1. In the Package Explorer view, right-click the project (Control-click on Mac) and choose Properties from the context menu.
2. In the Properties dialog box select Flex Server from the category list.

3. Select ColdFusion as the Application Server Type (see Figure 3) and select ColdFusion Flash Remoting.

   You’llneed to configure your server location to tell Flash Builder 4 whereyour server is installed and how to connect with it. Follow the stepsbelow to configure the project when using ColdFusion’s serverconfiguration and development web server.

4. Set the ColdFusion installation type to Standalone.
5. Uncheck Use Default Location For ColdFusion Server.
6. For the ColdFusion Root Folder type the name of your ColdFusion installation folder. Here are some examples:
   • ColdFusion 8 on Windows: C:\ColdFusion8
   • ColdFusion 9 on Windows: C:\ColdFusion9
   • ColdFusion 8 on Mac OS X: /Applications/ColdFusion8
   • ColdFusion 8 on Mac OS X: /Applications/ColdFusion9
7. Click Validate Configuration to confirm that Flash Builder 4 is able to connect to ColdFusion. You should see a message at the top of the dialog box indicating that the web root folder and root URL are valid.
8. Set the Compiled Flex Application Location to a folder named networkmonitordemo under the ColdFusion web root folder. For example, if you’re using ColdFusion 9 on Windows, set the Output folder to C:\ColdFusion9\wwwroot\networkmonitordemo (see Figure 4).
9. Click OK.

Note: The settings for your ColdFusioninstallation may vary from those shown in Figure 4. Make any necessaryadjustments for your ColdFusion version, installation location,configuration, operating system, and web server. Be sure to name theoutput folder networkmonitordemo under the web rootfolder as indicated, as the Flex and ColdFusion code both assume thisrelative location for the web service and remote object applications.

Test the Flex applications

Next, open and test each of the sample applications.

1. Open HTTPServiceDemo.mxmlfrom the project’s default package and look at the code. Thisapplication retrieves a static XML file from the server with aninstance of the HTTPService class:

2. Choose Run > Run HTTPServiceDemo to run the application, which includes a DataGrid and a Button control (see Figure 5).

3. Click Get Data.

   After a few moments, the XML data should be displayed in the DataGrid.

4. Close the browser.
5. Open WebServiceDemo.mxmlfrom the project’s default package and look at the code. Thisapplication retrieves data from the server with a call to a SOAP-basedweb service operation, using an instance of the WebService class:

6. Run the application and click Get Data.

   After a few moments, the data should be displayed in the DataGrid.

7. Close the browser.
8. Open RemoteObjectDemo.mxmlfrom the project’s default package and look at the code. Thisapplication retrieves data from the server with a Flash Remoting callto a ColdFusion Component (CFC) function, using an instance of theRemoteObject class:

9. Run the application and click Get Data.

   After a few moments, the data should be displayed in the DataGrid.

10. Close the browser.

The web service and remote object applications make calls to the sameColdFusion code on the server. This code opens an XML file and parsesit, then delivers the data as an array of objects in the response.

Once you have anapplication that’s successfully retrieving data from a server with anRPC component, you can use the Network Monitor to trace and inspect therequest and response packets that are exchanged at runtime between theFlex application (the client) and the application server.

In order to use the Network Monitor, youmust enable it for the current Flex project and you must run theapplication in debug mode. Once it is enabled, when you use any of theRPC components to make requests the Network Monitor will trace anddisplay detailed information about the data being exchanged over thenetwork.

Enable the Network Monitor

Youenable the Network Monitor from the Network Monitor view. This view isavailable by default in both the Flash and the Flash Debugperspectives, so you don’t necessarily have to switch to the FlashDebug perspective to use the tool.

Follow these steps to enable the Network Monitor for your project:

1. Open the Network Monitor view.

   Note:By default, the Network Monitor is displayed in the tabbed region atthe bottom of the Flash Builder interface. If you don’t see it, chooseWindow > Network Monitor.

   As shown in Figure 6, the Network Monitor view displays four icons in the upper right corner:

   • Enable/Disable
   • Suspend
   • Clear
   • Save

2. Click Enable Monitor. You should see the icon change to a version that disables the monitor when clicked.

That’sit! The Network Monitor will now trace and display your requests andresponses when an application is running in debug mode.

Trace HTTPRequest data

Nowyou are ready to run the HTTPServiceDemo application in debug mode andinspect the requests and responses generated with a static XML file.

1. Open HTTPServiceDemo.mxml.
2. Choose Run > Debug HTTPServiceDemo.
3. When the application appears in the browser, click Get Data.
4. Close the browser to terminate the debugging session and return to Flash Builder 4.
5. Lookat the Network Monitor view. The panel on the left (see Figure 7) showsthe most recent server communication, with columns displaying thefollowing information:
   • The URL the request was sent to
   • The type of the RPC component that sent the request
   • The request and response times
   • The elapsed time in milliseconds
   • The operation (also known as the HTTP method, this value is typically either GET or POST for HTTP requests)

6. Click the request in the left panel to select it, and then look at the right panel.The right panel has buttons that can be used to view requests and responses in one of three formats:
   • Tree view displays data as an expandable tree
   • Raw view displays data in its raw text form
   • Hex view displays data in hexadecimal format, which can be useful for binary data
7. Click the Response tab in the right panel.
8. Click each of the three buttons in the right panel to see the response in the three views (see Figure 8).

   Note: With a large data set, it might take a few seconds to render the Raw and Hex views.

If you look at the response in Tree view, you can see the size ofthe response in bytes. On my system, the response size is 324,059bytes, which represents the combined size of the raw XML file and theHTTP response header returned from the web server.

Trace WebService data

Next you’ll run the WebServiceDemo application in debug mode and inspect the request and response.

1. Open WebServiceDemo.mxml.
2. Choose Run > Debug WebServiceDemo.
3. When the application appears in the browser, click Get Data.
4. Afterthe data has been retrieved and displayed in the application, close thebrowser to terminate the debugging session and return to Flash Builder.
5. In the Network Monitor view select the WebService request in the left panel.
6. In the right panel, click the Response tab.
7. Noticethat the size of response is significantly larger than the versionreturned by HTTPService (521,538 bytes on my system). This is becausethe SOAP format used in this type of web service is much more verbosethan the simpler generic XML used in the HTTPService sample application.
8. Expandthe response body to show the structure of the response data, which isreturned in the XML-based SOAP format (see Figure 9).

Trace RemoteObject data

The final application is RemoteObjectDemo. Follow these steps to run it in debug mode and inspect the request and response:

1. Open RemoteObjectDemo.mxml.
2. Choose Run > Debug RemoteObjectDemo.
3. When the application appears in the browser, click Get Data.
4. After the data has been retrieved and displayed in the application, return to Flash Builder 4.
5. Inthe Network Monitor view, notice that there are two requests listedwith two different operations: client_ping and getData (see Figure 10). 

The client_ping request is used by the RemoteObject class tocheck the server’s responsiveness. The getData request represents thecall to the CFC function getData().

6. Click the getData request on the left side of the Network Monitor view.
7. In the right panel, click the Response tab.
8. Noticethat the response size is significantly smaller than the value foreither the HTTPService or the WebService demo (189015 bytes on mysystem). This is because the binary AMF format used in Flash Remotingis much more compact than the generic XML or SOAP formats used withHTTPService and WebService.
9. Expand the response body section until you see the data returned from the server.

    

   Asshown in Figure 11, the response body type is AMF (Action MessageFormat). Also notice that the data type of the returned data objects isnetworkmonitordemo.cfc.Contact, a strongly typed value object classdefined on the server as a ColdFusion Component. 

AMF is the binary format used by ColdFusion Flash Remoting and theRemoteObject class to exchange data over the web. The significantlyreduced size of the response is a direct result of using this binaryformat instead of the raw XML used by HTTPService or the SOAP formatused by WebService.

Where to go from here

TheNetwork Monitor can help you discover valuable information such as thesize of request and response packets, how much time it takes toexchange data between client and server, how many requests are actuallybeing made, and the structure and contents of the data being sent andreceived. As you saw in this tutorial, the RPC components returnedresponses with dramatically different sizes. As a developer, myconclusion would be (and always is) to use Flash Remoting and theRemoteObject class whenever possible, to reduce packet size and speedup network communications.

You can also use theNetwork Monitor to evaluate how long each RPC component takes to returndata. In these sample applications, the WebService and RemoteObjectclasses are using the same server-side code, so comparing their elapsedtimes would give you meaningful information. Since the HTTPServiceclass is simply retrieving a static XML file, its elapsed time is muchshorter. Regardless of which services you use, though, I recommendtesting each scenario multiple times and taking an average of theresults. There are many possible factors than can influence anyparticular request and response. In addition, make sure your samplesize is realistic; if you have too little sample data, you might bebasing your decisions on results that aren’t representative of the realworld.

You can learn more about the Network Monitor and other data access and debugging tools in Flash Builder 4 from these resources:

• Monitoring applications that access data services
• Debugging and testing applications
• Adobe TV: Paging with Flash Builder 4

And be sure to visit the Flex Developer Center for more helpful tips and tutorials.