Flash Multiplayer Virtual World: Setting up SmartFoxServer with Third-party HTTP and Database Server

Exclusive offer: get 50% off this eBook here
Flash Multiplayer Virtual Worlds

Flash Multiplayer Virtual Worlds — Save 50%

Build immersive, full-featured interactive worlds for games, online communities, and more

$29.99    $15.00
by Makzan | August 2010 | Web Graphics & Video

In the previous article of this three-part series by Makzan, author of Flash Multiplayer Virtual Worlds, we covered running SmartFoxServer Using Embedded Web Server and Database. SmartFoxServer is also able to work together with third-party web servers and databases, for example, Apache and MySQL.

Using the embedded HTTP and database server can be convenient for development. However, we will have SmartFoxServer running standalone while putting HTTP and database server in another standalone machine when the virtual world is released to public. We will learn how to set up a third-party HTTP and database server to cooperate with SmartFoxServer.

(For more resources on Flash, see here.)

We are going to download and install Apache and MySQL server package. These kinds of server package features have easy install that auto-configures most of the server settings. It will also install some essential tool for beginners to manage the server easily, such as GUI server administration panel.

Installing WAMP on Windows

WampServer is an open source HTTP and database server solution on Windows. WAMP stands for Windows, Apache, MySQL, and PHP package.

  1. Go to http://www.wampserver.com/en/download.php.
  2. Click on Download WampServer to download the installer.
  3. Run the installer with all default settings.
  4. The server is configured and ready.

The WampServer can run by launching from Start | Programs | WampServer | Start WampServer.

Flash Multiplayer Virtual Worlds

It will be in the task bar and the server management operation can be found by clicking the WampServer icon. We can start the server by putting the server online in the menu.

Installing MAMP on Mac OSX

Similar to WampServer, MAMP is the one package web server solution that stands for Mac, Apache, MySQL, and PHP package. The MAMP package can be downloaded at http://www.mamp.info/.

  1. Download the MAMP package from the official website.
  2. Double-click on the downloaded MAMP dmg file to mount it.
  3. Drag the MAMP folder into the Applications folder.

To run the MAMP server, go to Applications | MAMP and double-click on the MAMP.app.

Installing LAMP on Linux

As the same naming convention, the "L" stands for Linux here. Different Linux distributions use different ways to install applications. There may not be a oneclick install method on some Linux branch which requires us to install the Apache and MySQL individually. Some Linux may provide graphic user interface to install LAMP by just selecting it in the applications list. We will use Ubuntu to demonstrate the installation of LAMP.

  1. Launch terminal from Applications | Accessories | Terminal.
  2. Type following command to install LAMP.

    sudo tasksel install lamp-server

  3. The installer will progress and configure different modules.
  4. A dialog will prompt several times asking for a new MySQL root password. You can set your own MySQL password, while in the example we will leave the root password blank.

Flash Multiplayer Virtual Worlds

After the completion of the installation, the MySQL server is set up as service in the system. It runs automatically and we do not need to manually launch it to use it.

Connecting SmartFoxServer and MySQL server

SmartFoxServer is a Java application and Java database connection driver is needed to connect from SmartFoxServer to MySQL database.

Downloading JDBC Driver for MySQL

JDBC is a Java database connection driver that we need to establish connections between the Java-based SmartFoxServer and the MySQL server. The JDBC driver for MySQL is called Connector/J. We are going to install it to enable MySQL connection from SmartFoxServer.

  1. Go to http://dev.mysql.com/downloads/connector/j/5.1.html in web browser.
  2. Download the Platform Independent Zip Archive.
  3. It may ask you to log in to MySQL.com account. Click on No thanks, just take me to the downloads! to bypass the login step.
  4. Choose a mirror to download by clicking on HTTP.

Setting up the JDBC driver

The MySQL Java connector comes with a bunch of files. We only need two among them.

  1. Extract the mysql-connector-java-5.1.10.zip file to a temporary folder.
  2. Open the folder and find the mysql-connector-java-5.1.10-bin.jar file.
  3. Copy that jar file into SmartFoxServer installation directory | jre | lib | ext.
  4. Go into the src directory of the extracted directory and copy the org directory to SmartFoxServer installation directory | jre | lib | ext.

Configuring the server settings

The configuration file of SmartFoxServer is an XML file that allows us to configure many server settings. It can configure the initial zone or room creation, server address, admin authorization, value tuning for performance, and a lot more. We are going to set the database connection for testing our setup in this article (core settings are out of scope of this article).

The configuration file is called config.xml and is located in the SmartFoxServer installation directory under the Server directory.

Configuring MySQL server connection in SmartFoxServer

  1. Open the config.xml in your favorite text editor.
  2. Go to line 203 of the config.xml. This line should be within the structure of a Zone tag with name as dbZone.
  3. Change the lines 203-218 from the config.xml:
    Original code:

    <DatabaseManager active="false">
    <Driver>sun.jdbc.odbc.JdbcOdbcDriver</Driver>
    <ConnectionString>jdbc:odbc:sfsTest</ConnectionString>
    <!--
    Example connecting to MySQL

    <Driver>org.gjt.mm.mysql.Driver</Driver>
    <ConnectionString>jdbc:mysql://192.168.0.1:3306/sfsTest
    </ConnectionString>

    -->

    <UserName>yourname</UserName>
    <Password>yourpassword</Password>

    <TestSQL><![CDATA[SELECT COUNT(*) FROM contacts]]></TestSQL>

  4. Replace the code in lines 203-218 with the following code:

    <DatabaseManager active="true">
    <Driver>org.gjt.mm.mysql.Driver</Driver>
    <ConnectionString>jdbc:mysql://127.0.0.1:3306/mysql
    </ConnectionString>
    <UserName>root</UserName>
    <Password></Password>

    <TestSQL><![CDATA[SELECT NOW()]]></TestSQL>

The new setting activates the DatabaseManager and configures the JDBC driver to the MySQL connector that we just downloaded.

We also changed the user name and password of the connection to the database to "root" and empty password.

We will use the empty password through out the development process but it is strongly recommended to set your own database user password.

There is a TestSQL setting where we can write a simple database query so that the SmartFoxServer will try to run it to test if the database connection is correct. As we have not created any new databases for the virtual world, we will test the database connection by querying the current server time.

Restarting the server

We’ve just set up the connection between SmartFoxServer and third-party database. It is time to test the new setting by restarting the SmartFoxServer.

To stop the SmartFoxServer in Windows and Linux, press Ctrl + C. To stop it in Mac OS X, click on the Cancel button in the SmartFoxServer log window.

There is a log that appears as usual after we start up the server again. It is important to check the log carefully every time the config.xml is changed. The logfile can provide details of any errors that occur when it tries to load the configure file.

For example, if we configure the database connection just now but forget to activate the DatabaseManager, the server will start up correctly. Then you may spend a lot of time debugging why the database connection is not working until you find that the DatabaseManager is not active at all. This happened to me several times while I was developing my first flash virtual world.

If the server is running with the new database connection settings, the following lines will be appearing in the log. There can be different database manager settings for each zone. When checking the log, we should be aware which zone the log is referring to. We are configuring the database manager of dbZone zone now.

DB Manager Activated ( org.gjt.mm.mysql.Driver )

Zone: dbZone

If we forget to activate the DatabaseManager, we will not see the DB Manager Activated wording. Instead, the following message may appear in the log:

DB Manager is not active in this Zone!

Moreover, if the SmartFoxServer faces some fatal error on start up, it will terminate itself with more detailed error logs. The following lines are an example for error logs that appear when the MySQL connector file is missing:

Can’t load db driver: org.gjt.mm.mysql.Driver

[ Servre ] > DbManager could not retrive a connection. Java.sql.SQLException: Configuration file not found

DbManagerException: The Test SQL statement failed! Please check your configuration.

These lines state that the testing SQL failed to run, which we just set to test the connection. It also describes what exception has caused this error to help the debugging.

Flash Multiplayer Virtual Worlds

Flash Multiplayer Virtual Worlds Build immersive, full-featured interactive worlds for games, online communities, and more
Published: August 2010
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

(For more resources on Flash, see here.)

Running examples

The easiest way to run the examples is to browse the examples through the embedded web server.

  1. Start the SmartFoxServer if it is not running.
  2. Browse to http://localhost:8080 in the web browser.
  3. It will load the default page of the embedded web server with SmartFoxServer logo.
  4. Click the Install Examples if this is the first time while running the examples.
  5. Click the Browse Examples after the installed examples.
  6. A list of examples appear and you click on them to have some ideas on what SmartFoxServer can basically do.

Loading a simple chat application

Let’s test the Simple Chat in Tutorials (AS 3.0) category.

After loading the simple chat, a progress bar appears with the text connecting to server. If the example failed to connect the server, it will freeze at that screen. If it is connected to the server, a login box appears and asks for the login name.

If you failed to see the login box, there is something wrong. It may be a wrong setting in the configuration file, it may be some other issue that failed to start up the SmartFoxServer, or it may be some issue between the testing browser and the server, for example, firewall port blocking.

Flash Multiplayer Virtual Worlds

As we are testing a multiuser application, we can actually launch many instances of the chat applications to test the real-time chatting.

  1. Open several new browsers.
  2. Type in the same address of the chat application in the new browsers. The default URL is http://localhost:8080/Examples/AS3/SmartFoxChat/bin/.
  3. Log in to the chat application with different names for different browsers.
  4. Test the application by sending messages in different browsers. The messages will all appear (almost) at the same time in all browsers.

Let’s take a look on how the messages are sent between different chat application clients.

  1. One of the users types in "Hi" in the chat application.
  2. The user clicks the Send button to send the "Hi" message.
  3. The message is sent from the chat application to SmartFoxServer.
  4. SmartFoxServer decodes the message and broadcasts this messages to all connected clients in the same room.
  5. All clients who receive the "Hi" message display it on the chat application.

Flash Multiplayer Virtual Worlds

To further understand what SmartFoxServer can do, we may not only test the simple chat example but also test other examples that are provided by SmartFoxServer.

Setting up the administration panel

SmartFoxServer Pro comes with an administration panel to provide a nice graphic interface to monitor and configure the running server. We will often use the administration panel during the whole development process.

The administration panel is located in SmartFoxServer installation directory | Admin | AdminTool.swf. Another way to access it in Windows is to launch from start menu by clicking Start | Programs | SmartFoxServerPro_1.6.6 | Admin | AdminTool.

Logging in to administration panel

The default login name is sfs_admin and the default password is sfs_pass. Leave the server IP address and port unchanged, and log in to the administration panel.

There will be a prompt dialog saying that using the default password is not secure. The password can be changed in the same configuration file that we used to set up the database connection.

After we are logged in, we have a glance at all server statistics and settings. It will show statistics including data traffic, memory usage, established connections count, and dropped messages count.

It allows many operations for a server moderator to use, for example, a moderator can monitor and manage zones and rooms, send broadcast messages to specific users, kick unusual or idle users, monitor logfiles, or even change the configuration and extension files on the fly when the server is running.

Flash Multiplayer Virtual Worlds

It is strongly recommended to change the password of the admin panel even in development stage. The default password raises a security issue that someone can log in to the admin panel and retrieve all the server configuration and server extension source code, including all database passwords stored inside.

Locating the Flash Client API

API is Application Programming Interface that allows other software to interact with it. Flash Client API for SmartFoxServer is the interface that allows Flash to connect to the SmartFoxServer and interact with it.

The following code snippet shows how Flash uses the client API to interact with SmartFoxServer.

Create an instance of client API object:

var client = new SmartFoxClient();

Connect the client to the SmartFoxServer with specific IP address and port number:

client.connect("127.0.0.1",9339);

The connection between the Flash client and the SmartFoxServer is established now.

Next, we log in the user to the zone simpleChat with the username John.

client.login("simpleChat","John","");

Send public messages to all users in the same room.

client.sendPublicMessage('Hello SmartFoxServer’);

The Flash Client API is located in SmartFoxServer installation directory | Flash API. There are four directories inside it. They are ActionScript 2.0, ActionScript 3.0, RedBoxClient_AS2, and RedBoxClient_AS3. RedBoxClient is the client API for connecting the media streaming Red5 component.

Summary

In this three-part article series we have discussed how to install the SmartFoxServer and set up a web server and database. We have also understood the whole idea of how a server requirement changed from development stage to deployment stage. Then we ran an example as well as administration panel and began to have some concept of what SmartFoxServer can basically do.


Further resources on this subject:


Flash Multiplayer Virtual Worlds Build immersive, full-featured interactive worlds for games, online communities, and more
Published: August 2010
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Makzan

Makzan focuses on web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites.

He has written two books and one video course on building a Flash virtual world and creating games with HTML5 and the latest web standards. He is currently teaching courses in Hong Kong and Macao SAR.

Books From Packt


Flash 10 Multiplayer Game Essentials
Flash 10 Multiplayer Game Essentials

Unity Game Development Essentials
Unity Game Development Essentials

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

wxPython 2.8 Application Development Cookbook: RAW
wxPython 2.8 Application Development Cookbook: RAW

Flash with Drupal
Flash with Drupal

WordPress and Flash 10x Cookbook
WordPress and Flash 10x Cookbook

Joomla! with Flash
Joomla! with Flash

Scratch 1.4: Beginner’s Guide
Scratch 1.4: Beginner’s Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software