Developing TicToe HTML5/Preparing the Server

Development log of TicToe HTML5

• Why tic tac toe?‎
• Idea and concept
• Core
  • User interface mock
  • Object model
  • Implementing Client Entities
  • Preparing the Server
  • Implementing Server Entities
  • Client-Server communication
  • Implementing the game logic
• Adding Features
  • Login and account creation
  • Hall of fame
  • Avatars and outfits

Now it is time to get a basic (empty) server up and running.

server.ini

Marauroa is configured using a server.ini file. It tells the framework, how it can access its database and contains further information about the game. For now, just copy and paste the following code and save it as server.ini in your project root folder.

<source lang="ini">

1. Configure database using the serverless H2 engine

database_adapter=marauroa.server.db.adapter.H2DatabaseAdapter jdbc_url=jdbc:h2:~/tictoe/database/h2db;AUTO_RECONNECT=TRUE;DB_CLOSE_ON_EXIT=FALSE jdbc_class=org.h2.Driver

1. TCP port for traditional clients

tcp_port=32170

1. Web port

http_port=8080

1. The length of the server game loop in milliseconds

turn_length=300

1. Name of our game

server_typeGame=tictoe server_name=TicToe </source>

HTML5 just use https for secure communications and that is handled by the webserver. But for traditional clients, Marauroa has to do the encryption. Therefore we need to generate a key pair with the command: marauroa.tools.GenerateKeys. It will ask for the key length and then output 3 lines that we append to the server.ini.

<source lang="ini">

1. Encryption key

n = 900370704947823124855781868486098993883139326458426419821694524929194085970977109550540519463413920574303896162026330535842004647058075091756193089826466644581 e = 15 d = 120049427326376416647437582464813199184418576861123522642892603323892544796130273271757994671295519024634180073146730306761515863656819847545998907329992154007 </source>

Important: Do not use these example keys but create your own pair.

Starting the server

Make sure that marauroa.jar, and its dependencies are on the classpath. Then execute the class marauroa.server.net.web.WebSocketServer.

If all goes well, you will be greeted by some status message. The last one will be:

INFO  [main      ] marauroad                (123 ) - marauroa is up and running... (startup time: 3.1 s)

Testing client/server communication

To test the setup, we open a web browser at http://localhost:8080/index.html.

This will just result in a green screen, but we can manually connect to the server by using the Firebug console. There is an input field at the bottom, that allows you to call any defined method and to inspect any object.

First of all, we need to connect to the server. Type this command and wait for the message "connected" in the console log:

• marauroa.clientFramework.connect(null, null);
  • connected

Now we are going to create an account for testing. Please note: The password will be visible since it is just a method parameter. In the finished program there will be an user dialog for the password, with a hidden input field.

• marauroa.clientFramework.createAccount("testuser", "password", "test@example.com");
  • Account "testuser" created successfully.

After logging into that account, the server will send us some information, including a list of all character belonging to our account. The default implementation of marauroa.clientFramework.onAvailableCharacterDetails() is quite smart: It will automatically create a character, if there is none. Furthermore it will automatically pick the first one. This behaviour suites out test just fine, we may redefine it at a later stage, through.

• marauroa.clientFramework.login("testuser", "password");
  • Previous Logins []
  • ServerInfo ["tictoe", "TicToe"]
  • onAvailableCharacterDetails: Object {}
  • Character "testuser" created successfully.
  • onAvailableCharacterDetails: Object { testuser={...}}
  • Entering world

If all goes well, the last message will be "Entering world". The world is obviously empty at this stage. The next chapter will go into details on how to define the content of the world on the server.