Marauroa Chat Tutorial/HTML5 Client: Difference between revisions

Jump to navigation Jump to search
← Older edit
Content deleted Content added
imported>Hendrik Brummermann
implementing the framework
imported>Hendrik Brummermann
 
(23 intermediate revisions by the same user not shown)
Line 41: Line 41:
<h1>Marautoa Chat Tutoral Client in HTML 5</h1>
<h1>Marautoa Chat Tutoral Client in HTML 5</h1>
<!-- input field for text -->
<!-- input field for text -->
<form id="form" onsubmit="stendhal.ui.chatBar.send(); return false">
<form id="form" onsubmit="ui.chatBar.send(); return false">
<input type="text" name="chatbar" id="chatbar" style="width:90%">
<input type="text" name="chatbar" id="chatbar" style="width:90%">
<input type="submit" value="Send">
<input type="submit" value="Send">
Line 94: Line 94:
== Handling actions ==
== Handling actions ==


So far, our client is able to connect to a Marauroa based server and display some basic feedback. There is an input field for chat message. Now we want to send those message to the server.
{{TODO|Complete this section}}

In order to keep our code well structures, we create an object called "ui" and a subobject called "chatbar". For Java developers: While Java is a class based programming languages, JavaScript is prototype based.


<source lang="javascript">
/** user interface package */
ui = {
/** methods for the chat input box */
chatBar: {
/** clear the chat window */
clear: function() {
document.getElementById('chatbar').value = '';
},

/** send a message to the server */
send: function() {
var val = document.getElementById('chatbar').value;

// create an RPAction object of type "chat" with the message.
var action = {
"type": "chat",
"text": val;
};

// send the message to the server and clear the input field
marauroa.clientFramework.sendAction(action);
this.clear();
}
}
}
</source>

== Handling perceptions ==
== Handling perceptions ==


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.
{{TODO|Complete this section}}


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.
document.onkeydown=stendhal.ui.chatBar.keydown;


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:
<!--
jSayButton.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e) {
String message = jInputField.getText();
jInputField.setText("");
client.SendMessage(message);
}
});


<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>
</source>

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


== Deployment ==
== Deployment ==


'''Sorry, this part is still a bit messy. We promise to make it as easy as the traditional Marauroa version in the future.'''
{{TODO|Explain the short cut version of deploying the webclient. At the moment there is only the documentation for the [[How to setup an experimental Stendhal HTML5 Environment?|Experimental HTML 5 Stendhal client]].}}

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)


== Next Steps ==
== Next Steps ==
Retrieved from "https://meet.konsthol.eu/w/index.php?title=Marauroa_Chat_Tutorial/HTML5_Client"