devl.net

some weeks ago I’ve been playing around with the possibility of flash of using sockets. I tried to connect to various services, but unless there is any crossdomain.xml on the server it is just impossible. Well, there is a way to use a server side proxy to create such connections, as it’s allowed to open sockets from the flash client to the same domain, but this isn’t always the best solution. For example if you want to connect to an IRC server, you will be limited to a few connections. Besides that, not everybody has the possibility to run a proxy server for such services.
After some hours of experiments, I got a solution. It’s not very nice and it’s questionable whether this could ever be used in productive environments – but it’s pretty nice to play with

In this example I used OpenLaszlo to do the flash part – but it can be easily reproduced with actionscript. Furthermore I decided to explain it with an IRC network and as for that (to keep it simple) I used a library to do the protocol stuff. But you can extend this to any service, that uses network connections.
It’s pretty simple:

• First we create a Java Applet, which does all the socket stuff
• This Applet will be signed to be able to open connections outside of its sandbox
• Then the Flash Client will be designed
• And after all that, a small set of Javascript Functions are needed to make them communicate

This is the example. It’s quick’n'dirty, but it works. You have to accept the Certificate. If you don’t the network connections won’t work.

Keep on reading for examples …

Lets start with the Java Applet. I’m not a Java guru and I bet my code is a little bit messy. So I advice to use it for learning purpose only
There are two classes. The first one is the main class:

1.1 The Applet: Proxy.java (2009-07-03)
It creates the instace for the sockets and offers some methods, which are used by the Javascript to communicate with the Flacs Client.

package irc.proxy;

import java.applet.Applet;
import java.awt.*;
import java.security.*;

public class Proxy extends Applet {
IRC bot;
public String bufIn;
public String bufIn2;
String chan;
String nick;

public void init()
{
bufIn = “”;
setBackground( Color.white );
}

public void connect(final String srv, final String port, String chn, String nck)
{
chan = chn;
nick = nck;
try {
bot = new IRC();
bot.setMain(this);
bot.setNick(nck);
bufIn = (String) AccessController.doPrivileged(new PrivilegedAction() {
public Object run() {
String str = “”;
try {
bot.connect(srv, Integer.parseInt(port));
} catch(Exception e) {str = “system#”+e.toString()+”\n”;}
return str;
}
});
bot.joinChannel(chn);
} catch(Exception e) {bufIn += “system#”+e.toString()+”\n”;}
}

public String getMessages()
{
String ret = bufIn;
bufIn = “”;
return ret;
}

public void sendMessage(String str)
{
bot.sendMessage(chan, str);
}

public boolean inited()
{
return true;
}

public boolean connected()
{
return bot.isConnected();
}

public void paint( Graphics g ) {
g.setColor( Color.black );
g.drawString(”IRC Proxy, Buffer: “+bufIn, 5, 15);
}
}

IRC bot is the object for network connections. This could be any class for any connections. But in this particular case, I’ve used PircBot to connect to an IRC network.
bufIn is a buffer for the incoming messages. I’ll explain this one a little bit later.
chan and nick are just specific variables for IRC.

int() and paint() can be ignored, as I used them just for some debugging outputs.

connect() is the most complicated method about this pretty simple class. It will be called by the Flash Client using the Javascript funktions and is used to make our IRC object connect to the network. setMain, setNick and joinChannel are self-explaining. But there is one tricky part:

bufIn = (String) AccessController.doPrivileged(new PrivilegedAction() {
public Object run() {
String str = "";
try {
bot.connect(srv, Integer.parseInt(port));
} catch(Exception e) {str = "system#"+e.toString()+"\n";}
return str;
}
});

When the sockets are created, we have to make sure, that there are enough rights to do so. To achieve that, AccessController.doPrivileged is used to run the thread containing the socket generation with enough privileges. Besides that, I check for any errors and write them back to bufIn. I’ll have a closer look at that privilege stuff, soon.

getMessages() is called by the Flash using Javascript to get the incoming messages from the IRC server. Unfortunately there is no clean way to invoke Javascript functions within the Applet. So there has to be a JS service, which checks the buffer (bufIn) every n milliseconds.

sendMessage() is incoked to send a message to the IRC server.

inited() just returns true and is used by JS to check whether the Applet is already loaded. (If inited() doesn’t exist, it’s not yet loaded ).

connected() is also used by JS to check whether the network object is already connected. (Flash needs to know that)

1.2 The Applet: IRC.java (2009-07-03)
This class contains the sockets and connection related stuff. In this case, it’s very very thin, because I use PircBot for the IRC logic.

package irc.proxy;

import org.jibble.pircbot.*;

public class IRC extends PircBot {
Proxy main;
public IRC() {
}

public void setMain(Proxy p) {
main = p;
}

public void setNick(String n) {
this.setName(n);
}

public void onMessage(String channel, String sender, String login, String hostname, String message) {
main.bufIn += channel+”#”+sender+”#”+message+”\n”;
}
}

The only thing that’s worth to mention is the method onMessage(). It’s inherited by PircBot class and fires as soon as there are Messages to be sent to the client. In this case, they’re brought into a quick’n'dirty format (channel#sender#message) and written into the bufIn of the Proxy class.

1.3 The Applet: Compiling fun with build.xml (2009-07-03)
It’s time to compile the proxy Applet. I used Ant to do so. If you want to do the same, I recommend the following steps:
First create a folder for our application and some subdirs where everything takes place (don’t rename the subdirs):

#mkdir irc
#cd irc
#mkdir build
#mkdir -p src/irc/proxy
#mkdir -p dest/lib
#mkdir lib

Place both, Proxy.java (2009-07-03) and IRC.java (2009-07-03) in ./src/irc/proxy. Place the build.xml (2009-07-03) in the main directory ./ – or use your own build.xml. Download PircBot and place the pircbot.jar into ./lib and ./dest/lib.
Now everything is prepared and you’re ready to build. Make sure, you’re in the “root” directory of our little application and enter

#ant

You should be thanked with something like

BUILD SUCCESSFUL
Total time: 0 seconds

There will be a Proxy.jar within the ./dest folder. It includes irc/proxy/IRC.class and irc/proxy/Proxy.class. Those paths are very important for the embed tags.

1.4 The Applet: Signing it
Now the magic takes place. To make the Applet be able to establish connections outside of its sandbox, it has to be signed. Thanks to www-personal.umich.edu where everything is described in a very easy way.
Just launch

#keytool -genkey

to generate the key pair and use

#jarsigner dest/Proxy.jar key
#jarsigner dest/lib/pircbot.jar key

to sign both – the Applet and the used library.

Now, since the Applet is signed and we’re using the AccessController, the Applet can establish any connection to any service. Nice!

2.1 Flash Client: A short look at irc.lzx (2009-07-03)
This is a very very short review of the Flash Client I’ve written. Some OpenLaszlo developers might be pleased, but I think the most of you will use Flex or Flash or whatever. It just shows, how the data is used and how you can access the Applet.

<canvas width="400" height="300">
<attribute name="nick" type="string" value="sYtest" />
<attribute name="server" type="string" value="irc.quakenet.org" />
<attribute name="port" type="string" value="6667" />
<attribute name="channel" type="string" value="#greatboard" />
<script>
flash.external.ExternalInterface.addCallback("onMessage", this, onMessage);
flash.external.ExternalInterface.addCallback("isLoaded", this, isLoaded);
flash.external.ExternalInterface.addCallback("isConnected", this, isConnected);
flash.external.ExternalInterface.addCallback("inited", this, inited);
function onMessage() {
LzBrowser.callJS("getBufIn", canvas.receiveMessage, null);
}
function isLoaded() {
//canvas.sendConnect();
}
function isConnected() {
canvas.msgs.setAttribute("text", "Connected!");
}
function inited() {
return true;
}
</script>
<method name="receiveMessage" args="str">
if (!str)
return;
var msg;
while (str)
{
if (str.indexOf("\n") &lt;= 0)
break;
msg = str.substring(0, str.indexOf("\n"));
str = str.substring(str.indexOf("\n")+1);
if (msg.indexOf("#") == 0)
var type = msg.substring(0, msg.indexOf("#", 1));
else
var type = msg.substring(0, msg.indexOf("#"));
if (type == "system")
{
var txt = msg.substring(msg.indexOf("#")+1);
canvas.msgs.setAttribute("text", canvas.msgs.text+"&lt;br /&gt;"+"&lt;b&gt;System:&lt;/b&gt; "+txt);
}
else if(type.substring(0,1) == "#")
{
var who = msg.substring(msg.indexOf("#", 1)+1, msg.indexOf("#", msg.indexOf("#", 1)+1));
var txt = msg.substring(msg.indexOf("#", msg.indexOf("#", 1)+1)+1);
canvas.msgs.setAttribute("text", canvas.msgs.text+"&lt;br /&gt;"+who+": "+txt);
}
else
{
canvas.msgs.setAttribute("text", canvas.msgs.text+"&lt;br /&gt;"+msg);
}
canvas.msgs.sb.page(1);
}
</method>
<method name="sendMessage" args="str">
LzBrowser.callJS("sendMessage", null, str);
</method>
<method name="sendConnect">
LzBrowser.callJS("sendConnect", null, canvas.server, canvas.port, canvas.channel, canvas.nick);
</method>
<view width="380" height="250" x="10" y="10" bgcolor="0x000000" />
<view name="msgs" width="378" height="248" x="11" y="11" bgcolor="0xffffff">
<attribute name="text" type="string" value="Connecting ..." />
<handler name="ontext">
this.sb.page(1);
</handler>
<text width="360" multiline="true" text="${parent.text}" />
<scrollbar name="sb" />
</view>
<edittext name="msg" x="10" y="270" height="20" width="380" doesenter="true">
<method name="doEnterDown">
if (this.text != "")
{
parent.sendMessage(this.text);
parent.receiveMessage(canvas.channel+"#"+canvas.nick+"#"+this.text+"\n");
this.setAttribute("text", "");
}
</method>
</edittext>
<view width="100%" height="100%" bgcolor="0xffffff">
</view><view x="${parent.width/2-this.width/2}" y="${parent.height/2-this.height/2}">
<edittext name="srv" text="irc.quakenet.org" width="100" height="20" />
<edittext name="prt" text="6667" width="100" height="20" />
<edittext name="chn" text="#greatboard" width="100" height="20" />
<edittext name="nck" text="Nickname" width="100" height="20" />
<button width="100" text="login" height="20">
<handler name="onclick">
canvas.setAttribute("server", parent.srv.text);
canvas.setAttribute("port", parent.prt.text);
canvas.setAttribute("channel", parent.chn.text);
canvas.setAttribute("nick", parent.nck.text);
canvas.sendConnect();
parent.parent.destroy();
</handler>
</button>
<simplelayout spacing="10" />
</view>
</canvas>

The most important task takes place within the <script> tag.

flash.external.ExternalInterface.addCallback(name, this, method)

is used to register a Method do be accessed by Javascript. The first parameter is the public name of the method, the second one the object ‘this’ references to and the last one is the reference to the Method within the Flash. I think this is quite the same as in Actionscript.
So with this statement, you can register as much public methods as needed. This is very helpful.

onMessage() is called by the Javascript, when bufIn has messages. Here we have to do a short detour. I could pass the bufIn to onMessages(), but then Safari would crash (no one knows why). So onMessages is just used to make the Flash know, there are new messages. Within that, callJS is fired (it’s a OpenLaszlo function, that invokes a Javascript function and returns the value) that’ll make JS return bufIn to the method receiveMessage (see below).

isLoaded() is fired, when the Applet (yes, the Applet, not the flash) is loaded.

isConnected() is fired when the Applet has connected to a server.

inited() is used by the Javascript to check whether the flash is loaded.

receiveMessage (see onMessage()) is the method, that receives the bufIn of the Applet. Everything I do is to parse it (remember the chan#sender#msg thing?) and display it within <msgs>.

sendMessage is used to send a message to the Applet and sendConnect is used to make the Applet connect to a IRC server.

Everything else are some elements, which display the content.

2.2 Flash Client: Compile it
You can use this example to write your own flash client. The OpenLaszlo Users can compile it easily by putting the irc.lzx into the OpenLaszlo server, run it via the Browser and deploy it as a swf8 SOLO application. Don’t use the HTML code provided by the server. In the next step, we’ll create our own. Just rename the generated irc.lzx.swf8.swf to irc.swf and place it into the under 1.3 created ./dest/ folder.

3.1 HTML/Javascript: The index.html (2009-07-03)
This is the most tricky part about our Client. We’ll make the Applet and the Flash Client communicate with each other.

<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>sYject</title>
<script type="text/javascript">
var bufIn;
function getMessages() {
setTimeout("getMessages()", 1000);
if (typeof thisMovie("externalInterfaceExample").inited != 'undefined' && typeof document.applets["irc"].inited != 'undefined')
{
bufIn = document.applets["irc"].getMessages();
if (bufIn && bufIn != "")
{
thisMovie("externalInterfaceExample").onMessage();
// Cant push args. Safari will crash ...
}
}
}
function sendMessage(str) {
document.applets["irc"].sendMessage(str+"\n");
}
function sendConnect(srv, port, chan, nick) {
document.applets["irc"].connect(srv, port, chan, nick);
}
var inited = false;
function isLoaded() {
if (inited)
return;
setTimeout("isLoaded()", 500);
if (typeof thisMovie("externalInterfaceExample").inited != 'undefined' && typeof document.applets["irc"].inited != 'undefined')
{
inited = true;
thisMovie("externalInterfaceExample").isLoaded();
isConnected();
getMessages();
}
}
var connected = false;
function isConnected() {
if (connected)
return;
setTimeout("isConnected()", 500);            if (typeof thisMovie("externalInterfaceExample").inited != 'undefined' && typeof document.applets["irc"].inited != 'undefined')
{
if (document.applets["irc"].inited())
{
connected = true;
thisMovie("externalInterfaceExample").isConnected();
}
}
}
function getBufIn() {
var ret = bufIn;
bufIn = "";
return String(ret);
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
}
else {
return document[movieName];
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
</head>
<body onload="javascript:isLoaded();">
<applet name="irc" width="1" height="1" archive="Proxy.jar,lib/pircbot.jar" code="irc/proxy/Proxy.class">
<PARAM NAME="code" VALUE="irc/proxy/Proxy.class">
<PARAM NAME="archive" VALUE="Proxy.jar,lib/pircbot.jar">
Java muss aktiviert sein.
</applet>
<object id="externalInterfaceExample" classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" border="0" style="padding: 0;" width="400" height="300" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=8,0,0,0">
<param name="movie" value="irc.swf?lzproxied=false">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="menu" value="true">
<param name="bgcolor" value="#ffffff">
<param name="allowScriptAccess" value="always">         <embed name="externalInterfaceExample" src="irc.swf?lzproxied=false" quality="high" scale="exactfit" menu="false" bgcolor="#ffffff" width="400" height="300" swLiveConnect="false" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://
www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
</body>
</html>

Save this file into the under 1.3 created ./dest/ folder. After that you’re already able to run the whole application. Just notice, that some browsers don’t behave correctly if the applet is runned locally. So you first have to upload the dest/ folder to a webserver, to run it.

First have a look at the applet tag. I’ve used the code and archive params in both ways, to make sure every browser understands it. “archive” contains our created Proxy.jar and the library pircbot.jar. “code” points to the class Proxy.class in the codepath irc/proxy/.

The object tag is a bit tricky. Notice the id of object and the name of embed. Both have to be named “externalInterfaceExample”. Otherwise our public methods of the Flash Client won’t be accessible by Javascript. Furthermore some browsers really seem to need the allowScriptAccess param.

Have a look at the thisMovie() function. It is used to access the public methods of the flash. (e.g. thisMovie(”externalInterfaceExample”).isConnected())

First of all, after the document is loaded, the isLoaded() function will be called. It will recursively call itself untill both the Applet and the Flash are loaded.

When they are loaded, isConnected() will be called, that recursively calls itself untill the Applet has connected to a server.

After isLoaded() and isConnected() are done, the both methods with the same name at the flash will be invoked. So the flash knows, that everything is loaded and the Applet has already connected.
Furthermore getMessages() will be invoked, which will recursively call itself during the whole session. It checks the Applet for new messages (document.applets["irc"].getMessages()) and invokes the Flash Client (thisMovie(”externalInterfaceExample”).onMessage()) to read the fetched messages.

4.1 Done
That’s it.
The Applet handles the connections and stores the messages in bufIn.
The Javascript pushes bufIn from the Applet to the Flash Client and pushes messages the other direction.
The Flash Client displays everything.

You can download the whole irc/ directory (irc.tar (2009-07-03)) to be able to compile it in an easier way.
If you like it, leave me a comment.
Feel free to use the codes under the GPL. Use it on your own risk.

I think I will extend the Flash Client the next few weeks in order to show what’s possible with it.
Thanks for reading.

[EDIT]
I’ve tested it with FireFox, Safari and InternetExplorer.
Opera is the only browser, that doesn’t work. I’m on it.