From Gossip@caterpillar

Ajax Gossip: DWR 聊天室

之前有看過網頁聊天室，直接用AJAX，後端用JSP/Servlet，您要對請求參數做些判斷，看看是新增訊息或查詢，並要自行輸出XML，有的沒的…

改成DWR的話，就很簡單了，寫個簡單的Java物件…

Chat.java

package onlyfun.caterpillar;
 
import java.util.LinkedList;
import java.util.List;
 
public class Chat {
  private static LinkedList<Message> messages = new LinkedList<Message>();
 
  public List addMessage(String text) {
    if (text != null && text.trim().length() > 0) {
      messages.addFirst(new Message(text));
      while (messages.size() > 10) {
        messages.removeLast();
      }
    }
 
    return messages;
  }
 
  public List getMessages() {
    return messages;
  }
}

接著…在dwr.xml中開放一下…

dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" 
 "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
 
<dwr>
  <allow>
 
    <create creator="new" javascript="Chat">
      <param name="class" value="onlyfun.caterpillar.Chat"/>
    </create>
    
    <convert converter="bean" match="onlyfun.caterpillar.Message"/>      
  </allow>
</dwr>

使用者取得訊息時，是直接傳回List物件，而List中裝的是 Message物件，Message物件是自訂物件，conterver設定為bean，表示DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物件中的屬性，例如Message中有getText()，則在客戶端可以用message.text這樣的方式來存取。

接著是簡單的客戶端網頁…

chat.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
 
<script src="dwr/interface/Chat.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
 
<script type="text/javascript">
function sendMessage() {
    var text = DWRUtil.getValue("text");
    DWRUtil.setValue("text", "");
    Chat.addMessage(text, gotMessages);
}
 
function gotMessages(messages) {
    var chatlog = "";
    for (var data in messages) {
        chatlog = "<div>" + messages[data].text +
            "</div>" + chatlog;
    }
    DWRUtil.setValue("chatlog", chatlog);
  setTimeout("queryMessage()", 2000);
}
 
function queryMessage() {
  Chat.getMessages(gotMessages);
}
</script>
 
</head>
<body>
 
<p>
  Your Message:
  <input id="text"/>
  <input type="button" value="Send"
      onclick="sendMessage()"/>
</p>
 
<p>Messages:</p>
<div id="chatlog"></div>
 
</body>
</html>

當List物件傳回時，它成為gotMessages (messages)中的messages物件，而messages物件中包括Message物件轉換後對應的JavaScript物件，由於我們已經設定了Converter，所以可以用messages[data].text來取得傳回的訊息…

簡單抓個畫面…