@omni-vue/stomp-websocket 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { useStomp } from "./useStomp";
+export { useStompChannel } from "./useStompChannel";
+export type { PayloadType, ConnectionStatus } from "./useStomp";
+export type { SendConfig, StompChannelOptions } from "./useStompChannel";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { useStomp } from "./useStomp";
+export { useStompChannel } from "./useStompChannel";

package/dist/useStomp.d.ts

@@ -0,0 +1,23 @@
+import { type Ref } from "vue";
+export type PayloadType = {
+    from: string;
+    content: {
+        currentPage: number;
+        size: number;
+        total: number;
+        rows: Array<Record<string, any>>;
+        [key: string]: any;
+    };
+};
+export type ConnectionStatus = "disconnected" | "connecting" | "connected" | "error";
+export declare function useStomp(url: string | Ref<string>): {
+    connectionStatus: Ref<ConnectionStatus, ConnectionStatus>;
+    messages: Ref<any[], any[]>;
+    connect: () => void;
+    disconnect: () => void;
+    subscribe: (topic: string, callback: (payload: any) => void) => string;
+    unsubscribe: (topic: string) => void;
+    send: (destination: string, body: object) => void;
+    isConnected: () => boolean;
+};
+//# sourceMappingURL=useStomp.d.ts.map

package/dist/useStomp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStomp.d.ts","sourceRoot":"","sources":["../useStomp.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QACP,WAAW,EAAE,MAAM,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;QACjC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,gBAAgB,GACxB,cAAc,GACd,YAAY,GACZ,WAAW,GACX,OAAO,CAAC;AASZ,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;;;;;uBA4EtB,MAAM,YAAY,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI;yBAgBtC,MAAM;wBASP,MAAM,QAAQ,MAAM;;EAsBhD"}

package/dist/useStomp.js

@@ -0,0 +1,110 @@
+import { Client } from "@stomp/stompjs";
+import { ref, shallowRef, unref } from "vue";
+export function useStomp(url) {
+    const connectionStatus = ref("disconnected");
+    const messages = ref([]);
+    // 使用 shallowRef 避免 Vue 深度代理 Client 对象带来的性能损耗
+    const stompClient = shallowRef(null);
+    // 维护订阅关系（断线重连时需要依赖这个进行自动重连）
+    const activeSubscriptions = new Map();
+    // 连接
+    const connect = () => {
+        if (stompClient.value?.active)
+            return; // 使用 active 判断是否已经在运行
+        connectionStatus.value = "connecting";
+        const client = new Client({
+            brokerURL: unref(url),
+            reconnectDelay: 5000,
+            heartbeatIncoming: 4000,
+            heartbeatOutgoing: 4000,
+        });
+        client.onConnect = (frame) => {
+            connectionStatus.value = "connected";
+            console.log("✅ STOMP Connected:", frame.headers);
+            // 断线重连后自动恢复之前的订阅
+            activeSubscriptions.forEach((record, id) => {
+                record.stompSub = client.subscribe(record.topic, (message) => {
+                    handleMessage(record.topic, message, record.callback);
+                });
+            });
+        };
+        client.onStompError = (frame) => {
+            connectionStatus.value = "error";
+            // console.error("❌ Broker Error:", frame.body);
+        };
+        client.onDisconnect = () => {
+            connectionStatus.value = "disconnected";
+            // 不要 clear() 订阅记录，只把底层的 stompSub 实例置空，以便重连后恢复
+            activeSubscriptions.forEach((record) => {
+                record.stompSub = undefined;
+            });
+        };
+        client.onWebSocketError = (event) => {
+            connectionStatus.value = "error";
+            // console.error("❌ WebSocket Error:", event);
+        };
+        stompClient.value = client;
+        client.activate();
+    };
+    // 统一的消息处理函数
+    const handleMessage = (topic, message, callback) => {
+        try {
+            const payload = JSON.parse(message.body);
+            callback(payload);
+        }
+        catch (e) {
+            console.error("❌ 错误:", e);
+        }
+    };
+    // 断开
+    const disconnect = () => {
+        if (stompClient.value?.active) {
+            stompClient.value.deactivate();
+            connectionStatus.value = "disconnected";
+        }
+    };
+    // 订阅 (返回 topic 以便手动取消)
+    const subscribe = (topic, callback) => {
+        const record = { topic, callback };
+        // 如果当前已连接，直接底层订阅
+        if (stompClient.value?.connected) {
+            record.stompSub = stompClient.value.subscribe(topic, (message) => {
+                handleMessage(topic, message, callback);
+            });
+        }
+        // 将订阅记录存入 Map，使用 topic 作为 key
+        activeSubscriptions.set(topic, record);
+        return topic;
+    };
+    // 取消订阅
+    const unsubscribe = (topic) => {
+        const record = activeSubscriptions.get(topic);
+        if (record) {
+            record.stompSub?.unsubscribe();
+            activeSubscriptions.delete(topic);
+        }
+    };
+    // 发送消息
+    const send = (destination, body) => {
+        if (stompClient.value?.connected) {
+            stompClient.value.publish({
+                destination,
+                body: JSON.stringify(body),
+                headers: { "content-type": "application/json" },
+            });
+        }
+        else {
+            // console.warn("STOMP 未连接，无法发送消息");
+        }
+    };
+    return {
+        connectionStatus,
+        messages,
+        connect,
+        disconnect,
+        subscribe,
+        unsubscribe,
+        send,
+        isConnected: () => stompClient.value?.connected ?? false,
+    };
+}

package/dist/useStompChannel.d.ts

@@ -0,0 +1,21 @@
+export interface SendConfig {
+    destination: string;
+    interval?: number;
+    payload?: () => any;
+}
+export interface StompChannelOptions {
+    subscribeTopic?: string;
+    sends?: SendConfig[];
+    onMessage?: (payload: any) => void;
+    onConnected?: (sendFn: any) => void;
+}
+export declare function useStompChannel(stompInstance: any, options?: StompChannelOptions): {
+    subscriptionId: import("vue").Ref<string | null, string | null>;
+    isConnected: import("vue").Ref<boolean, boolean>;
+    lastMessage: import("vue").Ref<any, any>;
+    send: (destination: string, payload?: any) => boolean;
+    startAllSending: () => void;
+    stopAllSending: () => void;
+    unsubscribe: () => void;
+};
+//# sourceMappingURL=useStompChannel.d.ts.map

package/dist/useStompChannel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStompChannel.d.ts","sourceRoot":"","sources":["../useStompChannel.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAC7B,aAAa,EAAE,GAAG,EAClB,OAAO,CAAC,EAAE,mBAAmB;;;;wBA+DF,MAAM,YAAY,GAAG;;;;EA6DjD"}

package/dist/useStompChannel.js

@@ -0,0 +1,108 @@
+import { onUnmounted, ref, watch } from "vue";
+export function useStompChannel(stompInstance, options) {
+    const { subscribeTopic, sends, onMessage } = options || {};
+    const subscriptionId = ref(null);
+    const isConnected = ref(false);
+    const lastMessage = ref(null);
+    const sendTimers = [];
+    // 订阅主题
+    const startSubscription = () => {
+        console.log("开始订阅:", subscribeTopic);
+        const id = stompInstance?.subscribe(subscribeTopic, (payload) => {
+            lastMessage.value = payload;
+            onMessage?.(payload);
+        });
+        if (id) {
+            console.log("订阅成功:", id);
+            subscriptionId.value = id;
+        }
+    };
+    // 开始所有轮询发送
+    const startAllSending = () => {
+        stopAllSending();
+        sends?.forEach((config, index) => {
+            const { destination, interval = 3000, payload = () => ({}) } = config;
+            // 立即执行一次
+            if (stompInstance?.connectionStatus?.value === "connected") {
+                stompInstance?.send(destination, {
+                    ...payload(),
+                    timestamp: new Date().toISOString(),
+                });
+            }
+            // 然后设置定时器
+            const timer = setInterval(() => {
+                if (stompInstance?.connectionStatus?.value === "connected") {
+                    stompInstance?.send(destination, {
+                        ...payload(),
+                        timestamp: new Date().toISOString(),
+                    });
+                }
+            }, interval);
+            sendTimers[index] = timer;
+        });
+    };
+    // 停止所有轮询发送
+    const stopAllSending = () => {
+        sendTimers.forEach((timer) => {
+            if (timer) {
+                clearInterval(timer);
+            }
+        });
+        sendTimers.length = 0;
+    };
+    // 手动发送消息
+    const send = (destination, payload) => {
+        if (stompInstance?.connectionStatus?.value === "connected") {
+            stompInstance?.send(destination, {
+                ...payload,
+                timestamp: new Date().toISOString(),
+            });
+            return true;
+        }
+        return false;
+    };
+    // 取消订阅
+    const unsubscribe = () => {
+        if (subscriptionId.value) {
+            console.log("取消订阅:", subscriptionId.value);
+            stompInstance?.unsubscribe(subscriptionId.value);
+            subscriptionId.value = null;
+        }
+    };
+    // 监听连接状态
+    const stopWatch = watch(() => stompInstance?.connectionStatus?.value, (status) => {
+        isConnected.value = status === "connected";
+        if (status === "connected") {
+            // 连接成功后开始订阅（如果还没订阅）
+            if (subscribeTopic && !subscriptionId.value) {
+                startSubscription();
+            }
+            startAllSending();
+            options?.onConnected?.(send);
+        }
+        else {
+            console.log("STOMP 断开连接");
+            stopAllSending();
+            // 断开时清空订阅ID，下次连接时重新订阅
+            if (subscriptionId.value) {
+                stompInstance?.unsubscribe(subscriptionId.value);
+            }
+            subscriptionId.value = null;
+        }
+    }, { immediate: true });
+    // 组件卸载时清理
+    onUnmounted(() => {
+        stopWatch();
+        stopAllSending();
+        unsubscribe();
+    });
+    return {
+        subscriptionId,
+        isConnected,
+        lastMessage,
+        send,
+        startAllSending,
+        stopAllSending,
+        unsubscribe,
+    };
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@omni-vue/stomp-websocket",
+  "version": "1.0.0",
+  "description": "A Vue 3 STOMP WebSocket library with composable hooks",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "stomp",
+    "websocket",
+    "vue",
+    "vue3",
+    "composable",
+    "vue-composable",
+    "real-time",
+    "messaging"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": "",
+  "peerDependencies": {
+    "@stomp/stompjs": "^7.0.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@stomp/stompjs": "^7.0.0",
+    "typescript": "^5.0.0",
+    "vue": "^3.0.0"
+  }
+}

package/readme.md

@@ -0,0 +1,229 @@
+# @lejurobot/stomp-websocket
+
+A Vue 3 STOMP WebSocket library with composable hooks for real-time messaging.
+
+## Installation
+
+```bash
+npm install @lejurobot/stomp-websocket
+# or
+pnpm add @lejurobot/stomp-websocket
+```
+
+## Peer Dependencies
+
+Make sure you have these installed:
+
+```bash
+npm install vue @stomp/stompjs
+```
+
+## What This Package Provides
+
+This package provides two core composable functions:
+
+### 1. `useStomp` - Core STOMP Connection Management
+
+Manages WebSocket connection, subscriptions, and message sending.
+
+**API:**
+
+| Property/Method | Type | Description |
+|----------------|------|-------------|
+| `connectionStatus` | `Ref<ConnectionStatus>` | Connection state: `disconnected` \| `connecting` \| `connected` \| `error` |
+| `messages` | `Ref<any[]>` | Message history (max 50 messages) |
+| `connect` | `() => void` | Establish connection |
+| `disconnect` | `() => void` | Close connection |
+| `subscribe` | `(topic: string, callback: Function) => string` | Subscribe to a topic, returns topic ID |
+| `unsubscribe` | `(topic: string) => void` | Unsubscribe from a topic |
+| `send` | `(destination: string, body: object) => void` | Send a message |
+| `isConnected` | `() => boolean` | Check if connected |
+
+### 2. `useStompChannel` - High-Level Channel Abstraction
+
+Encapsulates channel-level polling and subscription with automatic lifecycle management.
+
+**API:**
+
+| Property/Method | Type | Description |
+|----------------|------|-------------|
+| `isConnected` | `Ref<boolean>` | Connection status |
+| `lastMessage` | `Ref<any>` | Last received message |
+| `send` | `(destination: string, payload?: any) => boolean` | Send a message manually |
+| `startAllSending` | `() => void` | Start all polling timers |
+| `stopAllSending` | `() => void` | Stop all polling timers |
+| `unsubscribe` | `() => void` | Unsubscribe from topic |
+
+## Usage Examples
+
+### Basic Connection
+
+```typescript
+import { useStomp } from '@lejurobot/stomp-websocket'
+
+const stomp = useStomp('wss://your-server.com/ws')
+
+// Connect
+stomp.connect()
+
+// Check connection status
+console.log(stomp.connectionStatus.value) // 'connected'
+```
+
+### Subscribe to Multiple Topics
+
+```typescript
+import { useStomp } from '@lejurobot/stomp-websocket'
+
+const stomp = useStomp('wss://your-server.com/ws')
+stomp.connect()
+
+// Subscribe to topic 1
+stomp.subscribe('/topic/notifications', (message) => {
+  console.log('Notification:', message)
+})
+
+// Subscribe to topic 2
+stomp.subscribe('/topic/updates', (message) => {
+  console.log('Update:', message)
+})
+
+// Subscribe to topic 3
+stomp.subscribe('/user/queue/messages', (message) => {
+  console.log('Private message:', message)
+})
+
+// Unsubscribe from a specific topic
+stomp.unsubscribe('/topic/notifications')
+```
+
+### Send Messages
+
+```typescript
+// Send to destination
+stomp.send('/app/chat', {
+  content: 'Hello World',
+  timestamp: new Date().toISOString()
+})
+```
+
+### Channel with Polling
+
+```typescript
+import { useStompChannel } from '@lejurobot/stomp-websocket'
+
+// Assuming you have a stomp instance from useStomp
+const stomp = useStomp('wss://your-server.com/ws')
+stomp.connect()
+
+const channel = useStompChannel(stomp, {
+  subscribeTopic: '/user/queue/data',
+  sends: [
+    {
+      destination: '/app/request-data',
+      interval: 3000, // Poll every 3 seconds
+      payload: () => ({ page: 1, size: 10 })
+    }
+  ],
+  onMessage: (payload) => {
+    console.log('Received:', payload)
+  }
+})
+```
+
+### Multiple Polling Destinations
+
+```typescript
+const channel = useStompChannel(stomp, {
+  subscribeTopic: '/user/queue/responses',
+  sends: [
+    {
+      destination: '/app/device-status',
+      interval: 2000,
+      payload: () => ({ deviceId: '001' })
+    },
+    {
+      destination: '/app/alarms',
+      interval: 5000,
+      payload: () => ({ level: 'high' })
+    }
+  ],
+  onMessage: (payload) => {
+    // Handle all messages from the subscribed topic
+    console.log('Message:', payload)
+  }
+})
+```
+
+### Integration with Vue Component
+
+Create your own provider component:
+
+```vue
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { useStomp } from '@lejurobot/stomp-websocket'
+import { useWebsocketStore } from '@/stores/websocket'
+import { storeToRefs } from 'pinia'
+
+const wsStore = useWebsocketStore()
+const { finalWsUrl } = storeToRefs(wsStore)
+
+const stomp = useStomp(finalWsUrl)
+stomp.connect()
+
+// Auto-reconnect on URL change
+watch(finalWsUrl, (newUrl, oldUrl) => {
+  if (newUrl !== oldUrl && oldUrl !== undefined) {
+    stomp.disconnect()
+    setTimeout(() => stomp.connect(), 100)
+  }
+})
+
+onUnmounted(() => {
+  stomp.disconnect()
+})
+
+// Inject for child components
+provide('STOMP_INSTANCE', stomp)
+</script>
+```
+
+Use in child components:
+
+```vue
+<script setup lang="ts">
+const stomp = inject<any>('STOMP_INSTANCE')
+
+// Subscribe to multiple topics
+const topic1 = stomp.subscribe('/topic/news', (msg) => {
+  console.log('News:', msg)
+})
+
+const topic2 = stomp.subscribe('/topic/alerts', (msg) => {
+  console.log('Alert:', msg)
+})
+
+onUnmounted(() => {
+  stomp.unsubscribe(topic1)
+  stomp.unsubscribe(topic2)
+})
+</script>
+```
+
+## Features
+
+- ✅ **Auto Reconnection** - Automatically reconnects on disconnection with configurable delay
+- ✅ **Subscription Recovery** - Automatically restores subscriptions after reconnection
+- ✅ **Multiple Subscriptions** - Subscribe to unlimited topics
+- ✅ **Polling Support** - Built-in interval-based message sending
+- ✅ **TypeScript** - Full TypeScript support with type definitions
+- ✅ **Vue 3 Composable** - Designed for Vue 3 composition API
+- ✅ **Lifecycle Management** - Automatic cleanup on component unmount
+
+## License
+
+MIT