STOMP-WebSocket使用activeMq代理实现web端消息推送

1、启用STOMP功能

STOMP 的消息根据前缀的不同分为三种:

(1)以 /app 开头的消息都会被路由到带有@MessageMapping 或 @SubscribeMapping 注解的方法中;

(2)以/topic 或 /queue 开头的消息都会发送到STOMP代理中,根据你所选择的STOMP代理不同,目的地的可选前缀也会有所限制;

(2)以/user开头的消息会将消息重路由到某个用户独有的目的地上。

二、服务端集成activeMp

(1)添加配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
	<bean id="jmsFactory" class="org.apache.activemq.pool.PooledConnectionFactory"
          destroy-method="stop">
        <property name="connectionFactory">
            <bean class="org.apache.activemq.ActiveMQConnectionFactory">
                <property name="brokerURL">
                    <value>tcp://192.168.0.102:6161?wireFormat.maxInactivityDurationInitalDelay=30000</value>
                   <!--  <value>tcp://localhost:61616</value> -->
                </property>
            </bean>
        </property>
        <property name="maxConnections" value="100"></property>
    </bean>
	 <!-- 配置JMS模板(Queue),Spring提供的JMS工具类,它发送、接收消息。 -->
	 <bean id="jmsTemplate" class="org.springframework.jms.core.JmsTemplate">
        <property name="connectionFactory" ref="cachingConnectionFactory"/>
        <property name="messageConverter">
            <bean class="org.springframework.jms.support.converter.SimpleMessageConverter"/>
        </property>
           <!-- true是topic,false是queue,默认是false,此处显示写出false -->
        <property name="pubSubDomain" value="false" />
    </bean>
	
  <!--   使用缓存可以提升效率 -->
    <bean id="cachingConnectionFactory"
          class="org.springframework.jms.connection.CachingConnectionFactory">
        <property name="targetConnectionFactory" ref="jmsFactory"/>
        <property name="sessionCacheSize" value="1"/>
    </bean>

 	<!--  测试Topic -->
    <bean id="destinationTopic" class="org.apache.activemq.command.ActiveMQTopic">
        <constructor-arg index="0" value="spring-topic"/>
    </bean>
 	<!--   这个是队列目的地,点对点的 -->
    <bean id="queueDestination" class="org.apache.activemq.command.ActiveMQQueue">
        <constructor-arg index="0"> 
            <value>queue1,queue2,queue3,queue4</value>
        </constructor-arg>
    </bean>
    <!-- 接收端  -->
    <bean id="jmsContainer"
          class="org.springframework.jms.listener.DefaultMessageListenerContainer">
        <property name="connectionFactory" ref="cachingConnectionFactory"/>
        <property name="destination" ref="queueDestination"/>
        <property name="messageListener" ref="messageListener"/>
    </bean>
 
   <!--   消息监听器  -->
    <bean id="messageListener" class="com.grainRain.third.listener.MyMessageListener"></bean>
   <!-- 接收端 end -->
</beans>

(2)向队列发送消息

@Resource(name = "jmsTemplate")
    private JmsTemplate jmsTemplate;

    //目的地队列的明证,我们要向这个队列发送消息
    @Resource(name = "destinationTopic")
    private Destination destination;

    //向特定的队列发送消息
    public void sendSomeMsg(String mqParamDto) {
        try {
            jmsTemplate.send(destination, new MessageCreator() {
                @Override
                public Message createMessage(Session session) throws JMSException {
                    return session.createTextMessage(mqParamDto);
                }
            });

        } catch (Exception ex) {
           
        }

    }

三、Web端使用websocket连接ActiveMQ:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/stomp.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/stomp.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/stomp-node.js"></script>
<script type="text/javascript">
     //需要和activeMq中配置文件的ws路径一致
	var url = "ws://192.168.0.104:61614/stomp"; 
	
	var login = "admin";
	
	var passcode = "admin";
	
	//监听的队列
	
	//需要和发送者的发送的队列名称一致否则无法接受到数据
        //topic为发布订阅模式   queue为点对点模式
	 var destination = "/topic/spring-topic";
	
	 client = Stomp.client(url);
	
	var onconnect = function(frame) {   
	
	  client.subscribe(destination, function(message) {

	     console.log(message.body);
	
	         alert(message.body);        
	
	  });
	
	};

	client.connect(login, passcode, onconnect);
	
</script>
</head>
<body>
<h2>你好!!!</h2>
</body>
</html>

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3中使用stomp-websocket,你可以按照以下步骤进行操作: 1. 首先,你需要安装stompjs和sockjs-client依赖。在你的Vue项目根目录下,打开终并运行以下命令: ```shell npm install stompjs sockjs-client --save ``` 2. 在你需要使用stomp-websocket的组件中,引入stompjs和sockjs-client库。你可以在Vue组件的`<script>`标签中添加以下代码: ```javascript import { Stomp } from 'stompjs'; import SockJS from 'sockjs-client'; ``` 3. 接下来,你可以在组件的方法中创建和管理stomp客户连接。例如,在`created`钩子函数中,可以添加以下代码: ```javascript created() { const socket = new SockJS('http://localhost:8080/your-websocket-endpoint'); // 替换为你的WebSocket点URL this.stompClient = Stomp.over(socket); this.stompClient.connect({}, this.onConnect, this.onError); }, methods: { onConnect() { // 连接成功后的处理逻辑 }, onError(error) { // 连接失败后的处理逻辑 } } ``` 4. 在`onConnect`方法中,你可以订阅并接收消息。例如: ```javascript onConnect() { this.stompClient.subscribe('/your-destination', (message) => { // 处理收到的消息 console.log(message.body); }); } ``` 这里的`/your-destination`是你想要订阅的目标地址。 5. 最后,当你不再需要连接时,记得在适当的时候断开连接: ```javascript beforeDestroy() { this.stompClient.disconnect(); } ``` 这样,你就可以在Vue 3中使用stomp-websocket了。请注意,上述代码中的URL和订阅目标地址需要根据你的实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值