编辑“︁Marauroa Chat Tutorial/HTML5 Client”︁

{{Navigation for Marauroa Top|Using}}
{{Navigation for Marauroa Users}}
{{Marauroa Chat Tutorial}}

<div style="padding: 1em; border: 2px solid #AA0; width: 70%">
HTML5 support in Marauroa is in development. We are looking for feedback to stabilize the API and improve the documentation on it.
</div>

HTML5 客户端工作在现代浏览器中，无需在本地安装任何插件或其他软件。 因此，它不是用Java编写的，而是用JavaScript编写的。虽然JavaScript有一个相似的名称，但它是与Java完全不同。
== HTML Code ==

我们通过创建一个 HTML 页面来启动我们的 HTML 5 客户端，该页面由一个用于聊天日志的输出区域和一个用于输入文本的小输入字段组成。 我们使用 CSS 规则使页面看起来更漂亮。 我们使用的是 Marauroa 的开发版本，它由几个 JS 文件组成。 最终版本将包含一个文件以减少启动时间。

<source lang="html4strict">
<!doctype html>
<html><head>
    <title>Marautoa Chat Tutoral Client in HTML 5</title>
    <style type="text/css">
        body {font-family: "Arial"}
        #chat {border: 1px solid #000; padding:0.5em; overflow-y: scroll}
        #chat p {margin: 0}
        p.logclient {color: #888}
        p.logerror {color: #F00}
    </style>

    <!-- low level communication -->
    <script src="json.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <!-- Marauroa -->
    <script type="text/javascript" src="marauroa.js"></script>
    <script type="text/javascript" src="client-framework.js"></script>
    <script type="text/javascript" src="message-factory.js"></script>
    <script type="text/javascript" src="perception.js"></script>
    <script type="text/javascript" src="rpfactory.js"></script>
    <!-- Out code -->
    <script type="text/javascript" src="chatclient.js"></script>
</head>

<body>
    <h1>Marautoa Chat Tutoral Client in HTML 5</h1>
    <!-- input field for text -->
    <form id="form" onsubmit="ui.chatBar.send(); return false">
        <input type="text" name="chatbar" id="chatbar" style="width:90%">
        <input type="submit" value="Send">
    </form>
    <!-- Chat history -->
    <div id="chat" style="height:200px">
        <noscript>JavaScript is required by the Web Client.</noscript>
    </div>
</body></html>
</source>


== Implementing the client Framework ==

作为第一步，我们想使用 marauroa.clientFramework 连接到服务器。 请注意，我们对主机和端口使用“null”，这意味着我们连接到下载客户端的同一服务器。 连接到服务器可能需要一两秒钟，因此我们会向用户提供一些反馈。

<source lang="javascript">
function startClient() {
	ui.chatLog.addLine("client", "Client loaded. Connecting...");
	var body = document.getElementById("body")
	body.style.cursor = "wait";
	marauroa.clientFramework.connect(null, null);
}
</source>

现在我们能够连接到服务器，我们想要接收和处理事件。 用 Java 的话来说，我们实现了 ClientFramework 的一个子类。 然而，在 JavaScript 中，我们可以重新定义我们感兴趣的方法:

<source lang="javascript">

	/** display a message to the chat window on disconnect. */
	marauroa.clientFramework.onDisconnect = function(reason, error){
		ui.chatLog.addLine("error", "Disconnected: " + error);
	}

	/** on failed login, open a message box and disable the user interface */
	marauroa.clientFramework.onLoginFailed = function(reason, text) {
		alert("Login failed. Please check your password and try again.");
		marauroa.clientFramework.close();
		document.getElementById("chatbar").disabled = true;
		document.getElementById("chat").style.backgroundColor = "#AAA";
	}

        /** Automatically pick the first character associated with this account and enable the chat controls */
	marauroa.clientFramework.onAvailableCharacterDetails = function(characters) {
		marauroa.clientFramework.chooseCharacter(marauroa.util.first(characters).a.name);

		var body = document.getElementById("body")
		body.style.cursor = "auto";
		ui.chatLog.addLine("client", "Ready...");
	}
</source>

== Handling actions ==

到目前为止，我们的客户端能够连接到基于 Marauroa 的服务器并显示一些基本反馈。 有一个聊天消息的输入字段。 现在我们要将这些消息发送到服务器。

为了保持我们的代码结构良好，我们创建了一个名为“ui”的对象和一个名为“chatbar”的子对象。 对于 Java 开发人员：虽然 Java 是一种基于类的编程语言，但 JavaScript 是基于原型的。


<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 ==

在我们将所有内容放在一起之前，还剩下一件：我们需要听取服务器发送的感知并将聊天显示在我们的日志窗口中。

在本教程中，聊天消息不仅仅是事件，还包括对象。 这允许我们将它们存储到数据库中，并允许后期客户端读取历史记录。 通常我们会使用 marauroa.rpobjectFactory 来创建具有正确原型（“Player”、“Item”、“Creature”...）的对象，因为它们是从服务器传输过来的. 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.

对于这个非常简单的聊天客户端，我们只对聊天对象感兴趣。 因此，我们现在跳过这一步，直接处理新对象的感知事件:

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

注意：将所有内容放在一起时，您需要将上一节中的“ui”包与此处定义的包合并。

== Deployment ==

'''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)

== Next Steps ==

Congratulations, you completed this tutorial. The final sections will list some ideas for [[Marauroa Chat Tutorial/Next Steps|further steps to improve]].

[[Category:Marauroa]]
{{#breadcrumbs: [[Marauroa]] | [[Navigation for Marauroa Users|Using]] | [[Marauroa Chat Tutorial|Tutorial]] | [[Marauroa Chat Tutorial/Swing Client|Swing Client]]}}