A2·ActiveMQ ajax使用方式及Spring配置注意事项

最新推荐文章于 2021-12-04 21:00:00 发布

星潮汐

最新推荐文章于 2021-12-04 21:00:00 发布

阅读量456

点赞数

分类专栏： ActiveMQ 文章标签： ActiveMQ ajax async-supported

本文链接：https://blog.youkuaiyun.com/lycz_tpself/article/details/81123461

版权

ActiveMQ 专栏收录该内容

3 篇文章

订阅专栏

本文延续上篇文章，详细介绍了在ActiveMQ后端配置完成后，前端如何使用Ajax进行交互的配置步骤。主要内容包括需要添加的jar包，web.xml配置，特别是强调了AjaxServlet中<async-supported>true</async-supported>的重要性，并指出其他不支持异步的filter也需要同样配置。此外，提供了实例HTML页面代码和JS文件的位置。文章基于SSM框架，展示了sendMessage和sendMessage1两个方法的使用，并解释了amp对象uri配置为【../amq】的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过上一篇文章https://blog.youkuaiyun.com/lycz_tpself/article/details/81115918可以完成ActiveMQ后端使用要完成的配置，本文基于上篇博文介绍前端ajax使用所需要的额外配置。

新增的jar包

                <dependency>
			<groupId>org.apache.activemq</groupId>
			<artifactId>activemq-all</artifactId>
			<version>5.15.4</version>
		</dependency>
		<dependency>
			<groupId>org.apache.activemq</groupId>
			<artifactId>activemq-web</artifactId>
			<version>5.15.4</version>
		</dependency>

添加的web.xml配置

	<!-- 配置支持ajax的jms -->
	<context-param>
		<param-name>org.apache.activemq.brokerURL</param-name>
		<param-value>tcp://127.0.0.1:61616</param-value>
	</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-mapping>
		<servlet-name>AjaxServlet</servlet-name>
		<url-pattern>/amq/*</url-pattern>
	</servlet-mapping>

需要注意的是，如果像上述代码一样在AjaxServlet中加入了<async-supported>true</async-supported>还是报java.lang.IllegalStateException: A filter or servlet of the current chain does not support asynchron错误，需要检查一下配置文件中如下所示的拦截器，这些filter也需要加入<async-supported>true</async-supported>。

<!-- Character Encoding filter -->
	<filter>
		<filter-name>SpringEncodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<async-supported>true</async-supported>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>

配置到此就结束了，下面给出一份实例的html页面代码，

代码中所需的js文件在【ActiveMQ安装目录\webapps-demo\demo\js】目录下可以找到。
本文程序基于SSM框架，代码中的sendMessage和sendMessage1两个方法都可以使用
相比于官网给出的文档，这里amp对象在初始化时使用的uri是【../amq】,这是因为此文件并不在webapp根目录下，所属位置如图，uri的目的是为了让amq对象初始化时调用根目录下的amq方法，本文是【http://localhost:8080/SSMMJFT/amq】:

<!DOCTYPE html>
<html>
<head>
<title>testActiveMQ.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../style/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../style/amq_jquery_adapter.js"></script>
<script type="text/javascript" src="../style/amq.js"></script>

<style type="text/css">
#show {
	width: 800px;
	height: 500px;
	border: 1px solid black;
}
</style>
</head>

<body>
	<input type="text" name="sendMessage">
	<a href="javascript:void(0)" onclick="sendMessage1()">点击</a>
	<div id="show"></div>
</body>
<script type="text/javascript">
	var amq = org.activemq.Amq;
	var myDestination = 'topic://biz1.topic';
	/* var myDestination = 'channel://chat1'; */

	amq.init({
		uri : '../amq', //AjaxServlet所配置对应的URL
		logging : true, //激活日志记录
		timeout : 20, //保持连接时长，单位为秒
		clientId : (new Date()).getTime().toString() //防止多个浏览器窗口标签共享同一个JSESSIONID
	});

	var myHandler = {
		rcvMessage : function(message) {
			$("#show").append(message).append("<br>");
		}
	};

        /* 添加监听 */
	amq.addListener('sadf', myDestination, myHandler.rcvMessage);

	/* 发送消息到AMQ */
	function sendMessage() {
		let message = $("input[name = 'sendMessage']").val();
		$.post("/SSMMJFT/AMQMessage/localMessageSend.do"
			, {
				style : "topic",
				message : message,
			}
			, function(data) {
				if (data.status !== 200) {
					layer.msg(data.msg);
				}
			});
	}
	function sendMessage1() {
		let message = $("input[name = 'sendMessage']").val();
		amq.sendMessage(myDestination, message);
	}
</script>
</html>

参考文档

http://billmingchen.iteye.com/blog/1922020