Developing TicToe HTML5/Client-Server communication: Difference between revisions
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 |
||
| (24 intermediate revisions by the same user not shown) | |||
Line 2:
== Manually logging in ==
[[File:TicToe-mockup.png|right|Manuel login]]▼
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 ⟶ 7:
First of all, we need to connect to the server. Type this command and wait for the message "connected" in the console log:
* '''<code> marauroa.clientFramework.connect(null, null);</code>
**
Line 28 ⟶ 26:
** <code> Entering world</code>
== Inspecting the world ==
If all goes well, the last message will be "Entering world".
Line 43 ⟶ 44:
* '''<code> marauroa.me.draw()</code>'''
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}}
| |||
