聊天室实现-优快云博客

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

package onlyfun.caterpillar;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
 private static LinkedList<Message> messages = new LinkedList<Message>();

 public ChatRoomServlet() {
 super();
 }

 private List<Message> addMessage(String text) {
 if (text != null && text.trim().length() > 0) {
 messages.addFirst( new Message(text));
 while (messages.size() > 10) {
 messages.removeLast();
 }
 }

 return messages;
 }

 private List<Message> getMessages() {
 return messages;
 }

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 List<Message> list = null;

 if( "send".equals(request.getParameter( "task"))) {
 list = addMessage(request.getParameter( "msg"));
 }
 else if( "query".equals(request.getParameter( "task"))) {
 list = getMessages();
 }

 PrintWriter out = response.getWriter();
 response.setContentType( "text/xml");
 response.setHeader( "Cache-Control", "no-cache");

 out.println( "<response>");
 for( int i = 0; i < list.size(); i++) {
 String msg = list.get(i).getText();
 out.println( "<message>" + msg + "</message>");
 }
 out.println( "</response>");
 }
}

Message物件如下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package onlyfun.caterpillar;

public class Message {
 private long id = System.currentTimeMillis();
 private String text;

 public Message(String newtext) {
 text = newtext;
 if (text.length() > 256) {
 text = text.substring(0, 256);
 }
 text = text.replace( '<', '[');
 text = text.replace( '&', '_');
 }

 public long getId() {
 return id;
 }

 public String getText() {
 return text;
 }
}

Servlet接受訊息新增與查詢，判斷的方式是檢查請求參數task是send或query。

Servlet會以XML傳回目前List當中的訊息，客戶端可以查詢或插入新訊息時，取得目前List中的訊息，接著在web.xml中設定一下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version= "1.0" encoding= "UTF-8"?>
<web-app id= "WebApp_ID" version= "2.4" xmlns= "http://java.sun.com/xml/ns/j2ee" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation= "http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <servlet>
 <description>
 </description>
 <display-name>
 ChatRoomServlet</display-name>
 <servlet-name>ChatRoomServlet</servlet-name>
 <servlet-class>
 onlyfun.caterpillar.ChatRoomServlet</servlet-class>
 </servlet>

 <servlet-mapping>
 <servlet-name>ChatRoomServlet</servlet-name>
 <url-pattern>/ChatRoomServlet</url-pattern>
 </servlet-mapping>
 <session-config>
 <session-timeout>
 30
 </session-timeout>
 </session-config>
</web-app>

在網頁中，使用者可以在輸入訊息後按下按鈕送出資訊，並在XML回應取得時，將訊息以一列一列的表格方式顯示出來，另外還設定了週期性的輪詢，即使不輸入新訊息，也可以週期性的取得新的聊天訊息…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=BIG5">
<title>Chat Room</title>

<script type= "text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
 if (window.ActiveXObject) {
 xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
 }
 else if (window.XMLHttpRequest) {
 xmlHttp = new XMLHttpRequest();
 }
}

function sendMessage() {
 var msg = document.getElementById( "text").value;

 if(msg == "") {
 refreshMessage();
 return;
 }

 var param = "task=send&msg=" + msg;
 ajaxRequest(param);
 document.getElementById( "text").value = "";
}

function queryMessage() {
 var param = "task=query";
 ajaxRequest(param);
}

function ajaxRequest(param) {
 var url = "ChatRoomServlet?timestamp" + new Date().getTime();
 createXMLHttpRequest();
 xmlHttp.onreadystatechange = refreshMessage;
 xmlHttp.open( "POST", url, true);
 xmlHttp.setRequestHeader( "Content-Type",
 "application/x-www-form-urlencoded;");
 xmlHttp.send(param);
}

function refreshMessage() {
 if(xmlHttp.readyState == 4) {
 if(xmlHttp.status == 200) {
 var messages = xmlHttp.responseXML.getElementsByTagName( "message");

 var table_body = document.getElementById( "dynamicUpdateArea");
 var length = table_body.childNodes.length;
 for (var i = 0; i < length; i++) {
 table_body.removeChild(table_body.childNodes[0]);
 }

 var length = messages.length;
 for(var i = length - 1; i >= 0 ; i--) {
 var message = messages[i].firstChild.data;
 var row = createRow(message);

 table_body.appendChild(row);
 }
 setTimeout( "queryMessage()", 2000);
 }
 }
}

function createRow(message) {
 var row = document.createElement( "tr");
 var cell = document.createElement( "td");
 var cell_data = document.createTextNode(message);
 cell.appendChild(cell_data);
 row.appendChild(cell);
 return row;
}

</script>

</head>
<body>


 Your Message:
 <input id= "text"/>
 <input type= "button" value= "Send"
 onclick= "sendMessage()"/>


Messages:
 <table align= "left">
 <tbody id= "dynamicUpdateArea"></tbody>
 </table>

</body>
</html>

簡單抓個畫面…

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

改成DWR的話，就很簡單了，寫個簡單的Java物件…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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中開放一下…
1
2
3
4
5
6
7
8
9
10
11
12
13

<?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這樣的方式來存取。

接著是簡單的客戶端網頁…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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


 Your Message:
 <input id= "text"/>
 <input type= "button" value= "Send"
 onclick= "sendMessage()"/>


Messages:
<div id= "chatlog"></div>

</body>
</html>

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

簡單抓個畫面…

dwr3