vue 使用stompjs websocket连接rabbitmq

**Vue + StompJS + RabbitMQ**

在本文中，我们将介绍如何使用 Vue.js 和 StompJS 库与 RabbitMQ 进行 WebSocket 连接。我们将一步步地讲解整个过程，包括设置 RabbitMQ、配置 StompJS、建立连接以及发送和接收消息。

### **一. 设置RabbitMQ**

首先，我们需要在本地或云环境中部署一个 RabbitMQ服务器。这里我们使用 Docker 来快速启动一个 RabbitMQ 实例：

bashdocker run -d --name rabbitmq -p5672:5672 -p15672:15672 rabbitmq:3-management

然后，我们可以通过浏览器访问 RabbitMQ 的管理界面，地址为 ` `guest`。

### **二. 配置StompJS**

接下来，我们需要在 Vue项目中安装 StompJS 库：

bashnpm install stompjs

然后，我们可以在 Vue 组件中使用 StompJS 来连接 RabbitMQ：

javascriptimport { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// 在组件中使用StompJSconst app = {
 data() {
 return {
 stompClient: null,
 connectionUrl: 'ws://localhost:15674/ws',
 queueName: 'my_queue'
 }
 },
 mounted() {
 this.initWebSocket()
 },
 methods: {
 initWebSocket() {
 const socket = new WebSocket(this.connectionUrl)
 const stompClient = Stomp.over(socket)

 // 连接成功后，订阅队列 stompClient.connect({}, () => {
 console.log('Connected to RabbitMQ')
 stompClient.subscribe(this.queueName, (message) => {
 console.log(`Received message: ${message.body}`)
 })
 })

 this.stompClient = stompClient }
 }
}

### **三. 发送和接收消息**

现在，我们可以在 RabbitMQ 的管理界面中创建一个交换器、队列以及绑定它们。然后，我们可以使用 StompJS 来发送和接收消息：

javascript// 在组件中使用StompJSconst app = {
 data() {
 return {
 stompClient: null,
 connectionUrl: 'ws://localhost:15674/ws',
 queueName: 'my_queue'
 }
 },
 mounted() {
 this.initWebSocket()
 },
 methods: {
 initWebSocket() {
 const socket = new WebSocket(this.connectionUrl)
 const stompClient = Stomp.over(socket)

 // 连接成功后，订阅队列 stompClient.connect({}, () => {
 console.log('Connected to RabbitMQ')
 stompClient.subscribe(this.queueName, (message) => {
 console.log(`Received message: ${message.body}`)
 })

 // 发送消息 const sendMessage = () => {
 const messageBody = 'Hello, RabbitMQ!'
 stompClient.send(this.queueName, messageBody, () => {
 console.log('Sent message to RabbitMQ')
 })
 }

 this.stompClient = stompClient })
 }
 }
}

### **四. 总结**

在本文中，我们介绍了如何使用 Vue.js 和 StompJS 库与 RabbitMQ 进行 WebSocket 连接。我们一步步地讲解了整个过程，包括设置 RabbitMQ、配置 StompJS、建立连接以及发送和接收消息。通过阅读本文，你应该能够轻松地在你的 Vue项目中实现 RabbitMQ 的 WebSocket 支持。

### **五. 参考**

* [RabbitMQ 文档]( />* [StompJS 文档]( />* [Vue.js 文档](