在前端vue2中使用stompjs

在Vue2中使用StompJS可以帮助你轻松地处理WebSocket通信，它是一个轻量级的库，常用于实现实时应用程序的数据推送。以下是基本步骤：

1. **安装依赖**：
首先，你需要通过npm或yarn安装`stompjs`和`vue-stomp`插件：

   npm install stompjs vue-stomp
   # 或者
   yarn add stompjs vue-stomp

2. **配置连接**：
在Vue组件中，引入并配置stompjs客户端。通常在`created()`或`mounted()`生命周期钩子中完成：

   import Stomp from 'stompjs';
   import VueStomp from 'vue-stomp';

   Vue.use(VueStomp, {
     debug: true, // 调试模式开启
     broker: 'ws://your-broker-url', // 替换为你实际的WebSocket服务器地址
     heartbeats: [5000, 5000] // 心跳间隔，单位毫秒
   });

   export default {
     created() {
       this.$stomp.connect();
     },
     methods: {
       sendMessage() {
         this.$stomp.send('/app/messages', {}, JSON.stringify({ message: 'Hello, Server!' }));
       }
     }
   };

3. **发送消息**：
在需要发送数据到服务器的地方，你可以调用`$stomp.send()`方法。

4. **接收消息**：
对于接收到的消息，VueStomp会自动将它们转换成JavaScript对象，你可以在组件内监听特定的路径，如`@message`事件：

   mounted() {
     this.$stomp.on('my/topic', (message) => {
       console.log('Received:', message.body);
     });
   }