创建基于 Ajax 的 IM 客户端（7）创建 Web 页面
|
- UID
- 1066743
|
创建基于 Ajax 的 IM 客户端（7）创建 Web 页面
创建 Web 页面现在具备了发送和接收消息的能力之后，就可以制作 Web 客户端了。
基本的 Web 客户端布局我们从基本的布局着手。现在已经存在一些 Ajax 框架，可用来创建选项卡和其他漂亮的用户界面，而且最终，您很可能还会使用到其中的一个，但我们还是侧重基本功能。
我们先来创建一个具有四个基本区域的 Web 页面（参见清单 12）：
清单 12. 基本 ChatPage.html1
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
| <html>
<head>
</head>
<body>
<h1>Chat Page</h1>
<table>
<tr>
<td colspan="2">
<div id="nameTag">NameTag</div>
</td>
</tr>
<tr>
<td style="width: 75%">
<div style="border: 1px solid black; width: 100%; height: 500px;"
id="currentChat"></div>
</td>
<td>
<div style="border: 1px solid black; width: 200px; height: 500px;"
id="roster"></div>
</td>
</tr>
<tr>
<td colspan="2">
<form id="chatForm" style="clear: left;">
<input type="text" id="newChatText" style="width: 80%;" />
<input type="button" id="newChatButton" value="Send" />
</form>
</td>
</tr>
</table>
</body>
</html>
|
没错，我有点循规蹈矩，我使用表来进行页面布局；不过它还是最迅速、最容易和最可靠的方式。重要的是我们有四个部分：顶部的 nameTag 分区；左侧保存会话的 currentChat div；保存好友列表的 roster div（在下一章节对此再做处理）；以及底部表单，此表单包括可以在其中键入注释的文本字段。
结果应该如图 9 所示：
图 9. 空白页 现在让我们配置此页。
设立用户首先，设立想要与之交谈的用户（参见清单 13）：
清单 13. 设立用户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
| <html>
<head>
<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript">
var targetName = "Dafyd Llewellyn";
var targetUser = "myfriend@myserver.net";
function populateForm(){
$('nameTag').innerHTML = targetName;
}
</script>
</head>
<body onload="populateForm()">
<h1>Chat Page</h1>
<table>
<tr>
<td colspan="2">
<div id="nameTag">NameTag</div>
</td>
</tr>
....
|
从顶部开始，包含进一个对 Prototype Javascript 库的引用；此库不仅可用来执行 Ajax 请求，还可以用于 DOM 操作。
比如，若想将 nameTag div 的 innerHTML 属性设为 targetName，可以不必借助 DOM （例如，document.getElementById('nameTag')），而是使用 Prototype 的美元符号 ($) 来直接请求对该元素的引用。
页面加载时，调用此函数，在刷新页面时，将会看到名称在页面顶部弹出。
填充聊天窗口下一步是显示 currentChat div 内的所有现存聊天 — 您的聊天队列 —（参见清单 14）：
清单 14. 填充聊天窗口1
2
3
4
5
6
7
8
9
10
11
12
13
| ....
function populateForm(){
new Ajax.Updater('currentChat', 'ChatServlet',
{
method: 'get',
parameters: {getMessages: targetUser}
});
$('nameTag').innerHTML = targetName;
}
....
|
这里，使用 Prototype 的 Ajax 类来更新现有的 div — 在本例中是 currentChat— 用 Web 请求的内容。该请求是之前测试 getMessages() 方法时所用的相同的那个请求。指定的 URL（ChatServlet）和参数可用来调用此请求。这些参数包括方法（本例中是 get，但也可以是 post）以及针对此请求本身的参数。
在 IM 客户端内输入某些文本并刷新此 Web 页面以观其效。再输入一些文本并刷新页面以查看新文本。
这能工作，但很显然不是最好的方式。
自动更新聊天真正想要的是页面能够用最新的信息不断刷新 currentChat 窗口。使用 PeriodicalUpdater 可实现此目的（参见清单 15）：
清单 15. 持续更新此窗口1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ....
function populateForm(){
new Ajax.PeriodicalUpdater('currentChat', 'ChatServlet',
{
method: 'get',
insertion: Insertion.Bottom,
frequency: 3,
parameters: {getMessages: targetUser}
});
$('nameTag').innerHTML = targetName;
}
....
|
这样，就无需一次更新页面，而是能够创建 PeriodicalUpdater，由它按指定频率（在本例中是每隔 3 秒）执行更新。这里，您还可以看到额外的参数 insertion，它可以指定如果有文本到来，它会被添加到底部，而不是替换现有的聊天（您当然也可以将其添加到顶部）。
刷新页面并周期式地在 IM 窗口键入聊天。注意它会自动出现。
现在，让我们看看发送消息。
发送消息通过底部的表单发送消息（参见清单 16）：
清单 16. 发送消息1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ....
function sendMessage(){
new Ajax.Request('ChatServlet', {
method: 'get',
parameters: {target: targetUser, message: $('newChatText').getValue()}
});
}
</script>
....
<form id="chatForm" style="clear: left;" onsubmit="sendMessage()">
<input type="text" id="newChatText" style="width: 80%;" />
<input type="button" id="newChatButton" value="Send"
onclick="sendMessage()" />
</form>
....
|
现在，当用户单击 Send 按钮或通过按下 Enter 提交表单时，sendMessage() 函数都会使用 Request 对象调用 servlet。在本例中，无需在意响应行为，所以无需使用 Updater；Request 完全可以完成此任务。在这里，为其传递当前 targetUser 的用户名以及 newChatText 字段的内容，正如 Prototype 检索的那样。
试着发送消息，并请注意它是否会在 IM 客户端弹出。
清除表单即使在发送消息之后，文本还是处于文本字段。必须对此采取相应的措施；即需要清除该字段（参见清单 17）：
清单 17. 清除表单1
2
3
4
5
6
7
8
9
10
11
12
| ....
function sendMessage(){
new Ajax.Request('ChatServlet', {
method: 'get',
parameters: {target: targetUser, message: $('newChatText').getValue()}
});
$('newChatText').value = "";
}
....
|
美元符号带来的是对某元素的引用，但尽管如此，还是需要将值属性设置为空字符串。请注意，这里所设置的是值，而之前处理 nameTag div 时所设置的是 innerHTML 属性。这是因为在最内部，分别处理的还是输入元素和 div。
向队列添加注释至此，就可以进行交谈了，但读起来还不是很连贯，这是因为页面上显示的只有好友的对话。要解决这一问题，可以向队列添加注释，然后再将其发送给 IM 客户端，这可以通过向 ChatBot.java 类文件做简单的修改加以实现（参见清单 18）：
清单 18. 向队列添加注释1
2
3
4
5
6
7
8
9
10
11
12
| ....
public void sendMessage(String targetUser, String theMessage){
Chat theChat = (Chat)chatSessions.get(targetUser);
String theQueue = (String)chatQueues.get(targetUser);
try {
theChat.sendMessage(theMessage);
chatQueues.put(targetUser, theQueue + "<br />You: "+theMessage);
} catch (Exception e){
e.printStackTrace();
}
}
....
|
它所属的对话是已知的，所以您就可以从合适的队列中获得文本。一旦完成，所需做的就只是将消息添加到这个字符串，并加上注释说明是您所说的内容，并将文本发送回队列。
若想测试，可以在 Web 页面和 IM 客户端之间进行谈话。请注意注释现在出现在这两个地方。
对于单一对话，这可以很好地工作，而且通过打开多个页面，也可以与多人聊天，但有一种更为简单的方法：通过 roster。 |
|
|
|
|
|
