Vue使用Stompjs接收Activemq的信息

Vue使用Stompjs接收Activemq的信息

spring向Activemq发送消息的代码如下，代码来自网络，本人修改Activemq服务器地址，以及增加登录服务器的账号密码，tom/tom

package com.demo.sys.mq.controllor;

import org.apache.activemq.ActiveMQConnectionFactory;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.jms.*;
import java.util.Arrays;

@Controller
@RequestMapping("/mq")
public class MqControllor {

    private static final Logger logger = LoggerFactory.getLogger(MqControllor.class);

    private static final String ACTIVEMQ_URL = "tcp://192.168.2.2:61616";
    //定义发送消息的队列名称
    private static final String QUEUE_NAME = "MyMessage";

    private static final String TOPIC_NAME = "Topic01";

    /**
     *发送消息
     */
    @RequestMapping("/send")
    @ResponseBody
    public String set(Object obj) {
        try {
            ActiveMQConnectionFactory activeMQConnectionFactory = new ActiveMQConnectionFactory("tom","tom",ACTIVEMQ_URL);
            //创建连接
            Connection connection = activeMQConnectionFactory.createConnection();
            //打开连接
            connection.start();
            //创建会话
            Session session = connection.createSession(false, Session.AUTO_ACKNOWLEDGE);
            //创建队列目标
            Destination destination = session.createQueue(QUEUE_NAME);
            //创建一个生产者
            javax.jms.MessageProducer producer = session.createProducer(destination);
            //创建模拟100个消息
            for (int i = 1; i <= 10; i++) {
                TextMessage message = session.createTextMessage("我发送message:" + i);
                //发送消息
                producer.send(message);
                //在本地打印消息
                System.out.println("我现在发的消息是：" + message.getText());
                logger.info("我现在发的消息是：" + message.getText());
            }
            //关闭连接
            connection.close();
        }
        catch (Exception ex){
            logger.info(ex.getMessage());
        }
        return "send sess";
    }
	
    /**
     *发送订阅
     */
    @RequestMapping("/sendTop")
    @ResponseBody
    public String sendTopic(Object obj){
        try{
            //创建连接工厂
            ActiveMQConnectionFactory activeMQConnectionFactory = new ActiveMQConnectionFactory("tom","tom",ACTIVEMQ_URL);
            //创建连接
            Connection connection = activeMQConnectionFactory.createConnection();
            //打开连接
            connection.start();
            //创建会话
            Session session = connection.createSession(false, Session.AUTO_ACKNOWLEDGE);
            //创建队列目标
            Destination destination = session.createTopic(TOPIC_NAME);
            //创建一个生产者
            javax.jms.MessageProducer producer = session.createProducer(destination);
            //创建模拟100个消息
            for (int i = 1; i <= 10; i++) {
                TextMessage message = session.createTextMessage("当前message是(主题模型):" + i);
                //发送消息
                producer.send(message);
                //在本地打印消息
                System.out.println("我现在发的消息是：" + message.getText());
            }
            //关闭连接
            connection.close();
        }
        catch (Exception ex){
            logger.info(ex.getMessage());
        }
        return "send Topic";
    }
}

创建vue项目

vue init webpack demo

进入demo文件夹，安装stompjs，net

cd demo
npm install stompjs
npm install net

在config下添加linkparam.js

export const MQ_SERVICE = 'ws://192.168.2.2:61614/stomp' // mq服务地址
export const MQ_USERNAME = 'tom' // mq连接用户名
export const MQ_PASSWORD = 'tom' //mq连接密码

在src/components下添加sock.vue文件

<template>
  <div>
      socket is loading...
  </div>
</template>

<script>
import Stomp from 'stompjs'
import { MQ_SERVICE, MQ_USERNAME, MQ_PASSWORD } from '../../config/linkparam.js'
export default {
  name: 'entry',
  data () {
    return {
      client: Stomp.client(MQ_SERVICE)
    }
  },
  created () {
    this.connect()
  },
  methods: {
    onConnected: function (frame) {
      console.log('Connected: ' + frame)
      var topic = '/topic/Topic01'

      this.client.subscribe(topic, this.responseCallback, this.onFailed)
    },
    onFailed: function (frame) {
      console.log('Failed: ' + frame)
    },
    responseCallback: function (frame) {
      console.log('responseCallback msg=>' + frame.body)
      console.log('------')
    },
    connect: function () {
      var headers = {
        'login': MQ_USERNAME,
        'passcode': MQ_PASSWORD
      }
      this.client.connect(headers, this.onConnected, this.onFailed)
    }
  }
}
</script>

修改src/App.vue

<template>
  <div id="app">
    <sock/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import sock from './components/sock'

export default {
  name: 'App',
  components: {
	sock
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行vue

npm run dev

浏览器访问

http://localhost:8081/mq/sendTop

F12进入调试模式

http://localhost:8080/

至此，全部完成