vue订阅rocketmq

根据提供的引用内容，我们可以看出这是Java端使用RocketMQ进行消息传递，而Vue作为前端框架，需要通过WebSocket与Java端进行长连接，从而实现消息的订阅和消费。具体步骤如下：

1.在Vue项目中安装`stompjs`和`sockjs-client`依赖：

npm install stompjs sockjs-client --save

2.在Vue项目中创建一个WebSocket服务，用于与Java端进行长连接：

import SockJS from 'sockjs-client'
import Stomp from 'stompjs'

let stompClient = null

export function connect() {
  const socket = new SockJS('http://localhost:8080/ws')
  stompClient = Stomp.over(socket)
  stompClient.connect({}, frame => {
    console.log('Connected: ' + frame)
    stompClient.subscribe('/topic/messages', message => {
      console.log('Received: ' + message.body)
      // 在这里处理接收到的消息
    })
  }, error => {
    console.log('Error: ' + error)
    setTimeout(connect, 5000)
  })
}

export function disconnect() {
  if (stompClient !== null) {
    stompClient.disconnect()
  }
  console.log('Disconnected')
}

3.在Vue项目中调用WebSocket服务的`connect()`方法，与Java端建立长连接：

import { connect } from '@/api/websocket'

export default {
  mounted() {
    connect()
  }
}

4.在Java端使用RocketMQ发送消息，并在WebSocket服务中处理接收到的消息：

// 发送消息
@Autowired
private RocketMQTemplate rocketMQTemplate;

rocketMQTemplate.convertAndSend("test-topic", "Hello, RocketMQ!");

// 接收消息
@MessageMapping("/messages")
@SendTo("/topic/messages")
public String handleMessage(String message) {
    return "Received: " + message;
}