本文以最新版activemq5.8为例,参考http://activemq.apache.org/ajax.html官网ajax使用例子,作了网页版的聊天室例子。
ActiveMQ支持Ajax,这意味着你可以利用ActiveMQ的“发布/订阅”的特性,来创建高度实时的web应用。
Ajax允许浏览器网页客户端通过互联网收发信息。ActiveMQ对Ajax的支持建立在与REST的ActiveMQ连接器相同的基础上,该连接器允许任意可联网的设备通过JMS收发消息。
具体开发过程如下:
1)首先在web应用的web.xml文件配置AMQ的ajaxServlet,以此来支持ajax的JMS:
1. <!-- 配置支持ajax的jms -->
2. <context-param>
3. <param-name>org.apache.activemq.brokerURL</param-name>
4. <param-value>tcp://localhost:61616</param-value>
5. <description>连接到消息中间件的URL</description>
6. </context-param>
7. <servlet>
8. <servlet-name>AjaxServlet</servlet-name>
9. <servlet-class>org.apache.activemq.web.AjaxServlet</servlet-class>
10. <load-on-startup>1</load-on-startup>
11. </servlet>
12. <servlet-mapping>
13. <servlet-name>AjaxServlet</servlet-name>
14. <url-pattern>/amq/*</url-pattern>
15. </servlet-mapping>
2)在使用ajax发送接收消息的页面中,导入支持也消息中间件通讯的js文件,activemq支持Jquery,Prototype,Dojo三种适配器,我这里使用的是Jquery作为适配器。
1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. <script type="text/javascript" src="js/amq_jquery_adapter.js"></script>
3. <script type="text/javascript" src="js/amq.js"></script>
4. <script type="text/javascript">
5. amq = org.activemq.Amq;
6. amq.init({
7. uri: 'amq', //AjaxServlet所配置对应的URL
1. logging: true,//激活日志记录
2. timeout: 20,//保持连接时长,单位为秒
3. clientId:(new Date()).getTime().toString() //防止多个浏览器窗口标签共享同一个JSESSIONID
4. });
5. </script>
3)发送消息
要从javascript客户端发送一条JMS消息,需要做的仅仅是调用这个方法:
amq.sendMessage(myDestination,myMessage);
这里的myDestination是目的地URL字符串地址(例如:"topic://MY.NAME" 或者 "channel://MY.NAME"),myMessage是任意格式化好的XML或者被编码为XML内容的纯文本。
4)接收消息
要接收消息,客户端必须定义一个消息处理函数,并且将其注册到amq对象中。例如:
var myHandler =
{
rcvMessage: function(message)
{
alert("received "+message);
}
};
amq.addListener(myId,myDestination,myHandler.rcvMessage);
这里的myId是一个字符串标识符,在之后调用amq.removeHandler(myId)函数的时候会用到。myDestination是目的地URL字符串地址(例如:"topic://MY.NAME" 或者 "channel://MY.NAME")。接收到消息的时候,回调函数myHandler.rcvMessage会把消息传递到你的处理代码块。
具体整个聊天室页面代码如下:
1. <%@ page language="java" contentType="text/html; charset=UTF-8"%>
2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4. <html>
5. <head>
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
8. <script type="text/javascript" src="js/amq_jquery_adapter.js"></script>
9. <script type="text/javascript" src="js/amq.js"></script>
10. <script>
11. $(function(){
12. amq = org.activemq.Amq;
13. myDestination='topic://chat1';
14. amq.init({
15. uri: 'amq', //AjaxServlet所配置对应的URL
16. logging: true,//激活日志记录
17. timeout: 20,//保持连接时长,单位为秒
18. clientId:(new Date()).getTime().toString() //防止多个浏览器窗口标签共享同一个JSESSIONID
19. });
20.
21. //发送消息
22. $("#sendBtn").click(function(){
23. msg=$("#msg").val();
24. name=$("#name").val();
25. <message name='"+name+"' msg='"+msg+"'/>");
26. $("#msg").val("");
27. });
28.
29. //接收消息
30. myHandler =
31. {
32. rcvMessage: function(message)
33. {
34. //alert("received "+message);
35. $("#distext").append(message.getAttribute('name')+":"+message.getAttribute('msg')+"\n");
36. }
37. };
38.
39. amq.addListener('handler',myDestination,myHandler.rcvMessage);
40.
41. });
42.
43. </script>
44. </head>
45. <body>
46. <h1>发送 ajax JMS 消息</h1>
47. <body>
48. <br>
49. <textarea rows="10" cols="50" id="distext" readonly="readonly"></textarea>
50. <br>
51. <br/>
52. 昵称:<input type="text" id="name"><br/>
53. 消息:<input type="text" id="msg">
54. <input type="button" value="发送消息" id="sendBtn"/>
55.
56. </body>
57. </html>
实现页面效果具体如下: