【Openfire】网页版单对单聊天实例

网上部分关于Openfire的代码，只实现了，从单一应用与Openfire已经封装好的Spark客户端交互的功能，并没有实现一个应用内，多个用户交互的功能。

下面编写一个Openfire网页版单对单聊天的实例，用Smack的api与Struts2实现。仅包含两在线用户聊天部分。

如下图，开两个浏览器，模拟两个用户，实现网页版的Openfire聊天。

具体文件结构如下：

除了补充了一个fastjson-1.1.24.jar实现Java的容器类到Json字符串的转换，详见《【Java】读取网页中的内容》（点击打开链接），其余关于Openfire的用户处理部分在《【Openfire】网页版的用户注册、登录、修改密码》（点击打开链接）一文中已经详细介绍，这次工程是在其上面开发的。在struts.xml新增了部分关于聊天的Ajax Action，更新之后如下：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE struts PUBLIC
3. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
4. "http://struts.apache.org/dtds/struts-2.0.dtd">
5. <struts>
6. <package name="test" extends="struts-default">
7. <action name="register" class="test.user" method="register">
8. <result name="success" type="redirect">/index.jsp </result>
9. </action>
10. <action name="login" class="test.user" method="login">
11. <result name="success" type="redirect">/chat.jsp </result>
12. <result name="input" type="redirect">/index.jsp </result>
13. </action>
14. <action name="logout" class="test.user" method="logout">
15. <result name="success" type="redirect">/index.jsp </result>
16. </action>
17. <action name="modify_password" class="test.user" method="modify_password">
18. <result name="success" type="redirect">/index.jsp </result>
19. </action>
21. <action name="init" class="test.chat" method="init" />
22. <action name="load_msg" class="test.chat" method="load_msg" />
23. <action name="submit_msg" class="test.chat" method="submit_msg" />
24. </package>
25. </struts>

具体改动如下：

基本上已经可以通过Struts2的Ajax Action略窥一二，网页聊天主要实现三个事情，一个是初始化init，一个是让前台javascript的定时器setInterval定时执行的，载入信息的Action，还有一个是用户点击按钮的发送信息的Action。

这些Action全写在chat.java这个文件里面，具体代码如下，详情请留意注释：

1. package test;
3. import java.io.IOException;
4. import java.io.PrintWriter;
5. import java.text.SimpleDateFormat;
6. import java.util.ArrayList;
7. import java.util.Date;
8. import java.util.HashMap;
9. import java.util.List;
10. import java.util.Map;
12. import org.apache.struts2.ServletActionContext;
13. import org.jivesoftware.smack.Chat;
14. import org.jivesoftware.smack.ChatManager;
15. import org.jivesoftware.smack.ChatManagerListener;
16. import org.jivesoftware.smack.Connection;
17. import org.jivesoftware.smack.MessageListener;
18. import org.jivesoftware.smack.XMPPException;
19. import org.jivesoftware.smack.packet.Message;
21. import tool.DB;
23. import com.alibaba.fastjson.JSON;
24. import com.opensymphony.xwork2.ActionContext;
25. import com.opensymphony.xwork2.ActionSupport;
27. @SuppressWarnings({ "unchecked", "rawtypes", "serial" })
28. public class chat extends ActionSupport {
30. private String msg; //用户要发送的信息
31. private String to_user; //用户选择的收信人
33. private Map session = ActionContext.getContext().getSession(); //Session
35. //将1970年到现在的long时间记法，转换成真实时间，人看的时间。
36. private String get_realTime(long systime) {
37. return new SimpleDateFormat( "hh:mm:ss").format( new Date(systime))
38. .toString();
39. }
41. //聊天系统的初始化
42. public void init() throws IOException {
43. PrintWriter printWriter = ServletActionContext.getResponse()
44. .getWriter(); //用于打印Ajax
46. //新建一个名为message_list存信息的ArrayList放入session
47. ArrayList<Message> message_list = new ArrayList<Message>();
48. session.put( "message_list", message_list);
50. //Openfire的关键步骤，为当前的连接，新建聊天信息接受的接听器。
51. Connection connection = (Connection) session.get( "connection");
52. ChatManager chatmanager = connection.getChatManager();
53. chatmanager.addChatListener( new ChatManagerListener() {
54. @Override
55. public void chatCreated(Chat chat, boolean arg1) {
56. //对Openfire的消息处理进行重写
57. chat.addMessageListener( new MessageListener() {
58. //要求这个监听器，收到信息，通通放入session中的message_list
59. public void processMessage(Chat arg0,
60. Message message_receive) {
61. if (message_receive.getBody() != null) {
62. ArrayList<Message> message_list = (ArrayList<Message>) session
63. .get( "message_list");
64. //由于Smack的api是没有对Openfire中Time属性的处理
65. //因此必须自己再处理一下
66. message_receive.setProperty( "time",
67. System.currentTimeMillis());
68. message_list.add(message_receive);
69. session.put( "message_list", message_list);
70. }
71. }
72. });
73. }
74. }); //这样重写了监听器之后，就可以避免原来Openfire必须指定接听哪个用户发来的信息的情况
75. //任意用户给当前登录用户发来信息，都会放入session中，一会儿载入信息的load_msg()仅仅需要对session进行处理
77. //载入Openfire中所有用户列表，剔除当前用户，和在初始化Openfire服务器时设定系统总管理用户admin
78. DB db = DB.getInstance();
79. List<Object[]> userlist = db
80. .getBySql( "select username from ofuser where username !='"
81. + session.get( "username") + "' and username!='admin'");
82. String json = JSON.toJSONString(userlist);
84. //将用户列表打印给前台
85. printWriter.print(json);
86. printWriter.flush();
87. printWriter.close();
88. }
90. //载入用户信息
91. public void load_msg() throws IOException, XMPPException {
92. ServletActionContext.getResponse().setContentType(
93. "text/html;charset=UTF-8"); //由于用户发送的信息可能有中文，所以必须要先设置编码
94. PrintWriter printWriter = ServletActionContext.getResponse()
95. .getWriter();
97. //对session中的message_list进行处理构造JSON
98. ArrayList<Message> message_list = (ArrayList<Message>) session
99. .get( "message_list");
101. ArrayList<HashMap<String, String>> message_json = new ArrayList<HashMap<String, String>>(); //这个message_json会被fastjson-1.1.24.jar转化成json字符串
102. for ( int i = 0; i < message_list.size(); i++) {
103. Message message = message_list.get(i);
105. HashMap<String, String> one_message = new HashMap<String, String>();
107. String from = message.getFrom().split( "@")[ 0]; //由于Openfire会自动在发信人后面带上一堆服务器、设备参数，因此，做此划分
108. String time = get_realTime(( long) message.getProperty( "time")); //将long时间转现实时间输出到前台
109. one_message.put( "from", from);
110. one_message.put( "time", time);
111. one_message.put( "body", message.getBody());
113. message_json.add(one_message); //每一条消息都这样处理
114. }
116. //打印到前台
117. String json = JSON.toJSONString(message_json);
118. printWriter.print(json);
119. printWriter.flush();
120. printWriter.close();
121. }
123. // 信息发送
124. public void submit_msg() throws IOException, XMPPException {
125. PrintWriter printWriter = ServletActionContext.getResponse()
126. .getWriter();
128. Connection connection = (Connection) session.get( "connection"); //取连接
129. //按Openfire要求的格式构造发信、收信人
130. String from = (String) session.get( "username") + "@"
131. + connection.getServiceName();
132. String to = to_user + "@" + connection.getServiceName();
134. //发信息核心代码
135. ChatManager chatmanager = connection.getChatManager();
136. Chat chat = chatmanager.createChat(to, null); //新建一个会话，指定收信人，不对收信人所回复的信息进行监听
137. //因为在初始化的时候，已经对此连接收到信息都进行了监听，无须重复监听
138. chat.sendMessage(msg); //对此会话进行发送
139. //但同样要将发送的信息记录在session中的message_list里面，用户打印，这才符合现时主流的聊天工具一问一答的方式
140. ArrayList<Message> message_list = (ArrayList<Message>) session
141. .get( "message_list");
142. Message message_send = new Message();
143. message_send.setFrom(from);
144. message_send.setTo(to);
145. message_send.setBody(msg);
146. message_send.setProperty( "time", System.currentTimeMillis());
147. message_list.add(message_send);
148. session.put( "message_list", message_list);
150. //其实，消息发送，是没有任何东西交互给前台的，但必须打印一个空信息，才能保证ajax过程不出错。
151. printWriter.print( "");
152. printWriter.flush();
153. printWriter.close();
154. }
156. public String getMsg() {
157. return msg;
158. }
160. public void setMsg(String msg) {
161. this.msg = msg;
162. }
164. public String getTo_user() {
165. return to_user;
166. }
168. public void setTo_user(String to_user) {
169. this.to_user = to_user;
170. }
172. }

最后，配合前台的chat.jsp一切就大功告成，HTML布局部分不重要就表格里面的几行和一个按钮。关键是javascript部分：

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. pageEncoding= "UTF-8"%>
3. <%@ page isELIgnored="false"%>
4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5. <html>
6. <head>
7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8. <script src="jquery-1.8.3.js" type="text/javascript"> </script>
9. <title>聊天 </title>
10. </head>
11. <body>
12. <table border="1" width="100%">
13. <tr>
14. <td colspan="2" width="100%">
15. 欢迎，${sessionScope.username}， <a href="logout">登出 </a>
16. </td>
17. </tr>
18. <tr height="150px" valign="top">
19. <td id="msg_list"> </td>
20. </tr>
21. <tr>
22. <td>
23. <textarea id="msg" style="width: 100%; height: 50px"> </textarea>
24. <select id="user_list"> </select>
25. <button onclick="submit_msg()">发送！ </button>
26. </td>
27. </tr>
28. </table>
30. </body>
31. <script type="text/javascript">
33. function init(){
34. $.ajax({
35. type : "post",
36. url : "init",
37. dataType : "json",
38. success : function(data) {
39. for( var i= 0;i<data.length;i++){
40. $( "#user_list").append( "<option value='"+data[i]+ "'>"+data[i]+ "</option>");
41. }
42. },
43. error : function() {
44. alert( "出错了");
45. }
46. });
47. setInterval( "load_msg()", 2000);
48. }
50. function load_msg(){
51. var msg= "";
52. $.ajax({
53. type : "post",
54. url : "load_msg",
55. dataType : "json",
56. success : function(data) {
57. for( var i= 0;i<data.length;i++){
58. msg=msg+
59. "<p sytle='text-align:center'>"+data[i].time+ "</p>"+
60. "<p>"+data[i].from+ "："+data[i].body+ "</p>";
61. $( "#msg_list").html(msg);
62. }
63. },
64. error : function() {
65. alert( "出错了");
66. }
67. });
68. }
70. function submit_msg() {
71. var msg = $( "#msg").val();
72. var to_user = $( "#user_list").val();
73. $( "#msg").val( "");
74. $.ajax({
75. type : "post",
76. url : "submit_msg",
77. dataType : "text",
78. data : {
79. msg : msg,
80. to_user : to_user
81. },
82. success : function(data) {
83. },
84. error : function() {
85. alert( "出错了");
86. }
87. });
88. }
90. init();
92. </script>
93. </html>

要求进入这个页面就马上执行init()的代码，载入用户列表的同时，同时触发读取信息的定时器，每2秒一次执行load_msg()里面的所有内容。

将发送信息的按钮的点击事件，绑定于submit_msg()事件与后台进行交互。