ActiveMQ 使用Ajax实现多人聊天室

来源：互联网发布：王思聪怼柯洁知乎编辑：程序博客网时间：2024/06/05 18:24

写在前面

使用环境：

1、jdk1.7.0_04 （ActiveMQ最新版5.14要求JRE1.7）

2、ActiveMQ最新版5.14 apache-activemq-5.14.0-bin.zip

3、MyEclipse10.6 myeclipse-10.6-offline-installer-windows.exe

4、Tomcat使用MyEclipse10.6自带的tomcat6就可以

启动ActiveMQ

终端进入D:\apache-activemq-5.14.0\bin目录，命令activemq start 即可

开始

1、创建项目mqajax。打开MyEcplise10.6，选择File - new - Web Project - Finish，弹出一个警告框，直接选择No即可。

2、IDE中项目mqajax的 WebRoot，右键，New-Folder，创建一个js目录。

3、导入jar包。拷贝D:\apache-activemq-5.14.0\lib目录下的jar包，以及D:\apache-activemq-5.14.0\lib\web目录下的jar包到项目下的 D:\wokespace\MyEclipse10.6\mqajax\WebRoot\WEB-INF\lib目录

4、导入js文件。拷贝D:\apache-activemq-5.14.0\webapps-demo\demo\js目录下的所有js文件，到项目下的

D:\wokespace\MyEclipse10.6\mqajax\WebRoot\js目录。

5、配置web.xml文件。项目的WebRoot， WEB-INF目录下web.xml，替换为：

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">  <display-name>mqajax</display-name>  <context-param>    <description>Whether we should include an embedded broker or not</description>    <param-name>org.apache.activemq.brokerURL</param-name>    <param-value>tcp://127.0.0.1:61616</param-value>  <!-- 这里可以写tcp://192.168.1.111:61616的形式连接其他服务器上的ActiveMQ服务器 -->  </context-param>    <servlet>    <servlet-name>AjaxServlet</servlet-name>    <servlet-class>org.apache.activemq.web.AjaxServlet</servlet-class>    <load-on-startup>1</load-on-startup>    <async-supported>true</async-supported>  </servlet>  <servlet>    <servlet-name>MessageServlet</servlet-name>    <servlet-class>org.apache.activemq.web.MessageServlet</servlet-class>    <load-on-startup>1</load-on-startup>  </servlet>  <servlet>    <servlet-name>QueueBrowseServlet</servlet-name>    <servlet-class>org.apache.activemq.web.QueueBrowseServlet</servlet-class>  </servlet>  <servlet>    <servlet-name>PortfolioPublishServlet</servlet-name>    <servlet-class>org.apache.activemq.web.PortfolioPublishServlet</servlet-class>    <load-on-startup>1</load-on-startup>  </servlet>    <servlet-mapping>    <servlet-name>AjaxServlet</servlet-name>    <url-pattern>/amq/*</url-pattern>  </servlet-mapping>  <servlet-mapping>    <servlet-name>MessageServlet</servlet-name>    <url-pattern>/message/*</url-pattern>  </servlet-mapping>  <servlet-mapping>    <servlet-name>QueueBrowseServlet</servlet-name>    <url-pattern>/queueBrowse/*</url-pattern>  </servlet-mapping>  <servlet-mapping>    <servlet-name>PortfolioPublishServlet</servlet-name>    <url-pattern>/portfolioPublish</url-pattern>  </servlet-mapping>    <!-- 这种方式是在tomcat7版本以下运行，因为ajax+activemq需要servlet3.0的支持，而servlet3.0又只有在tomcat7中得到支持，所有加上jetty此包，就能在tomcat6运行了 -->  <filter>      <filter-name>session</filter-name>      <filter-class>org.eclipse.jetty.continuation.ContinuationFilter</filter-class>    </filter>    <filter-mapping>      <filter-name>session</filter-name>      <url-pattern>/*</url-pattern>    </filter-mapping>   <welcome-file-list>    <welcome-file>index.html</welcome-file>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>

6、实现聊天界面index.html。

IDE中项目mqajax的 WebRoot，右键，New-HTML，创建一个index.html文件。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/amq_jquery_adapter.js"></script><script type="text/javascript" src="js/amq.js"></script><script type="text/javascript">    var amq = org.activemq.Amq;    amq.init({      uri: 'amq',      logging: true,      timeout: 1    });    var myHandler = function(message){          $("#msgDiv").append(message);          $("#msgDiv").append("<br>");      }    amq.addListener("smeguangdong","topic://FirstTopic",myHandler);    function send(){        var nickname = $("#nickname").val();        var content = $("#content").val();        var msg = nickname + " : " +content;        //alert(msg);        amq.sendMessage("topic://FirstTopic","<message>"+msg+"</message>");    }</script></head><body><b>多人聊天室</b><hr><div style="height:300px;width:600px;border:block;overflow:auto" id="msgDiv"></div>昵称：<input type="text" id="nickname">内容：<input type="text" id="content"><button onclick="send()">发送</button></body></html>

运行

项目右键，Run As - MyEclipse Server Application，选择MyEclipse Tomcat，如果没出现异常即成功。

测试

打开浏览器，输入http://192.168.126.1:8080/mqajax/，

浏览器，打开另一个tab，输入http://localhost:8161/admin/topics.jsp，查看消息队列的web终端，选择“Topics”，可看到具体情况。

注意

一定要在web.xml中加上，否则会报java.lang.IllegalStateException: !(Jetty || Servlet 3.0 || ContinuationFilter)异常

<filter>      <filter-name>session</filter-name>      <filter-class>org.eclipse.jetty.continuation.ContinuationFilter</filter-class>  </filter>  <filter-mapping>      <filter-name>session</filter-name>      <url-pattern>/*</url-pattern>  </filter-mapping>

项目下载

完整项目

参考

http://activemq.apache.org/getting-started.html

http://activemq.apache.org/ajax.html

http://blog.csdn.net/u011983531/article/details/49621803

http://gongminrui.iteye.com/blog/1912637

0 0