cfunited2010

Building Multiplayer games on the Flash Platform with ColdFusion, Flex and Data Services

Adding real-time data visualization to your application or website

The following image.cfm can be used in an <img> tag giving you the hook you need to extract data to push:

<cfsetting enablecfoutputonly="Yes">
<cfsetting showdebugoutput="No">

<!--- Insert anything you want to execute here --->
<!--- #CGI# contains a ton of data you can utilize including IP address, URL, etc. --->

<!--- Read a file from the disk (1x1 transparent png in my example) --->
<cffile action="readBinary"
	file="/path-to-images/dot.png"
	variable="trackImage">

<!--- Output the image --->
<cfheader name="content-disposition" value="Inline;filename=dot.png">
<cfcontent type="image/png;" variable="#trackImage#">

Convert IP address to location and push (you’ll need Brandon Purcell’s jar and code and Maxmind’s database):

<pre><!----------------------------------------------------------------------->
<!--- Convert IP address to location using Brandon Purcell's jar file --->
<!--- and Maxmind's city database                                     --->
<!----------------------------------------------------------------------->
<cfinvoke component="geo" method="ipLookup" returnVariable="location">
	<cfinvokeargument name="IP" value="#CGI.REMOTE_ADDR#"/>
</cfinvoke>

<cfset geodata = structNew()>
<cfset geodata['destination']		= "cfgateway">
<cfset geodata['headers']['DSSubtopic']	= "company.com">
<cfset geodata['body']['city'] 		= "#location.IPCITY#">
<cfset geodata['body']['country'] 	= "#location.COUNTRYLONG#">
<cfset geodata['body']['countryshort']	= "#location.COUNTRYSHORT#">
<cfset geodata['body']['url'] 		= "#CGI.HTTP_REFERER#">
<cfset geodata['body']['latitude'] 	= "#location.IPLATITUDE#">
<cfset geodata['body']['longitude'] 	= "#location.IPLONGITUDE#">
<cfset geodata['body']['datetime'] 	= "#now()#">

<cfset ret = sendGatewayMessage("cfgw",geodata)>

Flex snippets to subscribe to the data:

	<mx:ChannelSet id="channelSet">
        <!-- RTMP channel -->
        <mx:RTMPChannel id="rtmp" url="rtmp://myserver.com:2037"/>
	    <!-- Long Polling Channel -->
	    <mx:AMFChannel url="http://myserver.com/flex2gateway/amflongpolling"/>
	</mx:ChannelSet>

	<mx:Consumer id="consumer"
	    channelSet="{channelSet}"
	    destination="cfgateway"
	    subtopic="company.com"
	    resubscribeAttempts="-1"
	    resubscribeInterval="5000"
	    message="messageHandler(event.message)"
		fault="Alert.show(event.faultString)"/>

Messagehandler:

			private function messageHandler(message:IMessage):void
			{
				trace("lat/long=" + message.body.latitude + message.body.longitude);
				trace("city=" + message.body.city);
			}

During the session, I demonstrated a mobile application written for my Android phone that was built in Flex for AIR.  The app simply takes my current location using the GeoLocation API and calls a backend CFC.  I then demonstrated the google maps view to show the location track.  Below are two screenshots I took after walking around the parking area of the resort.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: