编辑“︁Marauroa Chat Tutorial/HTML5 Client”︁（章节）

== 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”包与此处定义的包合并。