Pushing Base64-Encoded Images Over HTML5 WebSockets With Pusher And ColdFusion

<!--- Param the url value. --->
<cfparam name="url.id" type="numeric" default="0" />


<!--- Check to see if the image was selected by the user. --->
<cfif url.id>


	<!---
		Pusher information used to tie this push notification
		to a given application and to a given client (listening
		for a given channel).

		NOTE: Your Pusher account can have multiple applications
		associated with it (each of which can have on-the-fly
		channel creation).
	--->
	<cfset pusherAppID = "1346" />
	<cfset pusherKey = "6a4bebacf22ae8081689" />
	<cfset pusherSecret = "****************" />
	<cfset pusherChannel = "imagePush" />

	<!---
		Event we are triggering (this is what the client will
		"bind" to on the given channel).
	--->
	<cfset pusherEvent = "imageEvent" />

	<!---
		At this point, we need to assemble the data we are actually
		going to Push using Pusher. In this case, we want to send
		the Base64-encoded data of the image to Push. In ColdFusion,
		there is no on-the-fly Base64 encoding. As such, we need
		read the image in and then write it to a temp file.
	--->

	<!--- Read the image in. --->
	<cfset image = imageNew( "./images/image#url.id#.jpg" ) />

	<!---
		Write it to disk as Base64 encoding. By adding the fourth,
		option argument (inHTMLFormat), ColdFusion will automatically
		prepend the base64 data with, "data:image/jpg;base64,", such
		that it can easily be used as a Data Url for image source.
	--->
	<cfset imageWriteBase64(
		image,
		"./base64.txt",
		"jpg",
		true
		) />

	<!--- Read in the Base64 data. --->
	<cfset base64Data = fileRead( expandPath( "./base64.txt" ) ) />

	<!---
		Now that we have the image in Base64 data, we have to encode
		that value in JSON to be passed to the Pusher app. All values
		"pushed" must be in JSON format.
	--->
	<cfset pusherData = serializeJSON( base64Data ) />

	<!--- Authentication information. --->
	<cfset authVersion = "1.0" />
	<cfset authMD5Body = lcase( hash( pusherData, "md5" ) ) />
	<cfset authTimeStamp = fix( getTickCount() / 1000 ) />

	<!--- Build the post resource (the RESTfule resource). --->
	<cfset pusherResource = "/apps/#pusherAppID#/channels/#pusherChannel#/events" />


	<!--- ------------------------------------------------- --->
	<!--- ------------------------------------------------- --->


	<!---
		The following is the digital signing of the HTTP request.
		Frankly, this stuff is pretty far above my understanding
		of cryptology. I have adapted code from the PusherApp
		ColdFusion component written by Bradley Lambert:
		http://github.com/blambert/pusher-cfc
	--->


	<!---
		Create the list of query string values (alpha-sorted with no
		URL encoding).
	--->
	<cfsavecontent variable="queryStringData">
		<cfoutput>
			auth_key=#pusherKey#
			auth_timestamp=#authTimeStamp#
			auth_version=#authVersion#
			body_md5=#authMD5Body#
			name=#pusherEvent#
		</cfoutput>
	</cfsavecontent>

	<!---
		Create the raw signature data. This is the HTTP
		method, the resource, and the alpha-ordered query
		string (non-URL-encoded values).
	--->
	<cfset signatureData = (
		("POST" & chr( 10 )) &
		(pusherResource & chr( 10 )) &
		reReplace(
			trim( queryStringData ),
			"\s+",
			"&",
			"all"
			)
		) />

	<!---
		Create our secret key generator. This can create a secret
		key from a given byte array. Initialize it with the byte
		array version of our PushApp secret key and the algorithm
		we want to use to generate the secret key.
	--->
	<cfset secretKeySpec = createObject(
		"java",
		"javax.crypto.spec.SecretKeySpec"
		).init(
			toBinary( toBase64( pusherSecret ) ),
			"HmacSHA256"
			)
		/>

	<!---
		Create our MAC (Message Authentication Code) generator
		to encrypt the message data using the PusherApp shared
		secret key.
	--->
	<cfset mac = createObject( "java", "javax.crypto.Mac" )
		.getInstance( "HmacSHA256" )
		/>

	<!--- Initialize the MAC instance using our secret key. --->
	<cfset mac.init( secretKeySpec ) />

	<!---
		Complete the mac operation, encrypting the given secret
		key (that we created above).
	--->
	<cfset encryptedBytes = mac.doFinal( signatureData.getBytes() ) />


	<!---
		Now that we have the encrypted data, we have to convert
		that data to a HEX-encoded string. We will use the big
		integer for this.
	--->
	<cfset bigInt = createObject( "java", "java.math.BigInteger" )
		.init( 1, encryptedBytes )
		/>

	<!--- Convert the encrypted bytes to the HEX string. --->
	<cfset secureSignature = bigInt.toString(16) />

	<!---
		Apparently, we need to make sure the signature is at least
		32 characters long. As such, let's just left-pad with spaces
		and then replace with zeroes.
	--->
	<cfset secureSignature = replace(
		lJustify( secureSignature, 32 ),
		" ",
		"0",
		"all"
		) />


	<!--- ----------------------------------------------------- --->
	<!--- ----------------------------------------------------- --->


	<!---
		Now that we have all the values we want to post, including
		our encrypted signature, we can post to the PusherApp REST
		web service using CFHTTP.
	--->
	<cfhttp
		result="post"
		method="post"
		url="http://api.pusherapp.com#pusherResource#">

		<!---
			Alert the post resource that the value is coming through
			as JSON data.
		--->
		<cfhttpparam
			type="header"
			name="content-type"
			value="application/json"
			/>

		<!--- Set the authorization parameters. --->

		<cfhttpparam
			type="url"
			name="auth_version"
			value="#authVersion#"
			/>

		<cfhttpparam
			type="url"
			name="auth_key"
			value="#pusherKey#"
			/>

		<cfhttpparam
			type="url"
			name="auth_timestamp"
			value="#authTimeStamp#"
			/>

			<cfhttpparam
			type="url"
			name="body_md5"
			value="#authMD5Body#"
			/>

		<!--- Sent the name of the pusher event. --->
		<cfhttpparam
			type="url"
			name="name"
			value="#pusherEvent#"
			/>

		<!--- Send the actual message data (JSON data). --->
		<cfhttpparam
			type="body"
			value="#pusherData#"
			/>

		<!--- Digitally sign the HTTP request. --->
		<cfhttpparam
			type="url"
			name="auth_signature"
			value="#secureSignature#"
			/>

	</cfhttp>


</cfif>


<!--- ----------------------------------------------------- --->
<!--- ----------------------------------------------------- --->


<cfoutput>

	<!DOCTYPE HTML>
	<html>
	<head>
		<title>Pushing Base64 Image Data With ColdFusion</title>
		<style type="text/css">

			a {
				margin-right: 10px ;
				}

			img {
				border: 3px solid ##333333 ;
				height: 100px ;
				}

		</style>
	</head>
	<body>

		<h1>
			Pushing Base64 Image Data With ColdFusion
		</h1>

		<p>
			<!---
				Loop over the images to provide pushing options
				(images will be converted to Base64 for "pushing").
			--->
			<cfloop
				index="imageIndex"
				from="1"
				to="4"
				step="1">

				<a href="#cgi.script_name#?id=#imageIndex#">
					<img src="./images/image#imageIndex#.jpg" />
				</a>

			</cfloop>

		</p>

		<p>
			Images Credit:<br />
			http://www.pbase.com/gilp/stephanie_richard
		</p>

	</body>
	</html>

</cfoutput>

<!DOCTYPE HTML>
<html>
<head>
	<title>Pushing Base64 Image Data With ColdFusion</title>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="http://js.pusherapp.com/1.4/pusher.min.js"></script>
	<script type="text/javascript">

		// This is for compatability with browsers that don't yet
		// support Web Sockets, but DO support Flash.
		//
		// NOTE: This SWF can be downloaded from the PusherApp
		// website. It is a Flash proxy to the standard Web
		// Sockets interface.
		WebSocket.__swfLocation = "./WebSocketMain.swf";


		// When the DOM is ready, init the scripts. Technically, we
		// can bind the PusherApp before DOM ready, but we can't
		// respond to it, so no need to bind early.
		$(function(){

			// Get a reference to the image placeholder.
			var image = $( "#image" );

			// Create a Pusher server object with your app's key and
			// the channel you want to listen on. Channels are unique
			// to your application.
			var server = new Pusher(
				"6a4bebacf22ae8081689",
				"imagePush"
			);

			// Now that we have the pusher connection for a given
			// channel, we want to listen for certain events to come
			// over that channel.
			server.bind(
				"imageEvent",
				function( data ) {

					// The data that comes through is the evaluated
					// JSON data that was pushed to the client. In
					// our case, it's the Base64 encoded image data
					// formatted to be used as a data URL.
					image.attr( "src", data );
				}
			);

		});

	</script>
</head>
<body>

	<h1>
		Pushing Base64 Image Data With ColdFusion
	</h1>

	<p>
		This page will listen for PusherApp via HTML5 Socket
		connection (or, if not supported, a Flash SWF fallback).
		The messages (image data) will be displayed below.
	</p>

	<!--- The placeholder image. --->
	<p>
		<img id="image" width="450" />
	</p>

</body>
</html>