This page is an archive of my old blog. Please visit DavidTucker.net for my current blog.
This site is no longer being maintained and commenting is disabled.

AIR Tip 1 – Monitoring Your Internet Connection

Posted by David Tucker in AIRDec 15th, 2007 | 16 responses

AIR is meant to facilitate applications that work when online and offline. For example, if you developed an AIR application to manage your blog, you would want to be able to write blog posts whether you were online or offline. To accomplish this, the application would do one of two actions depending on whether it had an internet connection. If it were online, it would take your post and upload it. If it weren't online, it would store it (either in a file or in a local SQLite database).

VERSION: This tutorial is current for AIR Beta 3.

Today, you are going to build a very simple AIR application. If will be a window that will have three main items: a search box, a submit button, and an image that indicates if you are connected to the Internet. If a user types something into the text input and hits the search button, it will open up your browser and search for that term on Google. However, if you are not connected to the Internet, the "search" button will be disabled.

AIR has two specific functions for monitoring your internet connection, URLMonitor [ Flex | Javascript ] and SocketMonitor [ Flex | Javascript ]. These classes both implement the ServiceMonitor Class [ Flex | Javascript ]. To monitor your connection you just follow the steps below:

  1. Create a URLRequest with the URL that you want to monitor. You can set its mode to "HEAD" to avoid getting the entire page every time.
  2. Create a new URLMonitor and assign it the URL that you want it to monitor.
  3. Add a new Event Listener for the URLMonitor that listens for the StatusEvent.STATUS event and create the function to act on that event.
  4. Set how often you want to the URLMonitor to run and start it.

If any of this seems confusing, don't worry, you will look at each item in the code below. Also, the full source code will be available for both examples.

Coding the Example

For the application, you are going to create a function that gets run when the application starts. This will be where you will create your URLRequest and URLMonitor objects. For Flex, this will be a function that responds to the CreationComplete event, for the HTML/Javascript example, this will be a function that responds to the "onload" event of the body tag.

Flex

PLAIN TEXT
Actionscript:
  1. import air.net.URLMonitor;
  2. import flash.net.navigateToURL;
  3. import flash.net.URLRequest;
  4.  
  5. // DEFINE The Variable that will hold the URLMonitor
  6. private var monitor:URLMonitor;
  7.  
  8. private function init():void {
  9.  
  10. // URLRequest that the Monitor Will Check
  11. var url:URLRequest = new URLRequest("http://archive.davidtucker.net/index.php");
  12. // Checks Only the Headers - Not the Full Page
  13. url.method = "HEAD";
  14.  
  15. // Create the URL Monitor and Pass it the URLRequest
  16. monitor = new URLMonitor(url);
  17. // Set the Interval (in ms) - 3000 = 3 Seconds
  18. monitor.pollInterval = 3000;
  19. // Create the Event Listener that Will Be Fired When Connection Changes
  20. monitor.addEventListener(StatusEvent.STATUS,on_connection);
  21. // Start the URLMonitor
  22. monitor.start();
  23.  
  24. }

HTML/Javascript

PLAIN TEXT
JavaScript:
  1. var monitor;
  2.  
  3. function onLoad() {
  4.  
  5. // URLRequest that the Monitor Will Check
  6. var request = new air.URLRequest( "http://archive.davidtucker.net/index.php" );
  7. // Checks Only the Headers - Not the Full Page
  8. request.method = "HEAD";
  9.  
  10. // Create the URL Monitor and Pass it the URLRequest
  11. monitor = new air.URLMonitor( request );
  12. // Create the Event Listener that Will Be Fired When Connection Changes
  13. monitor.addEventListener( air.StatusEvent.STATUS, doStatus );
  14. // Start the URLMonitor
  15. monitor.start();
  16.  
  17. }

Hopefully you can see that there is not a great deal of difference between the two. Calling an AIR function within Javascript is just as easy as it is in Flex.

NOTE: If you want this javascript to function properly, be sure to include the AIRAliases.js file and the servicemonitor.swf file in your application. If you do not, this code will not function properly. Your code can function without the AIRAliases.js - the method names are just longer. However, you cannot use the URLMonitor or SocketMonitor without the servicemonitor.swf file.

Flex Application
Source Code

HTML / Javascript Application
Source Code

16 Responses to “AIR Tip 1 – Monitoring Your Internet Connection”

  1. Matt Graf says:
    October 30, 2007 at 2:46 pm

    I am trying to run this app and I am getting this error
    SyntaxError: Parse error

    app-resource:/servicemonitor.swf : 1

    TypeError: Value (result of expression window.runtime.air.net.URLMonitor) is not a constructor. Cannot be used with new.

    onLoad at app-resource:/tip.html : 21

    onLoad at app-resource:/tip.html : 21

    onload at app-resource:/tip.html : 72

  2. David Tucker says:
    October 31, 2007 at 8:09 am

    I haven’t updated this tutorial for AIR Bet 2 yet. I am not sure if this is the cause of that issue – but I plan to update it within the next day or two.

  3. Ruben says:
    January 15, 2008 at 6:59 am

    I don’t know if you are aware of it, but there’s an huge amount of spam links in your article source, hidden in a display: none bold tag….

  4. David Tucker says:
    January 15, 2008 at 7:02 am

    @Ruben – Thanks! I am still recovering from a minor hack a while back.

  5. 火柴工作坊 » Blog 存档 » David Tucker的一些AIR教程 says:
    February 21, 2008 at 1:10 am

    [...] AIR技巧 AIR Tip 1: Monitoring a Network Connection (AIR Beta 3) AIR Tip 2: Going Fullscreen (AIR Beta 3) AIR Tip 3: What Version is My Application [...]

  6. 雨飞blog » David Tucker的air tips says:
    March 5, 2008 at 8:08 pm

    [...] AIR Tip 1: Monitoring a Network Connection (AIR 1.0) [...]

  7. RichBox’s Blog » Blog Archive » [翻译]AIR TIP1：检测你的网络连接 says:
    April 9, 2008 at 8:45 pm

    [...] 原文在这里 [...]

  8. Adrian Parr says:
    September 4, 2008 at 7:50 am

    Also worth mentioning is that if you want to do this using Flash instead of Flex or Javascript then you will need to drag a copy of the ‘ServiceMonitorShim’ component (found in the Components panel under AIR ServiceMonitor) in to your Library.

    If you don’t do this you will see some/all of the following compiler messages …
    1046: Type was not found or was not a compile-time constant: URLMonitor.
    1180: Call to a possibly undefined method URLMonitor.
    1046: Type was not found or was not a compile-time constant: URLMonitor.
    1120: Access of undefined property URLMonitor.
    1172: Definition air.net:URLMonitor could not be found.

    This can easily catch people out (including myself).

    Hope this helps someone.

    Regards,

    Adrian

  9. Brendon Kozlowski says:
    November 3, 2008 at 1:44 pm

    In case anyone ever gets the first commenter’s issues, you must make sure to include the ServiceMonitor library (either in Flex, Flash, or HTML … which all have differing methods of inclusion), and also make sure it’s case-sensitive. I had a lowercase filename (in Windows) and it would keep throwing the error until I fixed the case sensitivity of the file in my application.

  10. Bond guy says:
    January 15, 2009 at 10:43 am

    Hi,

    came across this example.
    i am a noob to flex / AIR .

    Is it possible to implement this example inside flex app(not AIR) , to check the connection ? If yes, do urlMonitor and SocketMonitor have a counterpart in flex ?
    HttpRequest and other URLLoader functions are not compatible with various browsers and hence not reliable .

    The goal is to simulate connection monitoring inside a flex app (swf)

  11. joan.mmk says:
    July 31, 2009 at 6:45 am

    Thanks Adrian, you really help me.

  12. Flex 3: Detecting Network Status | Imbimp.com says:
    August 25, 2009 at 6:25 am

    [...] of methods to detect network connectivity, all of which can be read about here, here, here and here. What I found is that these seem to work fine when there is an actual change in your network [...]

  13. Nino says:
    February 8, 2010 at 4:45 am

    Hi ,
    I cant not get this code to work for adobe air 2 beta 2
    can somebody please help ?

    i m getting the error : TypeError: Result of expression ‘air.URLMonitor’ [] is not a constructor.

  14. Nino says:
    February 8, 2010 at 5:30 am

    David any help please ? :(

  15. phish says:
    April 14, 2010 at 7:00 am

    hi,

    it works but it’s far from real time. It takes very long to detect that a network connection is dead but it’s very quick to detec it’s up again. I thougth about idleTimeout but it does not work. Any idea ?

  16. dizda says:
    June 2, 2011 at 3:16 am

    Thank you for your precious advice David, I forget to use “PollInterval”, but its ok now thanks to you :-)