@jian-vue/stomp-websocket

一个简洁的 Vue 3 STOMP WebSocket 库，支持自动重连、订阅管理和轮询发送。

useStomp.ts - 核心 STOMP 连接管理

主要功能： 管理 WebSocket 连接的生命周期，提供基础的连接、订阅、发送功能。

useStompChannel.ts - 高级通道封装

主要功能： 在 useStomp 基础上封装，提供轮询发送和自动生命周期管理。

安装

npm install @jian-vue/stomp-websocket
# 或
pnpm add @jian-vue/stomp-websocket

快速开始

第一步：配置 Pinia Store

将 websocket.ts 文件放到你的 Pinia stores 目录中：

第二步：创建 StompProvider 组件

创建 StompProvider.vue 组件：

第三步：在 App.vue 中使用

<!-- App.vue -->
<template>
  <StompProvider>
    <router-view />
  </StompProvider>
</template>

<script setup lang="ts">
import StompProvider from "@/components/Stomp/StompProvider.vue";
</script>

使用示例

基础用法：轮询获取数据

<script setup lang="ts">
import { useStompChannel } from "@lejurobot/stomp-websocket";

const stompInstance = inject<any>("STOMP_INSTANCE");
const taskList = ref([]);
const pagination = ref({ page: 1, pageSize: 10, total: 0 });

const { send: sendTaskListRequest } = useStompChannel(stompInstance, {
  subscribeTopic: "/user/topic/all",
  sends: [
    {
      destination: "/web/task.send",
      interval: 2000, // 每 2 秒轮询一次
      // 传入回调函数，用于动态生成载荷参数
      payload: () => ({
        from: "serve",
        content: {
          page: pagination.value.page,
          size: pagination.value.pageSize,
        },
      }),
    },
  ],
  onMessage: (payload: any) => {
    const data = payload.content;
    taskList.value = data.rows;
    pagination.value.total = data.total;
  },
});

// 手动刷新数据
const refreshTaskList = () => {
  send("/web/task.send", {
    content: {
      page: pagination.value.page,
      size: pagination.value.pageSize,
    },
  });
};

// 可订阅多个主题：设备状态轮询
const { send: sendDeviceStatus } = useStompChannel(stompInstance, {
  subscribeTopic: "/user/device/status",
  sends: [
    {
      destination: "/app/device-status",
      interval: 2000,
      payload: () => ({ deviceId: "001" }),
    },
  ],
  onMessage: (payload) => {
    console.log("设备状态:", payload);
  },
});
</script>

API 文档

useStomp

核心连接管理函数。

const stomp = useStomp(url: string | Ref<string>)

// 返回值
{
  connectionStatus,  // 连接状态
  messages,          // 消息历史
  connect,           // 建立连接
  disconnect,        // 断开连接
  subscribe,         // 订阅主题
  unsubscribe,       // 取消订阅
  send,              // 发送消息
  isConnected,       // 检查连接
}

useStompChannel

高级通道封装，支持轮询和自动管理。

const channel = useStompChannel(stompInstance, {
  subscribeTopic: string,      // 订阅的主题
  sends: [{                    // 轮询配置数组
    destination: string,       // 发送目标
    interval: number,          // 轮询间隔（毫秒）
    payload: () => any,        // 载荷生成函数
  }],
  onMessage: (payload) => {},  // 消息回调
  onConnected: (sendFn) => {}, // 连接成功回调
})

// 返回值
{
  isConnected,      // 连接状态
  lastMessage,      // 最后一条消息
  send,             // 手动发送消息
  startAllSending,  // 启动所有轮询
  stopAllSending,   // 停止所有轮询
  unsubscribe,      // 取消订阅
}

特性

• ✅ 自动重连 - 断线后自动重连，恢复订阅
• ✅ 轮询支持 - 内置定时轮询发送
• ✅ 多主题订阅 - 支持订阅多个主题
• ✅ TypeScript - 完整类型定义
• ✅ 生命周期管理 - 组件卸载自动清理

License

MIT