2008年02月27日

brianFlashing Your Chat Application Part 2

While writing up the second part of this article I thought that a straight port of the chat application would be a bit boring. I decided that I should try to add something closer to a real world application. Originally my new plan was to create a database which would store user information for logging into the chat application. The problem with that idea was that it would require you to setup a web server, DB and some kind of server side scripting language. This often causes a large headache so I decided that I would fore-go installing new software and use the OOO server to connect to and serve data from the DB. To keep it simple I decided to use a embedded DB called H2. I also mentioned we wouldn’t require any changes to the server but now that we want to use a DB we have to add in more server code.

Let’s begin by setting up the H2 DB and modifying a few settings.
First obtain the new flash source code from here Flash Hello World Chat Application
Then you can obtain the H2 db at http://www.h2database.com/ . The only file you need inside the archive is the h2.jar located in the bin folder. Copy this file into helloworld/lib.

There is quite a bit of code added but the server is basically doing the same thing as it was in the original application except a few things.
First open the helloworld/src/java/net/tutorial/server/server.properties file. Inside it is the configuration values for the DB

userdb.driver = org.h2.Driver <-- Driver
userdb.url = jdbc:h2:dbdata/chatdb <-- url using chatdb schema
userdb.username = sa <-- default user for H2
userdb.password =

If you open the build.xml I added a new line to copy the config to the distribution folder.

<target name="compile" depends="prepare">
...
<copy file="${src.dir}/net/tutorial/server/server.properties" todir="${deploy.dir}/classes/net/tutorial/server" />

I also added a new target called genrecord which is used to add code into your classes which you want to store in the DB. OOO uses their own specialized OR mapping DB API for serializing and deserializing their classes from the DB.

<!-- generates fields for persistent record classes -->
<target name="genrecord" depends="prepare">

Finally open the build.properties file and there should be two values called flex.path and player.path set these to your flex home folder and your stand alone player.

Next let’s take a look at the HelloWorldServer. I added a new function called setupDB and two new classes called H2Liaison and H2LiaisonRegistry. setupDB basically loads the properties file and sends the config to the DB API which automatically creates all the tables for you. The Liaison classes allows you to add in functions that override the default syntax when querying the DB. Often the SQL syntax or features differs slightly for each DB so while one query might work for MySQL it might not for postgres. I also added one class called HelloWorldDepo, this class handles all the database commands for added and loading records.

Inside of HelloWorldDepo there are a few things I want to point out. In the protected constructor I called initializeManagedRecords, this automatically creates the tables for me. Usually tables are created the first time you insert a record but if you want to create them during initialization you can call this function. One more function is the getManagedRecords class. This is where you add in all the classes that you want to be serialized using classes.add.

So let’s go back to the HelloWorldServer code. In the init function I commented out the code for creating rooms and modified it to create one default room and load the rest from the DB. You can also see that I pass in a class called RoomRecord. This holds some general information about when the room was created and the name of the room. This is also the class that we will store into the DB. I store this into the ChatRoomConfig so my RoomManager can access the record.

If you open up RoomManager I added in three new functions createRoom, getRoomID, getRoomName. All these functions can be called by the client. createRoom creates a room and simultaneously stores it into the DB, getRoomID returns the OID of a room given the name of it and getRoomName returns the given name of the room. Before the client used room OIDs to move around but I thought it would be easier for the client to find a room using its name. I added one more array to ChatUserObject called roomNames which stores all the current room names. Now when the client moves he calls getRoomName with a name and then the server passes him back the OID and finally the client calls moveto with that OID. I kept the roomIds array inside the ChatUserObject so it would be backwardly compatible with the Java client.

You should be able to fire up the server by calling ant server. To view your db call java -cp “h2.jar” org.h2.tools.Console this will start the H2 server. Then open a webbrowser to localhost:8082. For the url enter jdbc:h2:../dbdata/chatdb and click connect. You should see your tables to the left. If you click on the table name it will insert a select * statement in the sql query box. Hit run, then a list of your rooms should appear. If you get a connect error make sure you are not running the game server and you have permission to write db files to hallohallo/dbdata/

Next we will take a look at our client application. I’ll just give a brief overview because the majority of the code is same as the java chat application except the gui code and some controller logic code.

If you open the ChatRoomController class you can see that it implements a new interface called MessageListener. This allows the client to listen for private messages coming from the server. As you can see we listen to four different types of message called NEWROOM for notification that we created a room, ROOMNAME to get the current room name, ROOMID to get the correspoding ID for a room and FAILED if an error happened while processing our request. One thing you have to be careful of is to remove all your event listeners in didLeavePlace.

As for the ChatRoomPanel it updates the gui components via messages from the controller and sends back messages using flash events from the panel to the controller. Most of it standard flash gui code nothing too magical here.

If you open the client class we have lots of the same code to connect the client to the server. One thing that I have to mention is that AS3 does not support function overloading so you may need to use adapter classes like I did in the client

var clientAdapter :ClientAdapter =
	new ClientAdapter(
		null,
		clientDidLogon,
		null,
		clientDidLogoff,
		connectError,
		connectError);

One problem with the mxml compiler is that when optimizing it removes unused classes, but it doesn’t consider the fact that we create classes dynamically during runtime. The classFinder function is a dummy function to make sure the mxml compiler keeps that class data inside of the swf.

To start up the client just drag it to your browser or open it with a stand alone flash player. Hit make room to create a new room and click on the room names to change rooms. It’s nothing too flashy (no pun intended) but I think it’s a good starting application.

Leave a Comment

Trackbacked

trackback url for this entry: http://www.pyramid-inc.net/lab/archives/106/trackback