<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Aboutme - blog &#187; html5</title>
	<atom:link href="http://blog.aboutme.be/category/html5/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.aboutme.be</link>
	<description></description>
	<lastBuildDate>Fri, 13 Jan 2012 08:58:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>websocket version 8 support in AIR Server</title>
		<link>http://blog.aboutme.be/2011/11/24/airserver-support-for-websocket-version-8/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=airserver-support-for-websocket-version-8</link>
		<comments>http://blog.aboutme.be/2011/11/24/airserver-support-for-websocket-version-8/#comments</comments>
		<pubDate>Thu, 24 Nov 2011 19:30:11 +0000</pubDate>
		<dc:creator>wouter</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.aboutme.be/?p=242</guid>
		<description><![CDATA[It&#8217;s been a while since my last update on AIRServer &#8211; an actionscript library which enables you to set up a socket server in Adobe AIR, which listens to multiple socket inputs (native AMF sockets, websockets and P2P input). Some of my students noticed the websockets didn&#8217;t work in the latest versions of Google Chrome. [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s been a while since my last update on AIRServer &#8211; an actionscript library which enables you to set up a socket server in Adobe AIR, which listens to multiple socket inputs (native AMF sockets, websockets and P2P input).</p>
<p>Some of my students noticed the websockets didn&#8217;t work in the latest versions of Google Chrome. This is because Google chrome uses another version of the websocket protocol. If you enjoy reading specs, you can find it at <a href="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10">http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10</a> :-)</p>
<p>Anyway, took me quite some work, but I finally got it working. I was able to port some of the code of the Bauglir Internet Library (<a href="http://www.webnt.eu/index.php">http://www.webnt.eu/index.php</a>) to actionscript. AIRServer now supports both hybi-00 and hybi-10 of the protocol.</p>
<p><del datetime="2011-12-15T09:39:34+00:00"><a href="http://labs.aboutme.be/airserver/airserver-0.3.zip">You can download the updated library and demo&#8217;s here</a>. Enjoy!</del></p>
<p>Update on <a href="http://blog.aboutme.be/2011/12/23/airserver-0-5-socket-byte-concatenation/">http://blog.aboutme.be/2011/12/23/airserver-0-5-socket-byte-concatenation/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aboutme.be/2011/11/24/airserver-support-for-websocket-version-8/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Source code for airserver space game</title>
		<link>http://blog.aboutme.be/2011/07/04/source-code-for-airserver-space-game/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=source-code-for-airserver-space-game</link>
		<comments>http://blog.aboutme.be/2011/07/04/source-code-for-airserver-space-game/#comments</comments>
		<pubDate>Mon, 04 Jul 2011 09:42:35 +0000</pubDate>
		<dc:creator>wouter</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.aboutme.be/?p=198</guid>
		<description><![CDATA[Sorry for neglecting this follow-up post, but here it is: the source code for the airserver space game from my previous post. The zip file is actually a Flash Builder 4.5 workspace, containing the following projects: - AIRServer: the library project containing the AIRServer classes - CocoonP2P: the cocoon P2P library - DevineSpaceGameAIRServer: the AIR [...]]]></description>
			<content:encoded><![CDATA[<p>Sorry for neglecting this follow-up post, but here it is: <a href="http://labs.aboutme.be/airserver/space-game-flash-builder-workspace.zip">the source code for the airserver space game</a> from <a href="http://blog.aboutme.be/2011/06/23/airserver-example-multi-user-smartphone-controlled-game/">my previous post</a>.</p>
<p>The zip file is actually a Flash Builder 4.5 workspace, containing the following projects:</p>
<p>- AIRServer: the library project containing the AIRServer classes<br />
- CocoonP2P: the cocoon P2P library<br />
- DevineSpaceGameAIRServer: the AIR server, containing the space game<br />
- DevineSpaceGameControllerAMF: A mobile controller, using an AMF socket connection<br />
- DevineSpaceGameControllerP2P: A mobile controller, using CocoonP2P</p>
<p>When the game is running, you can control it through websockets aswel: surf to <a href="http://labs.aboutme.be/airserver/spaceshooter/">http://labs.aboutme.be/airserver/spaceshooter/</a> with an iPhone4 / iPod Touch 2 or iPad to control the game.</p>
<p>Enjoy!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aboutme.be/2011/07/04/source-code-for-airserver-space-game/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AIRServer example: multi-user smartphone controlled game</title>
		<link>http://blog.aboutme.be/2011/06/23/airserver-example-multi-user-smartphone-controlled-game/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=airserver-example-multi-user-smartphone-controlled-game</link>
		<comments>http://blog.aboutme.be/2011/06/23/airserver-example-multi-user-smartphone-controlled-game/#comments</comments>
		<pubDate>Thu, 23 Jun 2011 14:49:48 +0000</pubDate>
		<dc:creator>wouter</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.aboutme.be/?p=188</guid>
		<description><![CDATA[I wrote this game on top of my AIRServer library, as part of some multi-user explorations with the flash platform. The graphics were created by my HOWEST colleague Jynse Cremers :-) Users can join a 30-second spacegame. Each user controls a spaceship with their smartphone. The game itself was built with Adobe AIR and the [...]]]></description>
			<content:encoded><![CDATA[<p>I wrote this game on top of my AIRServer library, as part of some multi-user explorations with the flash platform. The graphics were created by my <a href="http://howest.be">HOWEST</a> colleague <a href="http://twitter.com/jynse">Jynse Cremers</a> :-)</p>
<p>Users can join a 30-second spacegame. Each user controls a spaceship with their smartphone. The game itself was built with Adobe AIR and the AIRServer actionscript library. To join the game users can choose between a native application built with Adobe AIR, or an html5/js websockets client in their browser.</p>
<p><del datetime="2011-07-04T09:43:12+00:00">I&#8217;ll release the source files after some cleaning up, so you can play around with it aswell!</del></p>
<p>Update: find the <a href="http://blog.aboutme.be/2011/07/04/source-code-for-airserver-space-game/">source files in the follow-up post</a>!</p>
<p><iframe src="http://player.vimeo.com/video/25446935?title=0&amp;byline=0&amp;portrait=0" width="500" height="284" frameborder="0"></iframe>
<p><a href="http://vimeo.com/25446935">Smartphone controlled game</a>  on <a href="http://vimeo.com">Vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aboutme.be/2011/06/23/airserver-example-multi-user-smartphone-controlled-game/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Communicating between websockets, local P2P, flash sockets &amp; AIR</title>
		<link>http://blog.aboutme.be/2011/06/10/communicating-between-websockets-local-p2p-flash-sockets-air/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=communicating-between-websockets-local-p2p-flash-sockets-air</link>
		<comments>http://blog.aboutme.be/2011/06/10/communicating-between-websockets-local-p2p-flash-sockets-air/#comments</comments>
		<pubDate>Fri, 10 Jun 2011 12:00:43 +0000</pubDate>
		<dc:creator>wouter</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.aboutme.be/?p=174</guid>
		<description><![CDATA[I&#8217;ve shown you how to handle websockets in adobe air, and how to set up communication between flash sockets, websockets and adobe air using a library I wrote. I&#8217;ve extended the library with support for local P2P, using Cocoon P2P. It&#8217;s another option to create a multiuser game with different inputs. Right now you can [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve shown you <a href="http://blog.aboutme.be/2011/06/07/handling-websocket-connections-with-adobe-air-serversocket/">how to handle websockets in adobe air</a>, and how to <a href="http://blog.aboutme.be/2011/06/09/airserver-handling-both-sockets-websockets-in-adobe-air/">set up communication between flash sockets, websockets and adobe air</a> using a library I wrote. I&#8217;ve extended the library with support for local P2P, using <a href="http://code.google.com/p/cocoon-p2p/">Cocoon P2P</a>.</p>
<p><img src="http://blog.aboutme.be/wp-content/uploads/2011/06/airserver-sockets-websockets-rtmfp.png" alt="airserver-sockets-websockets-rtmfp" title="airserver-sockets-websockets-rtmfp" width="500" height="389" class="alignnone size-full wp-image-175" /></p>
<p><span id="more-174"></span></p>
<p>It&#8217;s another option to create a multiuser game with different inputs. Right now you can use flash sockets, websockets and rtmfp (P2P) connectivity in a mixed environment to communicate with eachother.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">server = <span style="color: #000000; font-weight: bold;">new</span> AIRServer<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">//adding endpoints</span>
server.<span style="color: #006600;">addEndPoint</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> SocketEndPoint<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1234</span>, <span style="color: #000000; font-weight: bold;">new</span> AMFSocketClientHanderFactory<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> NativeObjectSerializer<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
server.<span style="color: #006600;">addEndPoint</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> SocketEndPoint<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1235</span>, <span style="color: #000000; font-weight: bold;">new</span> WebSocketClientHandlerFactory<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> JSONSerializer<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
server.<span style="color: #006600;">addEndPoint</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> CocoonP2PEndPoint<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;be.aboutme.airserver.demos.Messages&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">//add event listeners</span>
server.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>AIRServerEvent.<span style="color: #006600;">CLIENT_ADDED</span>, clientAddedHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
server.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>AIRServerEvent.<span style="color: #006600;">CLIENT_REMOVED</span>, clientRemovedHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
server.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>MessageReceivedEvent.<span style="color: #006600;">MESSAGE_RECEIVED</span>, messageReceivedHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">//start the server</span>
server.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>Adding a cocoon endpoint, is even simpler than adding socket endpoints, all you have to do is pass an instance of the CocoonP2PEndpoint class to the addEndpoint function of the server, and specify a groupname for the P2P netgroup. You can handle the messages just like any other message on the server, it doesn&#8217;t matter if the message comes from a socket, websocket or via rtmfp.</p>
<p><del datetime="2011-11-24T19:33:18+00:00">You can <a href="http://labs.aboutme.be/airserver/airserver-0.2.zip">download an updated version of the library project</a> and an updated version of the demo&#8217;s with a cocoon P2P client. </del>Big thanks to <a href="http://www.peterelst.com">Peter Elst</a> for CocoonP2P, it makes P2P on the local network a lot easier to implement!</p>
<p>Update on <a href="http://blog.aboutme.be/2011/12/23/airserver-0-5-socket-byte-concatenation/">http://blog.aboutme.be/2011/12/23/airserver-0-5-socket-byte-concatenation/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aboutme.be/2011/06/10/communicating-between-websockets-local-p2p-flash-sockets-air/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>AIRServer &#8211; handling both sockets &amp; websockets in Adobe AIR</title>
		<link>http://blog.aboutme.be/2011/06/09/airserver-handling-both-sockets-websockets-in-adobe-air/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=airserver-handling-both-sockets-websockets-in-adobe-air</link>
		<comments>http://blog.aboutme.be/2011/06/09/airserver-handling-both-sockets-websockets-in-adobe-air/#comments</comments>
		<pubDate>Thu, 09 Jun 2011 09:42:06 +0000</pubDate>
		<dc:creator>wouter</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.aboutme.be/?p=166</guid>
		<description><![CDATA[In my previous post, I talked about how to handle websockets in Adobe AIR. I&#8217;ve written a library around it, which makes it easier to implement in your projects. Another benefit of the library, is you can combine websockets with regular sockets, so you&#8217;re able to talk between Adobe AIR, websockets and flash sockets. First [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.aboutme.be/2011/06/07/handling-websocket-connections-with-adobe-air-serversocket/">In my previous post, I talked about how to handle websockets in Adobe AIR</a>. I&#8217;ve written a library around it, which makes it easier to implement in your projects. Another benefit of the library, is you can combine websockets with regular sockets, so you&#8217;re able to talk between Adobe AIR, websockets and flash sockets.</p>
<p><img src="http://blog.aboutme.be/wp-content/uploads/2011/06/airserver-messages-demo.png" alt="AIRServer Messages Demo" title="AIRServer Messages Demo" width="500" height="226" class="size-full wp-image-168" /></p>
<p><span id="more-166"></span></p>
<p>First of all, <a href="http://labs.aboutme.be/airserver/airserver-0.1.zip">download the zip file containing the library and some demo projects</a>. Import the library project into Flash Builder. Next step could be checking out the demo&#8217;s: you&#8217;ll need the server demo (MessagesDemoServer), which is an Adobe AIR app.</p>
<p>This MessagesDemoServer example, listens for amf sockets on port 1234 and websockets on port 1235:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">server = <span style="color: #000000; font-weight: bold;">new</span> AIRServer<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">//add the listening endpoints</span>
server.<span style="color: #006600;">addEndPoint</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> SocketEndPoint<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1234</span>, <span style="color: #000000; font-weight: bold;">new</span> AMFSocketClientHanderFactory<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> NativeObjectSerializer<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
server.<span style="color: #006600;">addEndPoint</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> SocketEndPoint<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1235</span>, <span style="color: #000000; font-weight: bold;">new</span> WebSocketClientHandlerFactory<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> JSONSerializer<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">//add event listeners</span>
server.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>AIRServerEvent.<span style="color: #006600;">CLIENT_ADDED</span>, clientAddedHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
server.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>AIRServerEvent.<span style="color: #006600;">CLIENT_REMOVED</span>, clientRemovedHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
server.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>MessageReceivedEvent.<span style="color: #006600;">MESSAGE_RECEIVED</span>, messageReceivedHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">//start the server</span>
server.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>You&#8217;ll also notice the need to specify a &#8220;ClientHandler Factory&#8221;. This way, you can specify custom object serializers if needed and custom crossdomain xmls (optional). Right now, there&#8217;s support for JSON encoding (for text-socket communication like websockets) and native encoding (for communication with flash client sockets).</p>
<p>There are two clients in the examples aswell: an AMF Client (which is basically a flex app to connect &#038; send messages to the server), and a HTML5/Javascript Client (same functionality as the flex application).</p>
<p><del datetime="2011-06-10T12:00:54+00:00">So, <a href="http://labs.aboutme.be/airserver/airserver-0.1.zip">download &#038; enjoy this library</a>. You can report bugs, or send in suggestions in the comments&#8230; Stay tuned for some more updates the next couple of days&#8230;</del></p>
<p>Update on <a href="http://blog.aboutme.be/2011/12/23/airserver-0-5-socket-byte-concatenation/">http://blog.aboutme.be/2011/12/23/airserver-0-5-socket-byte-concatenation/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aboutme.be/2011/06/09/airserver-handling-both-sockets-websockets-in-adobe-air/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Handling websocket connections with Adobe AIR ServerSocket</title>
		<link>http://blog.aboutme.be/2011/06/07/handling-websocket-connections-with-adobe-air-serversocket/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=handling-websocket-connections-with-adobe-air-serversocket</link>
		<comments>http://blog.aboutme.be/2011/06/07/handling-websocket-connections-with-adobe-air-serversocket/#comments</comments>
		<pubDate>Tue, 07 Jun 2011 13:28:37 +0000</pubDate>
		<dc:creator>wouter</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.aboutme.be/?p=153</guid>
		<description><![CDATA[Since Adobe AIR 2.0, you can create your own socket-servers, using the flash.net.ServerSocket class. This makes it easy to hook external applications to your AIR applications, for example to create a game (server) with multiple devices as game controllers (socket clients). With an adobe air serversocket, most of the time, the clients will be other [...]]]></description>
			<content:encoded><![CDATA[<p>Since Adobe AIR 2.0, you can create your own socket-servers, using the flash.net.ServerSocket class. This makes it easy to hook external applications to your AIR applications, for example to create a game (server) with multiple devices as game controllers (socket clients).</p>
<p><span id="more-153"></span></p>
<p>With an adobe air serversocket, most of the time, the clients will be other flash-based applications (swfs or native apps built with Adobe AIR). HTML5 introduced the concept of websockets: a way to create your own socket connections from an html page (using javascript) to a server. You&#8217;ll need to implement the right protocol to handle these connections, but with some work, you&#8217;re able to create an html/js mobile controller for an Adobe AIR application. Big advantage here is you don&#8217;t need to install a native application, you can just surf to a url, and start sending data between your client and your server.</p>
<p><strong>Server side</strong></p>
<p>First of all, I&#8217;ll go through the code on the server. I assume you&#8217;ve created an Adobe AIR 2.0 (or higher) project in your AS editor of choice. First of all, you&#8217;ll need to create an instance of the ServerSocket class and hook up some event listeners:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">serverSocket = <span style="color: #000000; font-weight: bold;">new</span> ServerSocket<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
serverSocket.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>ServerSocketConnectEvent.<span style="color: #0066CC;">CONNECT</span>, clientConnectHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
serverSocket.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1235</span><span style="color: #66cc66;">&#41;</span>;
serverSocket.<span style="color: #006600;">listen</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>Whenever a client connects, I create an instance of an own-written client handler class, which will manage the connected client. I manage all clienthandlers in a global clientHandlers array.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> clientConnectHandler<span style="color: #66cc66;">&#40;</span>event:ServerSocketConnectEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">var</span> clientHandler:ClientHandler = <span style="color: #000000; font-weight: bold;">new</span> ClientHandler<span style="color: #66cc66;">&#40;</span>event.<span style="color: #006600;">socket</span><span style="color: #66cc66;">&#41;</span>;
   clientHandler.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #0066CC;">CLOSE</span>, clientHandlerCloseHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
   clientHandlers.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span>clientHandler<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>The clienthandler instances, manage all communication between the server and the client. This is where some of the websocket-specific stuff comes in: the first message the server receives, is a handshake. We&#8217;ll need to send back a specific message to the client, otherwise the client will drop the connection with the server. <a href="http://en.wikipedia.org/wiki/WebSockets">Read more about websockets and this handshake mechanism on wikipedia.</a></p>
<p>We listen for data in this clientHandler class:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> ClientHandler<span style="color: #66cc66;">&#40;</span>socket:Socket<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
   <span style="color: #0066CC;">this</span>.<span style="color: #006600;">socket</span> = socket;
   socket.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>ProgressEvent.<span style="color: #006600;">SOCKET_DATA</span>, socketDataHandler, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>And inside this socketDataHandler, we&#8217;ll find the handshake logic:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> socketDataHandler<span style="color: #66cc66;">&#40;</span>event:ProgressEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
   <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>socket.<span style="color: #006600;">bytesAvailable</span> <span style="color: #66cc66;">&gt;</span> <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>
   <span style="color: #66cc66;">&#123;</span>
      <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>firstRequestProcessed<span style="color: #66cc66;">&#41;</span>
      <span style="color: #66cc66;">&#123;</span>
         firstRequestProcessed = <span style="color: #000000; font-weight: bold;">true</span>;
         <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">message</span>:<span style="color: #0066CC;">String</span> = socketBytes.<span style="color: #006600;">readUTFBytes</span><span style="color: #66cc66;">&#40;</span>socketBytes.<span style="color: #006600;">bytesAvailable</span><span style="color: #66cc66;">&#41;</span>;
         <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">message</span>.<span style="color: #0066CC;">indexOf</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;GET &quot;</span><span style="color: #66cc66;">&#41;</span> == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>
         <span style="color: #66cc66;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">var</span> messageLines:<span style="color: #0066CC;">Array</span> = <span style="color: #0066CC;">message</span>.<span style="color: #0066CC;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #66cc66;">&#41;</span>;
            <span style="color: #000000; font-weight: bold;">var</span> fields:<span style="color: #0066CC;">Object</span> = <span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span>;
            <span style="color: #000000; font-weight: bold;">var</span> requestedURL:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;&quot;</span>;
            <span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i:uint = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> messageLines.<span style="color: #0066CC;">length</span>; i++<span style="color: #66cc66;">&#41;</span>
            <span style="color: #66cc66;">&#123;</span>
               <span style="color: #000000; font-weight: bold;">var</span> line:<span style="color: #0066CC;">String</span> = messageLines<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>;
               <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>i == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>
               <span style="color: #66cc66;">&#123;</span>
                  <span style="color: #000000; font-weight: bold;">var</span> getSplit:<span style="color: #0066CC;">Array</span> = line.<span style="color: #0066CC;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot; &quot;</span><span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>getSplit.<span style="color: #0066CC;">length</span> <span style="color: #66cc66;">&gt;</span> <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>
                  <span style="color: #66cc66;">&#123;</span>
                     requestedURL = getSplit<span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span>;
                  <span style="color: #66cc66;">&#125;</span>
               <span style="color: #66cc66;">&#125;</span>
               <span style="color: #b1b100;">else</span>
               <span style="color: #66cc66;">&#123;</span>
                  <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">index</span>:<span style="color: #0066CC;">int</span> = line.<span style="color: #0066CC;">indexOf</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;:&quot;</span><span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span> <span style="color: #66cc66;">&gt;</span> -<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>
                  <span style="color: #66cc66;">&#123;</span>
                     <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">key</span>:<span style="color: #0066CC;">String</span> = line.<span style="color: #0066CC;">substr</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>, <span style="color: #0066CC;">index</span><span style="color: #66cc66;">&#41;</span>;
                     fields<span style="color: #66cc66;">&#91;</span><span style="color: #0066CC;">key</span><span style="color: #66cc66;">&#93;</span> = line.<span style="color: #0066CC;">substr</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">index</span> + <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">replace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">/</span>^<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span>\s<span style="color: #66cc66;">|</span>\t<span style="color: #66cc66;">|</span>\n<span style="color: #66cc66;">&#93;</span>+<span style="color: #66cc66;">&#41;</span>?<span style="color: #66cc66;">&#40;</span>.<span style="color: #66cc66;">*</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span>\s<span style="color: #66cc66;">|</span>\t<span style="color: #66cc66;">|</span>\n<span style="color: #66cc66;">&#93;</span>+<span style="color: #66cc66;">&#41;</span>?$<span style="color: #66cc66;">/</span>gm, <span style="color: #ff0000;">&quot;$2&quot;</span> <span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #66cc66;">&#125;</span>
               <span style="color: #66cc66;">&#125;</span>
            <span style="color: #66cc66;">&#125;</span>
            <span style="color: #808080; font-style: italic;">//check the websocket version</span>
            <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Sec-WebSocket-Version&quot;</span><span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>= <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span>
            <span style="color: #66cc66;">&#123;</span>
               <span style="color: #808080; font-style: italic;">//NOT SUPPORTED YET</span>
            <span style="color: #66cc66;">&#125;</span>
            <span style="color: #b1b100;">else</span>
            <span style="color: #66cc66;">&#123;</span>
               <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Sec-WebSocket-Key1&quot;</span><span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>= <span style="color: #000000; font-weight: bold;">null</span> <span style="color: #66cc66;">&amp;&amp;</span> fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Sec-WebSocket-Key2&quot;</span><span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>= <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span>
               <span style="color: #66cc66;">&#123;</span>
                  <span style="color: #808080; font-style: italic;">//draft-ietf-hybi-thewebsocketprotocol-00</span>
                  <span style="color: #808080; font-style: italic;">//send a response</span>
                  <span style="color: #000000; font-weight: bold;">var</span> result:<span style="color: #66cc66;">*</span> = fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Sec-WebSocket-Key1&quot;</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">match</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span>-<span style="color: #cc66cc;">9</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">/</span>gi<span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #000000; font-weight: bold;">var</span> key1Nr:uint = <span style="color: #66cc66;">&#40;</span>result is <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#41;</span> ? uint<span style="color: #66cc66;">&#40;</span>result.<span style="color: #0066CC;">join</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #cc66cc;">1</span>;
                  result = fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Sec-WebSocket-Key1&quot;</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">match</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">/</span> <span style="color: #66cc66;">/</span>gi<span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #000000; font-weight: bold;">var</span> key1SpaceCount:uint = <span style="color: #66cc66;">&#40;</span>result is <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#41;</span> ? result.<span style="color: #0066CC;">length</span> : <span style="color: #cc66cc;">1</span>;
                  <span style="color: #000000; font-weight: bold;">var</span> key1Part:<span style="color: #0066CC;">Number</span> = key1Nr <span style="color: #66cc66;">/</span> key1SpaceCount;
&nbsp;
                  result = fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Sec-WebSocket-Key2&quot;</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">match</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span>-<span style="color: #cc66cc;">9</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">/</span>gi<span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #000000; font-weight: bold;">var</span> key2Nr:uint = <span style="color: #66cc66;">&#40;</span>result is <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#41;</span> ? uint<span style="color: #66cc66;">&#40;</span>result.<span style="color: #0066CC;">join</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #cc66cc;">1</span>;
                  result = fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Sec-WebSocket-Key2&quot;</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">match</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">/</span> <span style="color: #66cc66;">/</span>gi<span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #000000; font-weight: bold;">var</span> key2SpaceCount:uint = <span style="color: #66cc66;">&#40;</span>result is <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#41;</span> ? result.<span style="color: #0066CC;">length</span> : <span style="color: #cc66cc;">1</span>;
                  <span style="color: #000000; font-weight: bold;">var</span> key2Part:<span style="color: #0066CC;">Number</span> = key2Nr <span style="color: #66cc66;">/</span> key2SpaceCount;
&nbsp;
                  <span style="color: #808080; font-style: italic;">//calculate binary md5 hash</span>
                  <span style="color: #000000; font-weight: bold;">var</span> bytesToHash:ByteArray = <span style="color: #000000; font-weight: bold;">new</span> ByteArray<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                  bytesToHash.<span style="color: #006600;">writeUnsignedInt</span><span style="color: #66cc66;">&#40;</span>key1Part<span style="color: #66cc66;">&#41;</span>;
                  bytesToHash.<span style="color: #006600;">writeUnsignedInt</span><span style="color: #66cc66;">&#40;</span>key2Part<span style="color: #66cc66;">&#41;</span>;
                  bytesToHash.<span style="color: #006600;">writeBytes</span><span style="color: #66cc66;">&#40;</span>socketBytes, socketBytes.<span style="color: #0066CC;">length</span> - <span style="color: #cc66cc;">8</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
                  <span style="color: #808080; font-style: italic;">//hash it</span>
                  <span style="color: #000000; font-weight: bold;">var</span> hash:<span style="color: #0066CC;">String</span> = MD5.<span style="color: #006600;">hashBytes</span><span style="color: #66cc66;">&#40;</span>bytesToHash<span style="color: #66cc66;">&#41;</span>;
&nbsp;
                  <span style="color: #000000; font-weight: bold;">var</span> response:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;HTTP/1.1 101 WebSocket Protocol Handshake<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> +
                     <span style="color: #ff0000;">&quot;Upgrade: WebSocket<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> +
                     <span style="color: #ff0000;">&quot;Connection: Upgrade<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> +
                     <span style="color: #ff0000;">&quot;Sec-WebSocket-Origin: &quot;</span> + fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Origin&quot;</span><span style="color: #66cc66;">&#93;</span> + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> +
                     <span style="color: #ff0000;">&quot;Sec-WebSocket-Location: ws://&quot;</span> + fields<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Host&quot;</span><span style="color: #66cc66;">&#93;</span> + requestedURL + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> +
                     <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
                  <span style="color: #000000; font-weight: bold;">var</span> responseBytes:ByteArray = <span style="color: #000000; font-weight: bold;">new</span> ByteArray<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                  responseBytes.<span style="color: #006600;">writeUTFBytes</span><span style="color: #66cc66;">&#40;</span>response<span style="color: #66cc66;">&#41;</span>;
&nbsp;
                  <span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span>i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> hash.<span style="color: #0066CC;">length</span>; i += <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>
                  <span style="color: #66cc66;">&#123;</span>
                     responseBytes.<span style="color: #006600;">writeByte</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">parseInt</span><span style="color: #66cc66;">&#40;</span>hash.<span style="color: #0066CC;">substr</span><span style="color: #66cc66;">&#40;</span>i, <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>, <span style="color: #cc66cc;">16</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #66cc66;">&#125;</span>
&nbsp;
                  responseBytes.<span style="color: #006600;">writeByte</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
                  responseBytes.<span style="color: #0066CC;">position</span> = <span style="color: #cc66cc;">0</span>;
                  socket.<span style="color: #006600;">writeBytes</span><span style="color: #66cc66;">&#40;</span>responseBytes<span style="color: #66cc66;">&#41;</span>;
                  socket.<span style="color: #0066CC;">flush</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #808080; font-style: italic;">//stop right here</span>
                  socketBytes.<span style="color: #0066CC;">clear</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                  <span style="color: #b1b100;">return</span>;
               <span style="color: #66cc66;">&#125;</span>
            <span style="color: #66cc66;">&#125;</span>
         <span style="color: #66cc66;">&#125;</span>
      <span style="color: #66cc66;">&#125;</span>
      <span style="color: #b1b100;">else</span>
      <span style="color: #66cc66;">&#123;</span>
         <span style="color: #808080; font-style: italic;">//do something else with the data</span>
      <span style="color: #66cc66;">&#125;</span>
   <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>This will accept a websocket connection and send back the correct handshake. So, how do you connect from html / javascript to this AIR server?</p>
<p><strong>HTML5 Websocket client</strong></p>
<p>You&#8217;ll connect to the AIR server using javascript. This is pretty straightforward: you create a WebSocket object, link the correct event handlers and connect to the air server on the correct port:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
   <span style="color: #000066; font-weight: bold;">try</span>
   <span style="color: #009900;">&#123;</span>
      socket <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> WebSocket<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ws://localhost:1235&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      socket.<span style="color: #660066;">onopen</span> <span style="color: #339933;">=</span> socketOpenHandler<span style="color: #339933;">;</span>
      socket.<span style="color: #660066;">onmessage</span> <span style="color: #339933;">=</span> socketMessageHandler<span style="color: #339933;">;</span>
      socket.<span style="color: #660066;">onclose</span> <span style="color: #339933;">=</span> socketCloseHandler<span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
   <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>exception<span style="color: #009900;">&#41;</span>
   <span style="color: #009900;">&#123;</span>
      <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Error: &quot;</span> <span style="color: #339933;">+</span> exception<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> socketOpenHandler<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
   <span style="color: #006600; font-style: italic;">//connected to the server</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> socketMessageHandler<span style="color: #009900;">&#40;</span>message<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
   <span style="color: #006600; font-style: italic;">//message received: message.data</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> socketCloseHandler<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
   <span style="color: #006600; font-style: italic;">//connection closed</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>That&#8217;s it. Fire up your Adobe AIR server, and you should be able to connect to the Adobe AIR application from javascript!</p>
<p><del datetime="2011-11-24T19:35:43+00:00">I&#8217;ll post some examples &#038; a utility library in a follow-up post, so stay tuned :-)</del></p>
<p>Update: Check <a href="http://blog.aboutme.be/2011/11/24/airserver-support-for-websocket-version-8/">http://blog.aboutme.be/2011/11/24/airserver-support-for-websocket-version-8/</a> for a library and demos.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aboutme.be/2011/06/07/handling-websocket-connections-with-adobe-air-serversocket/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flash &#8211; HTML5 Drag and drop integration</title>
		<link>http://blog.aboutme.be/2010/02/21/flash-html5-drag-and-drop-integration/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=flash-html5-drag-and-drop-integration</link>
		<comments>http://blog.aboutme.be/2010/02/21/flash-html5-drag-and-drop-integration/#comments</comments>
		<pubDate>Sun, 21 Feb 2010 15:46:13 +0000</pubDate>
		<dc:creator>wouter</dc:creator>
				<category><![CDATA[Actionscript 3.0]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.aboutme.be/?p=138</guid>
		<description><![CDATA[After seeing Mario Klingemann&#8217;s HTML5 drag and drop demo, I wanted to write a library around it and make it a little more cross-browser. Register the necessary event listeners to the class and react to events such as dragging a file / element over your swf, dropping data or dropping a file on the swf. [...]]]></description>
			<content:encoded><![CDATA[<p>After seeing <a href="http://www.quasimondo.com/examples/draganddrop/dragAndDropFFF.php">Mario Klingemann&#8217;s HTML5 drag and drop demo</a>, I wanted to write a library around it and make it a little more cross-browser.</p>
<p>Register the necessary event listeners to the class and react to events such as dragging a file / element over your swf, dropping data or dropping a file on the swf.</p>
<p><code>FlashDragDrop.addEventListener(FlashDragDropEvent.DROP_DATA, dropDataHandler);</code></p>
<p>You don&#8217;t need to add any extra javascript to your flash embed, the javascript necessary to add the drag and drop support is injected automatically.</p>
<p>You can detect the drag and drop events in the latest versions of Firefox, Safari and IE. Accessing the content of the dropped files only works in the latest version of Firefox (try dropping an image).</p>
<p>You can <a href="http://labs.aboutme.be/flash_drag_drop/demo/">check out a demo</a> or <a href="http://labs.aboutme.be/flash_drag_drop/flash_drag_drop_source.zip">download the source files</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aboutme.be/2010/02/21/flash-html5-drag-and-drop-integration/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

