< Day Day Up >

Using Socket Servers
A socket server is an application that can accept "socket" connections. Socket
connections are persistent, which means that they let you remain connected to a server
rather than making a connection just long enough to download information before
disconnecting. Unlike a scripted page, a socket server is an application that's always
running. It can accept simultaneous connections from multiple computers and exchange
information among them. While you're connected to a socket server, you can send or
receive information at any time. Using socket connections to continually transfer data to
and from the server is how most chats and multiplayer games are created in Flash.
A key principle to understand about using socket connections with Flash is that you don't
have to request information to get information—for example, in a chat application a
message can be pushed into Flash at any time without Flash having to ask for it.

Introduction to the XMLSocket Class
This section provides a basic introduction to Flash's built-in XMLSocket class. This
discussion is simply a guide to the use of this built-in class, so you can familiarize
yourself with the general concepts needed for plugging your applications into nearly any
socket server. The exercise that follows makes use of a special socket server that wraps
most of the functionalities you're about to learn into a simple-to-use object. But more on
this in a bit. Let's look at the inherent way Flash communicates with a socket server.
Before you can connect a Flash movie to a socket server, you must create a new
XMLSocket object, using the constructor for the XMLSocket class. You can then use the
methods of the object to connect to a server and exchange information. In this section,
we'll show you how to create and use an XMLSocket object while also using the XML
class methods and properties introduced earlier in this lesson.
To create a new XMLSocket object, you must use the constructor for XMLSocket. Here's
an example:

var server:XMLSocket = new XMLSocket();


This line of ActionScript creates a new XMLSocket object named server. To connect the
XMLSocket to a server, you simply employ the connect() method using the following
syntax:

server.connect(hostName,port)


The hostName parameter is the IP address on which the socket server resides—usually a
numeric sequence (for example, 65.134.12.2). IP addresses such as 127.0.0.1 or localhost
are valid references to your own computer. If you type http://localhost into your Web
browser's address bar, it would try to connect to your computer as if it were a Web site.
The port parameter refers to the port on which the server is listening. Flash can only
connect to ports higher than 1024. For example:

var server:XMLSocket = new XMLSocket();

server.connect("localhost", 9999)


You can close a connection with a socket by using the close() method:

server.close();


To send information via the socket connection, simply use the send() method and pass in
the object you want to send. For example:


server.send("<Text>Hi</Text>");


The XMLSocket class can respond to the following types of events:
•
onConnect— This event fires when the connection is accepted or fails.
•
onXML— This event fires when information arrives via the socket connection.
This action lets you know that new information has arrived so that you can use it.
•
onClose— This event fires when the connection with the socket is lost. This event
will not fire as a result of purposely closing the connection from Flash using the
XMLSocket.close() method.
As we did with the onLoad event in the XML class, we have to define these event
handlers with the XMLSocket object that we create. For example:

function serverConnected (success:Boolean) {

trace(success);

}

server.onConnect = serverConnected;


Here the serverConnected() function is called when the onConnect event is fired. The
success parameter in the function definition has a value of true if the connection was
successful and false if the connection was unsuccessful.
The onXML event is used as follows:


function xmlReceived (data:XML) {

trace(data);

}

server.onXML = xmlReceived;


The xmlReceived() function is called each time information arrives via the socket. The
data parameter contains the XML document pushed into Flash.
The onClose event handler can be defined and used as follows:

function socketClosed () {

//notify the user

}

server.onClose = socketClosed;


You would typically use this type of event to let the user know that a connection has been
lost.
ElectroServer 3
To utilize the functionality of any socket server, you can't just upload a script into the
CGI-bin of your Web site or place it in a normal Web-accessible directory. Usually
written in Java, C, C++, or Visual Basic, socket servers generally require root-level
access to the Web server. This usually means that you must be running your own
dedicated server in order to install and use a socket server. Fortunately, this isn't as scary

as it sounds. As a matter of fact, you can set up a socket server on your own personal
computer so that you can develop with it, which is a recommended and common practice
when developing applications that use a socket server.
For the next exercise, we'll show you how to get a socket server up and running on your
local machine so that you can go on to build a simple chat application that connects to the
socket server. To test it, you'll need to use Windows 98, Windows 2000, Windows XP, or
Windows ME.
The accompanying CD-ROM contains the installer for a Java-based socket server called
ElectroServer 3. You need to have Java 2 Runtime Environment (JRE) version 1.4.1_02
or higher installed on your machine to run ElectroServer 3, as well as to test the chat
program you build in the next section.
NOTE
ElectroServer 3 is supported by any operating system that supports the JRE. This includes
Macintosh OS X and higher, Linux, UNIX, Windows, and so on. For non–Windows
installation instructions for ElectroServer 3 and the JRE, see
/>.

The next exercise guides you through the steps to get ElectroServer 3 up and running on
your Windows computer.
1. Download and install the JRE (for Windows) by going to
.
This page will probably detect your operating system automatically. Click the
download link. The Java software most likely will be installed automatically
through the Web browser.
ElectroServer 3 will not run properly with a version of the JRE older than
1.4.1_02.
2. To install and start ElectroServer 3 on Windows, open the Lesson12/Assets
directory. Double-click the file called InstallElectroServer.exe to install
ElectroServer 3, and follow the series of prompts to completion. You don't need to
change any of the default options during the installation process.

You have just installed ElectroServer 3, the socket server that we'll use in the next
exercise to build a Flash chat. If you left the default options selected while
installing ElectroServer 3, then it also installed several example files onto your
hard drive.
3. To start ElectroServer 3, click Start > All Programs (or Program Files) >
Electrotank > ElectroServer 3 > Start ElectroServer.
If you installed the JRE properly, ElectroServer 3 should have started without any
problem.

By default, ElectroServer 3 will connect to the 127.0.0.1 IP address, which is the
IP address by which your computer refers to itself. Also, the default port on which
ElectroServer 3 will exchange data is 9875. Both the IP and the port are
configurable, but you won't need to change the settings for the chat exercise.
At least a dozen socket servers have been created for use with Flash. Among them,
here are the most popular (not in order of popularity):
o
ElectroServer 3 (www.electrotank.com/ElectroServer/) is a full-featured
socket server that was created specifically to meet the needs of multi-user
Flash game developers. As such, it has features (not seen in other socket
servers) that appeal to Flash game programmers.
o
Macromedia Flash Communication Server (www.macromedia.com) is not a
socket server, although it's similar to one. It uses a proprietary data-
exchange protocol developed by Macromedia. It can be used to accomplish
tasks such as video and audio transfer (for video chatting).
o
Unity (www.moock.org/unity/) is a general socket server that can be used
to create any number of multi-user applications, including chat and games.
The ElectroServer Class
In the next exercise, you'll build a chat program that communicates with ElectroServer 3.

When being developed, a socket server must be programmed to look for a certain
protocol. XML is a protocol, but even deeper than that, the socket server must look for
XML in a certain structure—a protocol within a protocol. For example, if you want to
send an XML-formatted login request from Flash to ElectroServer 3, it must use this
format:

<XmlDoc>

<Action>Login</Action>

<Parameters>

<Name>myName</Name>

<Password>myPassword</Password>

</Parameters>

</XmlDoc>


ElectroServer 3 reads the Action node, and then knows what else to look for. When it
sees that the Action is Login, it knows to expect a Name node and a Password node. You
must use a specific XML protocol for every socket server. XML itself is a standard, but
the structure of the XML is specific to the socket server being used.
Does this sound daunting? You can send or receive 100 or so different XML packets in
ElectroServer 3 to accomplish tasks such as sending a message, creating a room, and so
on. There is good news, though: the ElectroServer class is included with this lesson. The
ElectroServer class internally handles all of the XML formats that need to be sent or
received. You can talk to ElectroServer 3 easily through the ElectroServer class, without

having to write a single line of XML.
NOTE
Within the directory of this project's lesson files is a file named ElectroServer.as. This
file defines the ElectroServer class and its capabilities. During export or compiling of this
movie, Flash uses the contents of this file to enable the exported movie to utilize the
functionality of the ElectroServer class. It's important that this file (and its supporting
files, named Wddx.as and WddxRecordset.as) exist in the same directory as the
completed project file; otherwise, an error will occur when you export the movie.


To send a chat message to the server, this is all you need to do:

ElectroServer.sendMessage("public", "Hello world!");


This line of ActionScript executes the sendMessage method of the ElectroServer class.
The first parameter, "public", tells the ElectroServer class to send a public message to the
entire room. The second parameter is the message to send.
To send a private message to a user named Derek, you would use this line of
ActionScript:

ElectroServer.sendMessage("private", "Hello Derek!", "Derek");


NOTE
Documentation for every method, property and event of the ElectroServer class can be
found in a file named Class_Documentation.html in the directory Program
Files\Electrotank\ElectroServer 3\Examples\Flash MX 2004 on your hard drive. To find
the most up-to-date ElectroServer class and documentation, visit
/>. You can also download the ElectroServer

class as a Flash extension so that you can use the Actions panel to browse the
ElectroServer class and access help on it, just as with all other Flash classes.

It's time to build a simple chat application using ElectroServer 3. A few more basic
concepts as well as specific methods and events of the ElectroServer class will be
discussed as we go along.
1. Open Chat1.fla in the Lesson12/Assets folder.
The file contains four layers: the Actions layer, where we'll keep the ActionScript;
the Labels layer, which contains the labels for the movie; the Assets layer,
containing the text fields and buttons; and the Background layer, which contains
the interface graphics.

We'll begin by scripting the code to get a user connected to ElectroServer 3,
logged in, and joined to a room. A room is nothing more than a collection of users.
When a user sends a chat message, it's automatically sent to everyone in the room.
ElectroServer 3, like most socket servers, supports multiple rooms. Many rooms
can exists at once, each with users. A user can switch from one room to another, as
you'll see later in this exercise.
After we've scripted our project to the point where a user can log in and join a
room, we'll add the ActionScript needed to display the user list, room list, and
allow the user to chat. All of this can be done in about 80 lines of code!
2. With the Actions panel open, select Frame 1 of the Actions layer and add the
following script:
3.
4. var es:ElectroServer = ElectroServer.getInstance();
5.

The ElectroServer class is a static class (also known as a singleton), which means
that only one instance of it can exist within your movie. To create this instance of
the ElectroServer class, simply call the getInstance() method directly on the class,

and it will return a reference to itself. The line of code in this step creates a
variable named es, which is our reference to the instance of the ElectroServer
class.
For the rest of this exercise, the ElectroServer class will be accessed by using the
es reference created in this step.
NOTE
We're able to create an instance of the ElectroServer class only because of the
ElectroServer.as file that exists in the same directory as this project file. This .as
file is loaded during the process of exporting the project file SWF, enabling all the
functionality of the ElectroServer class that we'll script in the following steps.
3. Using the following code, set the IP and port to which the chat should connect:
4.
5. es.setIP("127.0.0.1");
6.
7. es.setPort(9875);
8.

When you installed ElectroServer 3, it created default settings that it would use for
its operation. Unless these settings are changed, when you start ElectroServer 3 it
will bind to your local IP address (127.0.0.1) and listen on port 9875. The script
above tells the ElectroServer class instance at which IP address to look for
ElectroServer 3, and which port at that IP it should use.
The ElectroServer class will not attempt to connect to ElectroServer 3 until you
invoke the connect() method. We'll do that later in the exercise.