@pushler/vue 1.0.0

package/src/usePushler.js

@@ -0,0 +1,611 @@
+import { ref, reactive, readonly, onUnmounted, watch, computed } from 'vue';
+
+/**
+ * Состояния подключения
+ */
+export const ConnectionStates = {
+  CONNECTING: 'connecting',
+  CONNECTED: 'connected',
+  DISCONNECTED: 'disconnected',
+  RECONNECTING: 'reconnecting',
+  FAILED: 'failed'
+};
+
+/**
+ * Типы каналов
+ */
+export const ChannelTypes = {
+  PUBLIC: 'public',
+  PRIVATE: 'private',
+  PRESENCE: 'presence'
+};
+
+/**
+ * Vue composable для работы с Pushler WebSocket
+ * 
+ * @param {Object} options - Опции подключения
+ * @param {string} options.appKey - Ключ приложения
+ * @param {string} options.wsUrl - URL WebSocket сервера
+ * @param {string} options.authEndpoint - Эндпоинт авторизации для приватных каналов
+ * @param {boolean} options.autoConnect - Автоматическое подключение (по умолчанию false)
+ * @param {number} options.reconnectDelay - Задержка переподключения в мс (по умолчанию 1000)
+ * @param {number} options.maxReconnectAttempts - Максимум попыток переподключения (по умолчанию 5)
+ * @returns {Object} Реактивный объект с методами и состоянием
+ */
+export function usePushler(options = {}) {
+  // Реактивное состояние
+  const connectionState = ref(ConnectionStates.DISCONNECTED);
+  const socketId = ref(null);
+  const error = ref(null);
+  const reconnectAttempts = ref(0);
+  
+  // Каналы
+  const channels = reactive(new Map());
+  const channelAliases = reactive(new Map());
+  
+  // Внутренние переменные
+  let socket = null;
+  let reconnectTimer = null;
+  const eventListeners = new Map();
+  
+  // Конфигурация
+  const config = {
+    appKey: options.appKey || '',
+    wsUrl: options.wsUrl || 'ws://localhost:8081/app',
+    authEndpoint: options.authEndpoint || '/pushler/auth',
+    autoConnect: options.autoConnect || false,
+    reconnectDelay: options.reconnectDelay || 1000,
+    maxReconnectAttempts: options.maxReconnectAttempts || 5,
+  };
+  
+  // Вычисляемые свойства
+  const isConnected = computed(() => connectionState.value === ConnectionStates.CONNECTED);
+  const isConnecting = computed(() => connectionState.value === ConnectionStates.CONNECTING);
+  const isReconnecting = computed(() => connectionState.value === ConnectionStates.RECONNECTING);
+  
+  /**
+   * Форматирование имени канала с префиксом appKey
+   */
+  function formatChannelName(channelName) {
+    if (channelName.startsWith(config.appKey + ':')) {
+      return channelName;
+    }
+    return `${config.appKey}:${channelName}`;
+  }
+  
+  /**
+   * Извлечение оригинального имени канала
+   */
+  function extractChannelName(fullChannelName) {
+    const prefix = config.appKey + ':';
+    if (fullChannelName.startsWith(prefix)) {
+      return fullChannelName.substring(prefix.length);
+    }
+    return fullChannelName;
+  }
+  
+  /**
+   * Определение типа канала
+   */
+  function getChannelType(channelName) {
+    const baseName = extractChannelName(channelName);
+    if (baseName.startsWith('private-')) return ChannelTypes.PRIVATE;
+    if (baseName.startsWith('presence-')) return ChannelTypes.PRESENCE;
+    return ChannelTypes.PUBLIC;
+  }
+  
+  /**
+   * Подключение к WebSocket серверу
+   */
+  function connect(connectOptions = {}) {
+    // Обновляем конфигурацию если переданы новые параметры
+    if (connectOptions.appKey) config.appKey = connectOptions.appKey;
+    if (connectOptions.wsUrl) config.wsUrl = connectOptions.wsUrl;
+    if (connectOptions.authEndpoint) config.authEndpoint = connectOptions.authEndpoint;
+    
+    if (connectionState.value === ConnectionStates.CONNECTED ||
+        connectionState.value === ConnectionStates.CONNECTING) {
+      return;
+    }
+    
+    connectionState.value = ConnectionStates.CONNECTING;
+    error.value = null;
+    
+    try {
+      // Формируем URL с ключом приложения
+      const wsUrl = config.wsUrl.endsWith('/') 
+        ? `${config.wsUrl}${config.appKey}`
+        : `${config.wsUrl}/${config.appKey}`;
+      
+      console.log('[Pushler Vue] Connecting to:', wsUrl);
+      socket = new WebSocket(wsUrl);
+      setupSocketHandlers();
+    } catch (err) {
+      console.error('[Pushler Vue] Connection error:', err);
+      connectionState.value = ConnectionStates.FAILED;
+      error.value = err.message;
+    }
+  }
+  
+  /**
+   * Настройка обработчиков WebSocket
+   */
+  function setupSocketHandlers() {
+    socket.onopen = () => {
+      console.log('[Pushler Vue] WebSocket opened, waiting for connection_established...');
+    };
+    
+    socket.onmessage = (event) => {
+      handleMessage(event);
+    };
+    
+    socket.onclose = (event) => {
+      console.log('[Pushler Vue] WebSocket closed:', event.code, event.reason);
+      connectionState.value = ConnectionStates.DISCONNECTED;
+      socketId.value = null;
+      
+      // Автопереподключение
+      if (event.code !== 1000 && reconnectAttempts.value < config.maxReconnectAttempts) {
+        scheduleReconnect();
+      }
+    };
+    
+    socket.onerror = (err) => {
+      console.error('[Pushler Vue] WebSocket error:', err);
+      connectionState.value = ConnectionStates.FAILED;
+      error.value = 'Connection failed';
+    };
+  }
+  
+  /**
+   * Обработка входящих сообщений
+   */
+  function handleMessage(event) {
+    try {
+      // Поддержка нескольких сообщений в одном event
+      const messages = event.data.trim().split('\n').filter(line => line.trim());
+      
+      for (const msgData of messages) {
+        processMessage(JSON.parse(msgData));
+      }
+    } catch (err) {
+      console.error('[Pushler Vue] Error parsing message:', err);
+    }
+  }
+  
+  /**
+   * Обработка отдельного сообщения
+   */
+  function processMessage(message) {
+    switch (message.event) {
+      case 'pushler:connection_established':
+        handleConnectionEstablished(message.data);
+        break;
+      case 'pushler:subscription_succeeded':
+        handleSubscriptionSucceeded(message);
+        break;
+      case 'pushler:auth_success':
+        handleAuthSuccess(message);
+        break;
+      case 'pushler:auth_error':
+        handleAuthError(message);
+        break;
+      default:
+        handleChannelMessage(message);
+    }
+  }
+  
+  /**
+   * Обработка установления соединения
+   */
+  function handleConnectionEstablished(data) {
+    socketId.value = data.socket_id;
+    connectionState.value = ConnectionStates.CONNECTED;
+    reconnectAttempts.value = 0;
+    
+    console.log('[Pushler Vue] Connected with socket ID:', socketId.value);
+    
+    // Переподписка на все каналы
+    resubscribeAllChannels();
+    
+    emit('connected', { socketId: socketId.value });
+  }
+  
+  /**
+   * Переподписка на все каналы
+   */
+  function resubscribeAllChannels() {
+    for (const [name, channel] of channels.entries()) {
+      channel.subscribed = false;
+      performChannelSubscription(channel);
+    }
+  }
+  
+  /**
+   * Обработка успешной подписки
+   */
+  function handleSubscriptionSucceeded(message) {
+    const channel = channels.get(message.channel);
+    if (channel) {
+      channel.subscribed = true;
+      channel.emit('subscribed', message.data || {});
+    }
+  }
+  
+  /**
+   * Обработка успешной авторизации
+   */
+  function handleAuthSuccess(message) {
+    const channel = channels.get(message.data.channel);
+    if (channel) {
+      channel.subscribed = true;
+      channel.emit('subscribed', message.data);
+    }
+    emit('auth_success', message.data);
+  }
+  
+  /**
+   * Обработка ошибки авторизации
+   */
+  function handleAuthError(message) {
+    error.value = message.data.error;
+    emit('auth_error', message.data);
+  }
+  
+  /**
+   * Обработка сообщения канала
+   */
+  function handleChannelMessage(message) {
+    const { channel: channelName, event, data } = message;
+    const channel = channels.get(channelName);
+    
+    if (channel) {
+      channel.emit(event, data);
+    }
+    
+    emit('message', { 
+      channel: extractChannelName(channelName), 
+      event, 
+      data 
+    });
+  }
+  
+  /**
+   * Планирование переподключения
+   */
+  function scheduleReconnect() {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+    }
+    
+    reconnectAttempts.value++;
+    connectionState.value = ConnectionStates.RECONNECTING;
+    
+    const delay = config.reconnectDelay * reconnectAttempts.value;
+    console.log(`[Pushler Vue] Reconnecting in ${delay}ms (attempt ${reconnectAttempts.value}/${config.maxReconnectAttempts})`);
+    
+    reconnectTimer = setTimeout(() => {
+      connect();
+    }, delay);
+  }
+  
+  /**
+   * Отключение от сервера
+   */
+  function disconnect() {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    
+    if (socket) {
+      socket.close(1000, 'User disconnect');
+      socket = null;
+    }
+    
+    connectionState.value = ConnectionStates.DISCONNECTED;
+    socketId.value = null;
+    channels.clear();
+    channelAliases.clear();
+    reconnectAttempts.value = 0;
+    
+    emit('disconnected');
+  }
+  
+  /**
+   * Отправка сообщения через WebSocket
+   */
+  function sendMessage(message) {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify(message));
+    }
+  }
+  
+  /**
+   * Подписка на канал
+   * @param {string} channelName - Имя канала
+   * @param {Object} options - Опции (signature для приватных, user для presence)
+   * @returns {Object} Реактивный объект канала
+   */
+  function subscribe(channelName, subscribeOptions = {}) {
+    const fullChannelName = formatChannelName(channelName);
+    
+    if (channels.has(fullChannelName)) {
+      return channels.get(fullChannelName);
+    }
+    
+    // Создаем реактивный канал
+    const channel = reactive({
+      name: fullChannelName,
+      originalName: channelName,
+      type: getChannelType(channelName),
+      subscribed: false,
+      options: subscribeOptions,
+      listeners: new Map(),
+      
+      // Методы канала
+      on(event, callback) {
+        if (!this.listeners.has(event)) {
+          this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(callback);
+        return this;
+      },
+      
+      off(event, callback) {
+        if (this.listeners.has(event)) {
+          const list = this.listeners.get(event);
+          const idx = list.indexOf(callback);
+          if (idx > -1) list.splice(idx, 1);
+        }
+        return this;
+      },
+      
+      emit(event, data) {
+        if (this.listeners.has(event)) {
+          this.listeners.get(event).forEach(cb => {
+            try {
+              cb(data);
+            } catch (err) {
+              console.error('[Pushler Vue] Channel event error:', err);
+            }
+          });
+        }
+      },
+      
+      unsubscribe() {
+        unsubscribe(channelName);
+      }
+    });
+    
+    channels.set(fullChannelName, channel);
+    channelAliases.set(channelName, fullChannelName);
+    
+    // Подписываемся если уже подключены
+    if (connectionState.value === ConnectionStates.CONNECTED) {
+      performChannelSubscription(channel);
+    }
+    
+    return channel;
+  }
+  
+  /**
+   * Выполнение подписки на канал
+   */
+  async function performChannelSubscription(channel) {
+    if (connectionState.value !== ConnectionStates.CONNECTED) {
+      return;
+    }
+    
+    const channelType = channel.type;
+    
+    // Публичные каналы
+    if (channelType === ChannelTypes.PUBLIC) {
+      sendMessage({
+        event: 'pushler:subscribe',
+        data: {
+          channel: channel.name,
+          app_key: config.appKey
+        }
+      });
+      return;
+    }
+    
+    // Приватные и presence каналы требуют авторизации
+    try {
+      const authData = await getAuthData(channel);
+      sendMessage({
+        event: 'pushler:auth',
+        data: authData
+      });
+    } catch (err) {
+      console.error('[Pushler Vue] Auth error:', err);
+      error.value = err.message;
+    }
+  }
+  
+  /**
+   * Получение данных авторизации для приватных/presence каналов
+   * 
+   * Для приватных каналов подпись ДОЛЖНА быть получена с вашего бэкенда,
+   * либо передана в options.signature при подписке.
+   * 
+   * НИКОГДА не храните секретный ключ в клиентском коде!
+   */
+  async function getAuthData(channel) {
+    if (!socketId.value) {
+      throw new Error('Socket ID not available');
+    }
+    
+    const authData = {
+      app_key: config.appKey,
+      channel: channel.name,
+      socket_id: socketId.value
+    };
+    
+    // Если подпись уже предоставлена в options
+    if (channel.options.signature) {
+      authData.signature = channel.options.signature;
+    } else {
+      // Запрашиваем подпись с бэкенда
+      authData.signature = await fetchSignature(channel);
+    }
+    
+    // Данные пользователя для presence каналов
+    if (channel.type === ChannelTypes.PRESENCE && channel.options.user) {
+      authData.user = channel.options.user;
+    }
+    
+    return authData;
+  }
+  
+  /**
+   * Запрос подписи с бэкенда
+   * 
+   * Ваш бэкенд должен:
+   * 1. Проверить авторизацию пользователя
+   * 2. Сгенерировать HMAC-SHA256 подпись с секретным ключом
+   * 3. Вернуть подпись клиенту
+   */
+  async function fetchSignature(channel) {
+    const response = await fetch(config.authEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include', // Включаем куки для авторизации
+      body: JSON.stringify({
+        channel_name: channel.name,
+        socket_id: socketId.value,
+        app_key: config.appKey,
+        user_data: channel.options.user
+      })
+    });
+    
+    if (!response.ok) {
+      const err = await response.json().catch(() => ({ error: 'Auth request failed' }));
+      throw new Error(err.error || 'Failed to get signature');
+    }
+    
+    const data = await response.json();
+    return data.signature;
+  }
+  
+  /**
+   * Отписка от канала
+   */
+  function unsubscribe(channelName) {
+    const fullChannelName = channelAliases.get(channelName) || formatChannelName(channelName);
+    const channel = channels.get(fullChannelName);
+    
+    if (channel) {
+      if (channel.subscribed && connectionState.value === ConnectionStates.CONNECTED) {
+        sendMessage({
+          event: 'pushler:unsubscribe',
+          data: { channel: fullChannelName }
+        });
+      }
+      
+      channels.delete(fullChannelName);
+      channelAliases.delete(channelName);
+    }
+  }
+  
+  /**
+   * Получение канала по имени
+   */
+  function channel(channelName) {
+    const fullChannelName = channelAliases.get(channelName) || formatChannelName(channelName);
+    return channels.get(fullChannelName);
+  }
+  
+  /**
+   * Получение списка каналов
+   */
+  function getChannels() {
+    return Array.from(channels.values()).map(ch => ({
+      name: ch.originalName,
+      fullName: ch.name,
+      type: ch.type,
+      subscribed: ch.subscribed
+    }));
+  }
+  
+  /**
+   * Подписка на глобальное событие
+   */
+  function on(event, callback) {
+    if (!eventListeners.has(event)) {
+      eventListeners.set(event, []);
+    }
+    eventListeners.get(event).push(callback);
+  }
+  
+  /**
+   * Отписка от глобального события
+   */
+  function off(event, callback) {
+    if (eventListeners.has(event)) {
+      const list = eventListeners.get(event);
+      const idx = list.indexOf(callback);
+      if (idx > -1) list.splice(idx, 1);
+    }
+  }
+  
+  /**
+   * Вызов глобального события
+   */
+  function emit(event, data) {
+    if (eventListeners.has(event)) {
+      eventListeners.get(event).forEach(cb => {
+        try {
+          cb(data);
+        } catch (err) {
+          console.error('[Pushler Vue] Event error:', err);
+        }
+      });
+    }
+  }
+  
+  // Автоматическое отключение при размонтировании компонента
+  onUnmounted(() => {
+    disconnect();
+  });
+  
+  // Автоподключение если указано
+  if (config.autoConnect && config.appKey) {
+    connect();
+  }
+  
+  return {
+    // Состояние (readonly для защиты от внешних изменений)
+    connectionState: readonly(connectionState),
+    socketId: readonly(socketId),
+    error: readonly(error),
+    reconnectAttempts: readonly(reconnectAttempts),
+    
+    // Вычисляемые свойства
+    isConnected,
+    isConnecting,
+    isReconnecting,
+    
+    // Методы
+    connect,
+    disconnect,
+    subscribe,
+    unsubscribe,
+    channel,
+    getChannels,
+    on,
+    off,
+    
+    // Утилиты
+    formatChannelName,
+    extractChannelName,
+    getChannelType,
+    
+    // Константы
+    ConnectionStates,
+    ChannelTypes,
+  };
+}
+
+export default usePushler;