Developing TicToe HTML5/Client-Server communication: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
imported>Hendrik Brummermann Created page with "<noinclude>{{Navigation TicToe HTML5}}__NOTOC__</noinclude> == Manually logging in == right|Manuel login With the server side implemented in the las..." |
imported>Hendrik Brummermann No edit summary |
||
| (18 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
== Manually logging in == |
== Manually logging in == |
||
| ⚫ | |||
With the server side implemented in the last chapter, we can now actually login. We visit http://localhost:8080/index.html in a web browser and open Firebug. There is an input field at the bottom, that allows you to call any defined method and to inspect any object. |
With the server side implemented in the last chapter, we can now actually login. We visit http://localhost:8080/index.html in a web browser and open Firebug. There is an input field at the bottom, that allows you to call any defined method and to inspect any object. |
||
| Line 9: | Line 7: | ||
First of all, we need to connect to the server. Type this command and wait for the message "connected" in the console log: |
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); |
* '''<code> marauroa.clientFramework.connect(null, null);</code> |
||
** <code> connected</code> |
|||
| Line 28: | Line 26: | ||
** <code> Entering world</code> |
** <code> Entering world</code> |
||
== Inspecting the world == |
|||
| ⚫ | |||
If all goes well, the last message will be "Entering world". |
If all goes well, the last message will be "Entering world". |
||
| Line 43: | Line 44: | ||
* '''<code> marauroa.me.draw()</code>''' |
* '''<code> marauroa.me.draw()</code>''' |
||
If all went well, the player name will be printed in white in the top left corner of the content area. |
|||
Congratulations. |
|||
== Automating the login == |
|||
From now on, we will code a little, test a little and repeat. Therefore it is a good idea, to automate the login process. |
|||
We add the [http://jquery.org jquery library] and create a new file tictoe.js. So the index.html now says: |
|||
<source lang="html4strict"> |
|||
<!doctype html> |
|||
<html> |
|||
<head> |
|||
<title>TicToe</title> |
|||
<style type="text/css"> |
|||
body {color: #FFF; font-family: Arial} |
|||
</style> |
|||
</head> |
|||
<body style="background-color:#0A0"> |
|||
<script type="text/javascript" src="/socket.io/socket.io.js"></script> |
|||
<script type="text/javascript" src="marauroa.compiled.js"></script> |
|||
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> |
|||
<script type="text/javascript" src="tictoe.js"></script> |
|||
<script type="text/javascript" src="tictoe-entities.js"></script> |
|||
</body> |
|||
</html> |
|||
</source> |
|||
The new file tictoe.js we host the main logic. For now, we just add an event handler for the loading of the page that will connect to the server. And a second handler, that will listen to the onLoginRequired event, and provide a hardcoded set of credentials: |
|||
<source lang="javascript"> |
|||
$(document).ready(function() { |
|||
marauroa.clientFramework.connect(null, null); |
|||
}); |
|||
marauroa.clientFramework.onLoginRequired = function() { |
|||
marauroa.clientFramework.login("testuser", "password"); |
|||
} |
|||
</source> |
|||
{{TODO|drawing: |
|||
marauroa.rpobjectFactory.entity.set = function(key, value) { |
|||
this[key] = value; |
|||
this.draw(); |
|||
} |
|||
} |
|||
{{br}} |
|||
