Marauroa Chat Tutorial/HTML5 Client: Difference between revisions

Before we can put it all together, there is one remaining piece: We need to listen to perceptions sent by the server and display the chat in our log window.

In this tutorial the chat message are not just events, but objects. This allows us to store them to the database and allow late client to read the history. Normally we'd use an marauroa.rpobjectFactory to create those objects with the correct prototype ("Player", "Item", "Creature", ...) as they are transferred from the server. You can have a look at this [http://arianne.cvs.sf.net/viewvc/arianne/stendhal/srcjs/stendhal-entities.js?revision=1.14&view=markup file of the experimental Stendhal HTML5 client], to learn how the rpobjectFactory is used.

For this really simple chat client, we are only interested in chat objects. Therefore we skip this step for now and work directly on the perception event for new objects:

<source lang="javascript">

marauroa.perceptionListener.onAdded = function(object) {

if (object.has("text")) {

ui.chatLog.addLine("text", object.get("from") + "* : " + object.get("text"));

}

}

ui: {

chatLog: {

addLine: function(type, msg) {

var e = document.createElement('p');

e.className = "log" + ui.escapeHTML(type);

e.innerHTML = ui.escapeHTML(msg);

document.getElementById('chat').appendChild(e);

document.getElementById('chat').scrollTop = 1000000;

},

clear: function() {

document.getElementById("chat").innerHTML = "";

}

/** HTML code escaping */

escapeHTML: function(msg){

return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace("\n", "<br>");

}

}

}

</source>

Note: When putting all together, you need to merge the "ui" package from the previous section with the one defined here.

'''Sorry, this part is still a bit messy. We promise to make it as easy as the traditional Marauroa version in the future.'''

Instead of the official download version of marauroa, you need to download the current development version directly from git.

Check out Marauroa, Branch ''perception_json'' into a new project:

* File -> Import

* Git -> Projects from Git

* Clone URI: git://arianne.git.sourceforge.net/gitroot/arianne/marauroa

* Make sure that both "src" and "srcexternal" are marked as source code folders.

Follow the instructions from the previous pages to setup your Marauroa server, with these little changes:

* Add all the additional libraries to the classpath.

* Create a Run Configuration, that launches ''marauroa.server.net.web.WebSocketServer''

Create or reuse your server.ini

* Edit server.ini to add these lines, replacing "accountname" with the name of your account for testing:

<source lang="ini">

http_port=8080

debug_fake_web_username=accountname

</source>

* Launch the WebSocketServer run configuration

* Visit <nowiki>http://localhost:8080/chat.html</nowiki>

* Best to do this using firefox, with firebug extension installed (if you will be developing or studying the client)