@omni-vue/stomp-websocket 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omni-vue/stomp-websocket",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue 3 STOMP WebSocket library with composable hooks",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -1,228 +1,168 @@
-# @lejurobot/stomp-websocket
+# @omni-vue/stomp-websocket
 
-A Vue 3 STOMP WebSocket library with composable hooks for real-time messaging.
+一个简洁的 Vue 3 STOMP WebSocket 库，支持自动重连、订阅管理和轮询发送。
 
-## Installation
+### useStomp.ts - 核心 STOMP 连接管理
 
-```bash
-npm install @lejurobot/stomp-websocket
-# or
-pnpm add @lejurobot/stomp-websocket
-```
+主要功能：
+管理 WebSocket 连接的生命周期，提供基础的连接、订阅、发送功能。
 
-## Peer Dependencies
+### useStompChannel.ts - 高级通道封装
 
-Make sure you have these installed:
+主要功能：
+在 useStomp 基础上封装，提供轮询发送和自动生命周期管理。
+
+## 安装
 
 ```bash
-npm install vue @stomp/stompjs
+npm install @omni-vue/stomp-websocket
+# 或
+pnpm add @omni-vue/stomp-websocket
 ```
 
-## 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
+### 第一步：配置 Pinia Store
 
-```typescript
-import { useStomp } from '@lejurobot/stomp-websocket'
+将 `websocket.ts` 文件放到你的 Pinia stores 目录中：
 
-const stomp = useStomp('wss://your-server.com/ws')
-stomp.connect()
+### 第二步：创建 StompProvider 组件
 
-// Subscribe to topic 1
-stomp.subscribe('/topic/notifications', (message) => {
-  console.log('Notification:', message)
-})
+创建 `StompProvider.vue` 组件：
 
-// Subscribe to topic 2
-stomp.subscribe('/topic/updates', (message) => {
-  console.log('Update:', message)
-})
+### 第三步：在 App.vue 中使用
 
-// Subscribe to topic 3
-stomp.subscribe('/user/queue/messages', (message) => {
-  console.log('Private message:', message)
-})
+```vue
+<!-- App.vue -->
+<template>
+  <StompProvider>
+    <router-view />
+  </StompProvider>
+</template>
 
-// Unsubscribe from a specific topic
-stomp.unsubscribe('/topic/notifications')
+<script setup lang="ts">
+import StompProvider from "@/components/Stomp/StompProvider.vue";
+</script>
 ```
 
-### 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'
+```vue
+<script setup lang="ts">
+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 stompInstance = inject<any>("STOMP_INSTANCE");
+const taskList = ref([]);
+const pagination = ref({ page: 1, pageSize: 10, total: 0 });
 
-const channel = useStompChannel(stomp, {
-  subscribeTopic: '/user/queue/data',
+const { send: sendTaskListRequest } = useStompChannel(stompInstance, {
+  subscribeTopic: "/user/topic/all",
   sends: [
     {
-      destination: '/app/request-data',
-      interval: 3000, // Poll every 3 seconds
-      payload: () => ({ page: 1, size: 10 })
-    }
+      destination: "/web/task.send",
+      interval: 2000, // 每 2 秒轮询一次
+      // 传入回调函数，用于动态生成载荷参数
+      payload: () => ({
+        from: "serve",
+        content: {
+          page: pagination.value.page,
+          size: pagination.value.pageSize,
+        },
+      }),
+    },
   ],
-  onMessage: (payload) => {
-    console.log('Received:', payload)
-  }
-})
-```
-
-### Multiple Polling Destinations
+  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,
+    },
+  });
+};
 
-```typescript
-const channel = useStompChannel(stomp, {
-  subscribeTopic: '/user/queue/responses',
+// 可订阅多个主题：设备状态轮询
+const { send: sendDeviceStatus } = useStompChannel(stompInstance, {
+  subscribeTopic: "/user/device/status",
   sends: [
     {
-      destination: '/app/device-status',
+      destination: "/app/device-status",
       interval: 2000,
-      payload: () => ({ deviceId: '001' })
+      payload: () => ({ deviceId: "001" }),
     },
-    {
-      destination: '/app/alarms',
-      interval: 5000,
-      payload: () => ({ level: 'high' })
-    }
   ],
   onMessage: (payload) => {
-    // Handle all messages from the subscribed topic
-    console.log('Message:', payload)
-  }
-})
+    console.log("设备状态:", payload);
+  },
+});
+</script>
 ```
 
-### Integration with Vue Component
+## API 文档
 
-Create your own provider component:
+### useStomp
 
-```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>
+```typescript
+const stomp = useStomp(url: string | Ref<string>)
+
+// 返回值
+{
+  connectionStatus,  // 连接状态
+  messages,          // 消息历史
+  connect,           // 建立连接
+  disconnect,        // 断开连接
+  subscribe,         // 订阅主题
+  unsubscribe,       // 取消订阅
+  send,              // 发送消息
+  isConnected,       // 检查连接
+}
 ```
 
-Use in child components:
+### useStompChannel
 
-```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)
+```typescript
+const channel = useStompChannel(stompInstance, {
+  subscribeTopic: string,      // 订阅的主题
+  sends: [{                    // 轮询配置数组
+    destination: string,       // 发送目标
+    interval: number,          // 轮询间隔（毫秒）
+    payload: () => any,        // 载荷生成函数
+  }],
+  onMessage: (payload) => {},  // 消息回调
+  onConnected: (sendFn) => {}, // 连接成功回调
 })
 
-onUnmounted(() => {
-  stomp.unsubscribe(topic1)
-  stomp.unsubscribe(topic2)
-})
-</script>
+// 返回值
+{
+  isConnected,      // 连接状态
+  lastMessage,      // 最后一条消息
+  send,             // 手动发送消息
+  startAllSending,  // 启动所有轮询
+  stopAllSending,   // 停止所有轮询
+  unsubscribe,      // 取消订阅
+}
 ```
 
-## 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
+- ✅ 自动重连 - 断线后自动重连，恢复订阅
+- ✅ 轮询支持 - 内置定时轮询发送
+- ✅ 多主题订阅 - 支持订阅多个主题
+- ✅ TypeScript - 完整类型定义
+- ✅ 生命周期管理 - 组件卸载自动清理
 
 ## License