创建基于 Ajax 的 IM 客户端（8）处理 roster 更新
|
- UID
- 1066743
|
创建基于 Ajax 的 IM 客户端（8）处理 roster 更新
显示 rosterPrototype 使得向页面添加 roster 变得异常简单（参见清单 25）：
清单 25. 显示 roster1
2
3
4
5
6
7
| ....
function populateForm(){
new Ajax.Updater('roster', 'ChatServlet', {
method: 'get',
parameters: {getRoster: 'yes'}
});
....
|
在填充页面时，请采取额外步骤调用此 servlet 以便获取 roster 并用它来更新 roster div。如前所述，getRoster 的值并不重要。如果保存和编译所有合适的文件并重启 servlet 引擎以期获得全新的 bot 实例，roster 就会出现在右侧 div，如图 10 所示：
图 10. roster 但我们还有一个问题：我们没有现成的 Chat 对象给这些人。
为 roster 发起对话要与某人对话，需要先有 Chat 对象。在 ChatBot，这发生于 createConversation() 方法，意味着需要为 roster 中的每个条目都要调用它（参见清单 26）：
清单 26. 创建对话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
| ....
public void startNew(){
try{
conn = new XMPPConnection("myserver.net");
conn.connect();
conn.login("myprimaryaccount", "mypassword");
Roster roster = conn.getRoster();
Iterator<RosterEntry> iter =
roster.getEntries().iterator();
while (iter.hasNext()) {
RosterEntry entry = (RosterEntry) iter.next();
createConversation(entry.getUser());
}
} catch (Exception e){
System.out.println("StartNew Exception");
e.printStackTrace();
}
System.out.println("Done.");
}
}
|
在首次实例化 servlet 内的 bot 时，都要调用 startNew() ，所以这是很好的一个运行 roster 内的每个条目并为其创建对话的地方。这也是发起原始对话的地方，所以变化不是很大。
选择新用户：向 roster 添加脚本即使在 roster 上有了这些用户，如果没有办法告知 Web 客户端您想要与之交谈，用处也不会很大。要实现此目的，需要让页面在您单击用户名字的时候，能够切换到新用户。
实现这个目的的方法很多，包括将 roster 作为数组传递并动态地将每一个都添加到此文档或使用 Ajax 框架创建一个选项卡系统。在很多时候，越简单越好。
编辑 ChatBot 类以便向每个 roster 条目都添加事件处理程序（参见清单 27）：
清单 27. 每个 roster 条目都添加事件处理程序1
2
3
4
5
6
7
8
9
10
11
12
13
| ....
public String getRoster(){
Roster roster = conn.getRoster();
String returnStr = "";
Iterator<RosterEntry> iter = roster.getEntries().iterator();
while (iter.hasNext()) {
RosterEntry entry = (RosterEntry) iter.next();
returnStr = returnStr + "<span id='"+entry.getUser()+
"' onclick='changeUser(\""+entry.getUser()+
"\", \""+entry.getName()+"\")'>"+entry.getName() +
"</span><br />";
}
....
|
上述代码看上去不太整齐，如果佐以 HTML，结果应该如清单 28 所示：
清单 28. 结果 HTML1
2
3
4
| <span id='myfriend@myserver.net'
onclick='changeUser("myfriend@myserver.net", "My Friend")'>
My Friend
</span><br />
|
这里最重要的地方是 onclick 处理程序，它调用 changeUser() 函数，向它发送帐号和想要使用的显示名称。
现在，必须要在 Web 页面创建 changeUser() 函数。
选择新用户：更改 Web 页面现在可以开始最后一阶段的操作了。所需做的就是在单击 roster 内的名字时更改 “活动” 用户（参见清单 29）：
清单 29. 更改用户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
| ....
<script type="text/javascript">
var targetName = "Dafyd Llewellyn";
var targetUser = "myfriend@myserver.net";
var updater;
function changeUser(newUser, newName){
$('currentChat').value = "";
targetName = newName;
targetUser = newUser;
$('nameTag').innerHTML = targetName;
updater.stop();
updater = new Ajax.PeriodicalUpdater('currentChat', 'ChatServlet',
{
method: 'get',
insertion: Insertion.Bottom,
frequency: 3,
parameters: {getMessages: targetUser}
});
}
function populateForm(){
new Ajax.Updater('roster', 'ChatServlet', {
method: 'get',
parameters: {getRoster: 'yes'}
});
updater = new Ajax.PeriodicalUpdater('currentChat', 'ChatServlet',
{
method: 'get',
insertion: Insertion.Bottom,
....
|
这里发生了几件事情，让我们从底部开始。首先，PeriodicalUpdater 为当前用户重复请求队列。如果打算更改此用户，就需要告知 PeriodicalUpdater 停止 ping 旧地址，方法是创建一个全局 updater 变量并 将其设置为新对象。然后，再向上看，在 changeUser() 函数，使用 updater 变量调用 PeriodicalUpdater 的 stop() 方法，之后用正确的信息创建一个新用户。
最后，需要清除当前聊天，将 targetUser 和 targetName 变量设为合适的值并将 nameTag div 更改为新名称。
若要测试，可以刷新页面并在各种 roster 条目上单击。能否看到 IM 客户端上的动作取决于您与之登录的用户是否是页面的当前用户。 |
|
|
|
|
|
