@pushler/vue 1.0.0

package/src/usePushlerChannel.js

@@ -0,0 +1,137 @@
+import { ref, reactive, onUnmounted, watch } from 'vue';
+
+/**
+ * Vue composable для работы с отдельным каналом Pushler
+ * 
+ * Можно использовать автономно или совместно с usePushler
+ * 
+ * @param {Object} pushler - Инстанс usePushler
+ * @param {string} channelName - Имя канала
+ * @param {Object} options - Опции канала
+ * @returns {Object} Реактивный объект канала с событиями
+ */
+export function usePushlerChannel(pushler, channelName, options = {}) {
+  const channel = ref(null);
+  const isSubscribed = ref(false);
+  const lastEvent = ref(null);
+  const events = reactive([]);
+  const eventHandlers = new Map();
+  
+  /**
+   * Максимальное количество событий в буфере
+   */
+  const maxEvents = options.maxEvents || 100;
+  
+  /**
+   * Подписка на канал
+   */
+  function subscribe() {
+    if (!pushler || !channelName) return;
+    
+    channel.value = pushler.subscribe(channelName, options);
+    
+    // Отслеживаем статус подписки
+    channel.value.on('subscribed', () => {
+      isSubscribed.value = true;
+    });
+    
+    return channel.value;
+  }
+  
+  /**
+   * Отписка от канала
+   */
+  function unsubscribe() {
+    if (pushler && channelName) {
+      pushler.unsubscribe(channelName);
+      channel.value = null;
+      isSubscribed.value = false;
+    }
+  }
+  
+  /**
+   * Подписка на событие канала
+   * @param {string} eventName - Имя события
+   * @param {Function} callback - Обработчик
+   */
+  function on(eventName, callback) {
+    if (!channel.value) {
+      subscribe();
+    }
+    
+    const handler = (data) => {
+      // Сохраняем последнее событие
+      lastEvent.value = {
+        event: eventName,
+        data,
+        timestamp: new Date()
+      };
+      
+      // Добавляем в буфер событий
+      events.unshift(lastEvent.value);
+      if (events.length > maxEvents) {
+        events.pop();
+      }
+      
+      // Вызываем пользовательский обработчик
+      callback(data);
+    };
+    
+    eventHandlers.set(eventName, handler);
+    channel.value.on(eventName, handler);
+    
+    return () => off(eventName);
+  }
+  
+  /**
+   * Отписка от события канала
+   */
+  function off(eventName) {
+    if (channel.value && eventHandlers.has(eventName)) {
+      channel.value.off(eventName, eventHandlers.get(eventName));
+      eventHandlers.delete(eventName);
+    }
+  }
+  
+  /**
+   * Очистка буфера событий
+   */
+  function clearEvents() {
+    events.length = 0;
+    lastEvent.value = null;
+  }
+  
+  // Автоматическая подписка если указано
+  if (options.autoSubscribe !== false && pushler?.isConnected?.value) {
+    subscribe();
+  }
+  
+  // Подписываемся при подключении
+  if (pushler) {
+    watch(() => pushler.isConnected.value, (connected) => {
+      if (connected && options.autoSubscribe !== false && !channel.value) {
+        subscribe();
+      }
+    });
+  }
+  
+  // Автоматическая отписка при размонтировании
+  onUnmounted(() => {
+    unsubscribe();
+  });
+  
+  return {
+    channel,
+    isSubscribed,
+    lastEvent,
+    events,
+    
+    subscribe,
+    unsubscribe,
+    on,
+    off,
+    clearEvents,
+  };
+}
+
+export default usePushlerChannel;