vue连接rabbitmq进行消费

vue连接rabbitmq进行消费

<template>
  <div class="hello">
  </div>
</template>

<script type="text/javascript">
	import Stomp from 'stompjs';
	
	var i=0;
	
	export default {
	  data() {
	    return {
	      title:'测试信息',
	      client: Stomp.client('ws://127.0.0.1:15674/ws'),//stopmp连接地址，固定模板:ws://ip:15674/ws
	      listData: [

	      ]
	    }
	  },
	  computed: {
	    optionSetting() {
	      return {
	        step: 1, // 速度，值越大，速度越快
	        hoverStop: true // 鼠标悬停效果，false为关闭该效果
	        // 　　　　　　　　　　singleHeight: 120,//单行停顿
	        // 　　　　　　　　　　waitTime: 2500,//单行停顿的时间
	      }
	    }
	  },
	  created() {
	    this.connect()// stomp连接mq
	  },
	  methods: {
	    onConnected: function(frame) {
	      // 订阅频道，如果有交换机写'/exchange/交换机名/key名'
	      //如果没有交换机则写'queue名/key名'
	      const topic = '/exchange/amq.topic/topickeyTest1'
	      this.client.subscribe(topic, this.responseCallback, this.onFailed)
	    },
	    onFailed: function(frame) {
	      console.log('MQ Failed:' + frame)
	    },
	    responseCallback: function(frame) {
	    // 接收消息处理
	      console.log('MQ msg=>', frame.body)
		  i++;
		  if(i==1000){
			  i=0;
			  console.clear();
		  }
	      this.title=frame.body;
	    },
	    connect() {
	    // 初始化mqtt客户端，并连接mqtt服务
	      const headers = {
	        login: '用户名',
	        password: '密码'
	      }
		 this.client.connect('用户名',密码', this.onConnected, this.onFailed)
	    }
	  }
	}

	  
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>