ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
FreeDOM (programming)
http://www.actionscript.org/resources/articles/688/1/FreeDOM-programming/Page1.html
Adam Smith
Currently I am building my WebDows project for my website Codevendor. It is my first step toward building a live web 2.0 site that works more like software. Below is a list of links to visit my site. If you would like to help contribute to WebDows contact me at [email protected]
By Adam Smith
Published on November 5, 2007
 

Free DOM or Freedom, (Free Document Object Model) is a web development technique used for creating event driven web applications. FreeDOM is designed to overcome the limitations of stateless HyperText Transfer Protocol (HTTP) transmissions. It offers a new concept for creating binary persistent connections, allowing client and server to utilize memory and resources efficiently while communicating across TCP.

Freedom is designed to replace Ajax (Asynchronous Javascript and XML) by allowing async bidirectional event driven communication to the browser DOM (Document Object Model). Using the techniques will allow you to create webpages that act more like true software applications, increasing user interaction and usability.

FreeDOM uses common programming with Javascript and Flash to create a technique that is widely supported across many platforms including future web technologies to be released.


FreeDOM (programming) Article1

Introduction

What is FreeDOM? (Free Document Object Model) is a web development technique used for creating event driven web applications. FreeDOM is designed to overcome the limitations of stateless HyperText Transfer Protocol (HTTP) transmissions.

Below I will compare FreeDOM with currently working web 2.0 concepts and show you the benefits of switching to this architecture.


Web 2.0 Techniques

There are many ways of creating webpages that go and get content from servers and update themselves. Below is a list of common ways.

  1. Ajax - An ActiveX object built into browsers that send and receive text or xml HTTP requests.
  2. IFrame - A built in browser element control that can send and request webpage content similar to Ajax.
  3. Comet - A concept of leaving a webpage in a state of constant downloading that simulates an HTTP push technology, to receive data events.
  4. HTTP Streaming - Using third party technologies such as Java Applets or Activex to stream data from server to client.
Most of these concepts come with plenty of downfalls to true application state. Ajax and Iframes, both are very resource happy. Everytime you want to get data from the server you must create an object or element and send an HTTP Request. This causes the http server to have huge amounts of requests eating up memory and processor time. There is also a delay in response time do to header information being passed back and forth. Also Ajax and Iframes do not know if there is data available, they have to send a request just to find out if it is available, an once again causing alot of not needed talking between server and client. Another issue with HTTP Requests is that it fills up your server logs. This can be a headache for servers with large amounts of traffic. Extremely large logs take up processor time, harddrive space and backup space. Ajax/Frames also can only receive text or XML. This can be very irratating because in order to use it on a page you must convert it into a usable format. Alot of websites use XML objects backend and JSON objects front end, in doing this they must have a conversion process. This is at another memory and processor expense.



Alot of developers have notice these flaws in Ajax and Iframes and have started to invent new technologies. One being Comet, another cleansing name. Comet is very hard to implement and comes with alot of unknown bugs. Basically in order to use it you usually have to create a custom web server, because most today were not made to leave requests in an open state. Most servers have timeouts and caching built in to make them faster for a get in get out way of doing business. Comet is a step up from Ajax but its not the cure. Comet can only receive asynchronous events, it cannot talk back to the server. You need to implement Comet to receive and Ajax to send, making Coment dependant on Ajax. Another downside of using Comet is that browsers also have an issue with a never ending webpage. Have you ever been on a page and it locks up causing all your other browsers windows to close... this is caused by the exe sharing memory and thread space. So Comet was a great idea but it is not feasable do to current technology.



Another technology is HTTP Streaming. There is many different versions of http streaming. One way is setting up a server to talk back and forth to ActiveX or Java Applet. Very hard to implement and maintain, with many security and licensing issues for both client and server. Most users will not install your code because of fears of corrupt code that they will not be able to remove, plus cause damage to their operating system or files. This can be very scary to the end user.

This next section I will describe FreeDOM and how it will fix these issues.

FreeDOM!

So how would one go about fixing these old technologies to make websites and application one. Should we wait for large companies to create better working browsers or should we invent it now with currently working technologies. As a developer I feel I should wait... but as an inventor I have decided to make it work. What I want is the freedom to do what I want and build what i want on a webpage. I came up with the name FreeDOM for this reason, plus it is really what we want to do. We want to be able to work with the browser DOM freely and update it whenever we choose. So I asked myself what current technologies could i use to create a true event state application. One that came to mind was Flash, with so much new hype around AIR and Flex applications. Its hard not to notice a big boom in flash usage everywhere since Adobe took over it from Macromedia. Some of the latest usage has said flash is installed on 90% or more of the machines world wide across operating systems and browsers. This got me thinking! Could I use flash in some way with my currently working webpage technology? Flash seems to work well for creating banners and animation, but could it handle passing data back and forth. After some testing with ActionScript 3.0 I have figured out a way to replace Ajax, Iframes, Comet and HTTPStreaming.

How Does FreeDOM Work?

FreeDOM works by using Flash Binary Sockets to communicate with your Custom Socket Server. To pass binary data from Flash sockets to your javascript webpage you need a custom class called ExternalInterface. This class will allow you to make calls to flash methods and add callbacks for your javascript methods. So lets see some code so you will understand.



Flash SWF Code

Add the following code to a document class .AS file. It is a wrapper for the custom JSocket class and main movie clip. Please keep in mind to keep the size of this and your jsockets small. By keeping them small you can load everything in the first preloader frame and bypass the activate SWF message.

package {
//Imports--------------------
import flash.external.ExternalInterface;//For communicating with javascript
import JSockets.JSocket;//JSocket
import flash.display.MovieClip;//Movie Clip
import flash.system.Security;//For Domain Security

import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
//---------------------------
//Main Class for creating javascript sockets
public class Main extends MovieClip {
//Create Properties----------------
private var SocketArray:Array;
//---------------------------------

//Constructor
public function Main() {

//Add Javascript EntryPoints-------------------
ExternalInterface.addCallback("CreateSocket", this.CreateSocket);
ExternalInterface.addCallback("Connect", this.Connect);
ExternalInterface.addCallback("Close", this.Close);
ExternalInterface.addCallback("Flush", this.Flush);
ExternalInterface.addCallback("Send", this.Send);
//---------------------------------------------
}
//Creates a socket for use in javascript
public function CreateSocket(_ID:String, _Cls:String, _Con:String, _Ioe:String, _Se:String, _Dat:String):void {
var NS:JSocket = new JSocket();
NS.ID = _ID;
NS.CloseEventCallback = _Cls;
NS.ConnectEventCallback = _Con;
NS.IOErrorEventCallback = _Ioe;
NS.SecurityErrorEventCallback = _Se;
NS.SocketDataEventCallback = _Dat;
this.SocketArray = new Array();
this.SocketArray.push(NS);
}
//Gets the socket object
private function GetSocket(_ID:String):JSocket {
for each (var S:JSocket in this.SocketArray) {
if (S.ID == _ID) {
return S;
}
}
return null;
}
//Connects to a host and port
public function Connect(_ID:String, _Host:String, _Port:uint):void {
//Get Working Socket----
var FS:JSocket = this.GetSocket(_ID);
//----------------------

if (FS) {
FS.Connect(_Host, _Port);
}
}
//Closes a connection to a host
public function Close(_ID:String):void {
//Get Working Socket----
var FS:JSocket = this.GetSocket(_ID);
//----------------------
if (FS) {
FS.close();
}
}
//Flushes a connection
public function Flush(_ID:String):void {
//Get Working Socket----
var FS:JSocket = this.GetSocket(_ID);
//----------------------
if (FS) {
FS.flush();
}
}
//Sends data to a connection
public function Send(_ID:String, _Data:String):void {
//Get Working Socket----
var FS:JSocket = this.GetSocket(_ID);
//----------------------

if (FS) {
FS.writeUTFBytes(_Data);
}
}
}
}

Next is the JSocket Class which wrappers the flash sockets class. Below is the code for that.

package JSockets{
//Imports--------------------
import flash.external.ExternalInterface;//For communicating with javascript
import flash.net.Socket;//Flash Socket Class
import flash.errors.*;//Flash Errors
import flash.events.*;//Flash Events
//---------------------------
//Actual socket class
public class JSocket extends Socket {
//Create Properties---------------
public var ID:String;
public var Host:String;
public var Port:uint;
public var CloseEventCallback:String;
public var ConnectEventCallback:String;
public var IOErrorEventCallback:String;
public var SecurityErrorEventCallback:String;
public var SocketDataEventCallback:String;
//--------------------------------
//Constructor
public function JSocket() {
AttachEvents();
}
//Attach Events
private function AttachEvents():void {
//Add Event Handlers-------------------------------------------------------
addEventListener(Event.CLOSE, Handler_Close);
addEventListener(Event.CONNECT, Handler_Connect);
addEventListener(IOErrorEvent.IO_ERROR, Handler_IOError);
addEventListener(SecurityErrorEvent.SECURITY_ERROR, Handler_SecurityError);
addEventListener(ProgressEvent.SOCKET_DATA, Handler_SocketData);
//-------------------------------------------------------------------------
}
//Connects to a host and port
public function Connect(_Host:String, _Port:uint):void {
Host = _Host;
Port = _Port;
//Call socket connect---
connect(Host,Port);
//----------------------
}
// Handles the close event
private function Handler_Close(event:Event):void {
ExternalInterface.call(this.CloseEventCallback, event.type);
}
// Handles the connect event
private function Handler_Connect(event:Event):void {
ExternalInterface.call(this.ConnectEventCallback, event.type);
}
// Handles if io error event
private function Handler_IOError(event:IOErrorEvent):void {
ExternalInterface.call(this.IOErrorEventCallback, event.type, event.text);
}
// Handles security error event
private function Handler_SecurityError(event:SecurityErrorEvent):void {
ExternalInterface.call(this.SecurityErrorEventCallback, event.type, event.text);

}
// Handles socket data event
private function Handler_SocketData(event:ProgressEvent):void {
ExternalInterface.call(this.SocketDataEventCallback, event.type, this.readUTFBytes(this.bytesAvailable));
}
}
}


Examples:

Terms and Conditions For Use, Copy, Distribution, and Modification

THIS CODE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS CODE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.