详解@Stomp/Stompjs在Vue3中的应用与实践(Vue3中@Stomp/Stompjs应用与实践详解)

原创

ithorizon 6个月前 (10-20) 阅读数 17 #后端开发

Vue3中@Stomp/Stompjs应用与实践详解

在现代的前后端分离架构中，WebSockets已经成为实现实时通信的重要手段。Vue3作为前端框架，与@Stomp/Stompjs的结合可以方便地实现与后端的WebSocket通信。本文将详细介绍在Vue3中怎样使用@Stomp/Stompjs进行WebSocket通信的实践。

一、@Stomp/Stompjs简介

@Stomp/Stompjs是一个用于与STOMP（Simple Text Oriented Messaging Protocol）兼容的服务器进行通信的客户端库。它允许我们通过WebSocket或其他协议发送和接收消息。STOMP是一种单纯的文本导向的消息协议，用于在客户端和服务器之间传输消息。

二、环境搭建

在起始实践之前，首先需要确保你的项目已经安装了Vue3和@stomp/stompjs库。以下是在Vue3项目中安装@stomp/stompjs的步骤：

npm install @stomp/stompjs

或者使用yarn：

yarn add @stomp/stompjs

三、基本使用

以下是一个单纯的Vue3组件，展示了怎样使用@Stomp/Stompjs与STOMP服务器进行通信。

3.1 创建Vue组件

首先，创建一个新的Vue组件（例如：`StompClient.vue`）。


<template>
  <div>
    <h2>STOMP WebSocket Client</h2>
    <button @click="connect">Connect</button>
    <button @click="disconnect">Disconnect</button>
    <div>
      <p>Received messages: {{ messages.length }}</p>
      <ul>
        <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
import Stomp from '@stomp/stompjs';
import SockJS from 'sockjs-client';
export default {
  name: 'StompClient',
  setup() {
    const messages = ref([]);
    let stompClient = null;
    const connect = () => {
      const socket = new SockJS('http://localhost:8080/stomp');
      stompClient = Stomp.over(socket);
      stompClient.connect({}, (frame) => {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/messages', (message) => {
          messages.value.push(message.body);
        });
      }, (error) => {
        console.log('STOMP error: ' + error);
      });
    };
    const disconnect = () => {
      if (stompClient) {
        stompClient.disconnect();
        console.log('Disconnected');
      }
    };
    onMounted(() => {
      connect();
    });
    onUnmounted(() => {
      disconnect();
    });
    return {
      messages,
      connect,
      disconnect
    };
  }
};
</script>

四、核心概念与API

4.1 连接与断开连接

在上述代码中，`connect`函数负责搭设与STOMP服务器的连接。使用`SockJS`创建WebSocket连接，然后通过`Stomp.over(socket)`创建一个STOMP客户端实例。`connect`方法接受三个参数：一个空对象（用于认证），一个顺利回调函数和一个差错回调函数。

`disconnect`函数用于断开连接。当组件被销毁时，`onUnmounted`钩子会调用这个函数以确保资源被正确释放。

4.2 订阅与接收消息

`subscribe`方法用于订阅一个特定的目的地（在这个例子中是`/topic/messages`），并指定一个回调函数来处理接收到的消息。接收到的消息被添加到Vue的响应式数组`messages`中，这样它们就可以在模板中显示。

五、进阶实践

5.1 发送消息

除了接收消息，我们通常还需要发送消息。以下是怎样修改上述组件以添加发送消息的功能：


<template>
  <div>
    <h2>STOMP WebSocket Client</h2>
    <button @click="connect">Connect</button>
    <button @click="disconnect">Disconnect</button>
    <input v-model="messageToSend" placeholder="Type a message..." />
    <button @click="sendMessage">Send</button>
    <div>
      <p>Received messages: {{ messages.length }}</p>
      <ul>
        <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
// ... (导入和组件定义保持不变)
export default {
  // ... (setup函数保持不变，但需要添加以下内容)
  data() {
    return {
      messageToSend: '',
      // ... (其他数据属性)
    };
  },
  methods: {
    sendMessage() {
      if (stompClient && stompClient.connected) {
        stompClient.send('/appsendMessage', {}, this.messageToSend);
      }
    },
    // ... (其他方法)
  }
};
</script>

在这个修改后的组件中，我们添加了一个输入框和一个发送按钮。`sendMessage`方法会检查STOMP客户端是否已连接，然后发送消息到`/appsendMessage`目的地。注意，目的地路径通常由后端定义，确保它与后端服务器的配置相匹配。

5.2 差错处理与重连机制

在实际应用中，差错处理和重连机制是非常重要的。我们可以通过监听差错事件并在连接挫败时尝试重新连接来实现这一点：


const connect = () => {
  // ... (之前的代码保持不变)
  stompClient.connect({}, (frame) => {
    // ... (顺利连接的回调函数保持不变)
  }, (error) => {
    console.log('STOMP error: ' + error);
    setTimeout(connect, 5000); // 尝试重新连接
  });
};

在这个例子中，如果连接挫败，我们使用`setTimeout`在5秒后尝试重新连接。这只是一个单纯的重连策略，实际应用中大概需要更纷乱的逻辑，例如指数退避策略。