Marauroa Chat Tutorial/HTML5 Client

Marauroa Tutorial

HTML5 support in Marauroa is in development. We are looking for feedback to stabilize the API and improve the documentation on it.

HTML5 客戶端工作在現代瀏覽器中，無需在本地安裝任何插件或其他軟件。因此，它不是用Java編寫的，而是用JavaScript編寫的。雖然JavaScript有一個相似的名稱，但它是與Java完全不同。

HTML Code[編輯]

我們通過創建一個 HTML 頁面來啟動我們的 HTML 5 客戶端，該頁面由一個用於聊天日誌的輸出區域和一個用於輸入文本的小輸入字段組成。我們使用 CSS 規則使頁面看起來更漂亮。我們使用的是 Marauroa 的開發版本，它由幾個 JS 文件組成。最終版本將包含一個文件以減少啟動時間。

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

Implementing the client Framework[編輯]

作為第一步，我們想使用 marauroa.clientFramework 連接到伺服器。請注意，我們對主機和端口使用「null」，這意味着我們連接到下載客戶端的同一伺服器。連接到伺服器可能需要一兩秒鐘，因此我們會向用戶提供一些反饋。

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

現在我們能夠連接到伺服器，我們想要接收和處理事件。用 Java 的話來說，我們實現了 ClientFramework 的一個子類。然而，在 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...");
	}

Handling actions[編輯]

到目前為止，我們的客戶端能夠連接到基於 Marauroa 的伺服器並顯示一些基本反饋。有一個聊天消息的輸入字段。現在我們要將這些消息發送到伺服器。

為了保持我們的代碼結構良好，我們創建了一個名為「ui」的對象和一個名為「chatbar」的子對象。對於 Java 開發人員：雖然 Java 是一種基於類的編程語言，但 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();
		}
	}
}

Handling perceptions[編輯]

在我們將所有內容放在一起之前，還剩下一件：我們需要聽取伺服器發送的感知並將聊天顯示在我們的日誌窗口中。

在本教程中，聊天消息不僅僅是事件，還包括對象。這允許我們將它們存儲到數據庫中，並允許後期客戶端讀取歷史記錄。通常我們會使用 marauroa.rpobjectFactory 來創建具有正確原型（「Player」、「Item」、「Creature」...）的對象，因為它們是從伺服器傳輸過來的. You can have a look at this file of the experimental Stendhal HTML5 client, to learn how the rpobjectFactory is used.

對於這個非常簡單的聊天客戶端，我們只對聊天對象感興趣。因此，我們現在跳過這一步，直接處理新對象的感知事件:

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>");
		}
	}
}

注意：將所有內容放在一起時，您需要將上一節中的「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:

http_port=8080
debug_fake_web_username=accountname

Launch the WebSocketServer run configuration
Visit http://localhost:8080/chat.html
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 further steps to improve. {{#breadcrumbs: Marauroa | Using | Tutorial | Swing Client}}

Marauroa Chat Tutorial/HTML5 Client

目次

HTML Code[編輯]

Implementing the client Framework[編輯]

Handling actions[編輯]

Handling perceptions[編輯]

Deployment[編輯]

Next Steps[編輯]

導覽菜單

Marauroa Chat Tutorial/HTML5 Client

HTML Code[編輯]

Implementing the client Framework[編輯]

Handling actions[編輯]

Handling perceptions[編輯]

Deployment[編輯]

Next Steps[編輯]

導覽菜單

搜尋