redux-cluster-ws 2.0.1 → 2.0.3

package/examples/browser-example.cjs

@@ -1,350 +0,0 @@
-/**
- * Redux-Cluster-WS Browser Example JavaScript
- *
- * This script demonstrates how to use redux-cluster-ws in a browser environment.
- * It creates a simple counter application that synchronizes with a WebSocket server.
- */
-
-// Store instance
-let store = null;
-let wsClient = null;
-
-// Simple Redux implementation for browser (minimal version)
-function createSimpleRedux(reducer) {
-  let state = reducer(undefined, {});
-  let listeners = [];
-
-  return {
-    getState: () => state,
-    dispatch: (action) => {
-      state = reducer(state, action);
-      listeners.forEach((listener) => listener());
-      return action;
-    },
-    subscribe: (listener) => {
-      listeners.push(listener);
-      return () => {
-        listeners = listeners.filter((l) => l !== listener);
-      };
-    },
-  };
-}
-
-// Counter reducer (same as server)
-function counterReducer(state = { count: 0, lastUpdate: null }, action) {
-  switch (action.type) {
-    case "INCREMENT":
-      return {
-        count: state.count + 1,
-        lastUpdate: new Date().toISOString(),
-      };
-
-    case "DECREMENT":
-      return {
-        count: state.count - 1,
-        lastUpdate: new Date().toISOString(),
-      };
-
-    case "RESET":
-      return {
-        count: 0,
-        lastUpdate: new Date().toISOString(),
-      };
-
-    default:
-      return state;
-  }
-}
-
-// Simple hash function (simplified version of redux-cluster-ws hasher)
-function simpleHash(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-  return hash.toString(16);
-}
-
-// WebSocket Client implementation
-class BrowserWSClient {
-  constructor(store, config) {
-    this.store = store;
-    this.config = config;
-    this.authenticated = false;
-    this.login = simpleHash(`REDUX_CLUSTER${config.login}`);
-    this.password = simpleHash(`REDUX_CLUSTER${config.password}`);
-    this.originalDispatch = store.dispatch;
-
-    // Override store dispatch
-    this.store.dispatch = this.dispatch.bind(this);
-    this.store.connected = false;
-    this.store.RCHash = "browser-example-hash";
-  }
-
-  connect() {
-    const url = `${this.config.host}:${this.config.port}/redux-cluster-${this.store.RCHash}`;
-    log(`Connecting to: ${url}`, "info");
-
-    try {
-      this.ws = new WebSocket(url);
-
-      this.ws.onopen = () => {
-        log("WebSocket connected", "success");
-        this.sendMessage({
-          _msg: "REDUX_CLUSTER_SOCKET_AUTH",
-          _hash: this.store.RCHash,
-          _login: this.login,
-          _password: this.password,
-        });
-      };
-
-      this.ws.onmessage = (event) => {
-        try {
-          const message = JSON.parse(event.data);
-          this.handleMessage(message);
-        } catch (error) {
-          log(`Message parse error: ${error.message}`, "error");
-        }
-      };
-
-      this.ws.onclose = () => {
-        log("WebSocket disconnected", "warning");
-        this.authenticated = false;
-        this.store.connected = false;
-        updateUI();
-      };
-
-      this.ws.onerror = (error) => {
-        log(`WebSocket error: ${error}`, "error");
-        this.authenticated = false;
-        this.store.connected = false;
-        updateUI();
-      };
-    } catch (error) {
-      log(`Connection error: ${error.message}`, "error");
-      this.store.connected = false;
-      updateUI();
-    }
-  }
-
-  handleMessage(message) {
-    if (message._hash !== this.store.RCHash) {
-      return;
-    }
-
-    switch (message._msg) {
-      case "REDUX_CLUSTER_MSGTOWORKER":
-        if (message._action) {
-          log(`Received action: ${message._action.type}`, "info");
-          this.originalDispatch(message._action);
-        }
-        break;
-
-      case "REDUX_CLUSTER_SOCKET_AUTHSTATE":
-        if (message._value === true) {
-          this.authenticated = true;
-          this.store.connected = true;
-          log("Authentication successful", "success");
-          updateUI();
-
-          // Request initial sync
-          this.sendMessage({
-            _msg: "REDUX_CLUSTER_START",
-            _hash: this.store.RCHash,
-          });
-        } else {
-          this.authenticated = false;
-          this.store.connected = false;
-
-          if (message._banned) {
-            log("Authentication failed: IP banned", "error");
-          } else {
-            log("Authentication failed: Invalid credentials", "error");
-          }
-          updateUI();
-        }
-        break;
-    }
-  }
-
-  dispatch(action) {
-    try {
-      if (
-        this.ws &&
-        this.ws.readyState === WebSocket.OPEN &&
-        this.authenticated
-      ) {
-        log(`Sending action: ${action.type}`, "info");
-        this.sendMessage({
-          _msg: "REDUX_CLUSTER_MSGTOMASTER",
-          _hash: this.store.RCHash,
-          _action: action,
-        });
-      } else {
-        log("Cannot dispatch: not connected or not authenticated", "warning");
-      }
-    } catch (error) {
-      log(`Dispatch error: ${error.message}`, "error");
-    }
-    return action;
-  }
-
-  sendMessage(message) {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify(message));
-    }
-  }
-
-  disconnect() {
-    if (this.ws) {
-      this.ws.close();
-    }
-    this.store.dispatch = this.originalDispatch;
-  }
-}
-
-// Logging function
-function log(message, type = "info") {
-  const logEl = document.getElementById("log");
-  const timestamp = new Date().toLocaleTimeString();
-  const entry = document.createElement("div");
-  entry.className = `log-entry log-${type}`;
-  entry.textContent = `[${timestamp}] ${message}`;
-
-  logEl.appendChild(entry);
-  logEl.scrollTop = logEl.scrollHeight;
-
-  // Keep only last 50 entries
-  while (logEl.children.length > 50) {
-    logEl.removeChild(logEl.firstChild);
-  }
-}
-
-// UI update function
-function updateUI() {
-  const statusEl = document.getElementById("status");
-  const connectBtn = document.getElementById("connectBtn");
-  const counterEl = document.getElementById("counterValue");
-  const lastUpdateEl = document.getElementById("lastUpdate");
-  const buttons = ["incBtn", "decBtn", "resetBtn"];
-
-  if (store && store.connected) {
-    statusEl.textContent = "Connected";
-    statusEl.className = "status connected";
-    connectBtn.textContent = "Disconnect";
-
-    // Enable action buttons
-    buttons.forEach((id) => {
-      document.getElementById(id).disabled = false;
-    });
-
-    // Update counter display
-    const state = store.getState();
-    counterEl.textContent = state.count;
-    lastUpdateEl.textContent = state.lastUpdate
-      ? `Last updated: ${new Date(state.lastUpdate).toLocaleString()}`
-      : "Never updated";
-  } else if (store) {
-    statusEl.textContent = "Connecting...";
-    statusEl.className = "status connecting";
-    connectBtn.textContent = "Cancel";
-
-    // Disable action buttons
-    buttons.forEach((id) => {
-      document.getElementById(id).disabled = true;
-    });
-  } else {
-    statusEl.textContent = "Disconnected";
-    statusEl.className = "status disconnected";
-    connectBtn.textContent = "Connect";
-
-    // Disable action buttons
-    buttons.forEach((id) => {
-      document.getElementById(id).disabled = true;
-    });
-
-    counterEl.textContent = "0";
-    lastUpdateEl.textContent = "Never updated";
-  }
-}
-
-// Connection toggle function
-function toggleConnection() {
-  if (store && store.connected) {
-    // Disconnect
-    log("Disconnecting...", "info");
-    if (wsClient) {
-      wsClient.disconnect();
-    }
-    store = null;
-    wsClient = null;
-    updateUI();
-  } else if (store && !store.connected) {
-    // Cancel connection attempt
-    if (wsClient) {
-      wsClient.disconnect();
-    }
-    store = null;
-    wsClient = null;
-    updateUI();
-  } else {
-    // Connect
-    const host = document.getElementById("host").value.trim();
-    const port = document.getElementById("port").value.trim();
-    const login = document.getElementById("login").value.trim();
-    const password = document.getElementById("password").value.trim();
-
-    if (!host || !port || !login || !password) {
-      log("Please fill in all connection fields", "error");
-      return;
-    }
-
-    log("Creating store and connecting...", "info");
-
-    // Create store
-    store = createSimpleRedux(counterReducer);
-
-    // Subscribe to state changes
-    store.subscribe(() => {
-      updateUI();
-    });
-
-    // Create WebSocket client
-    wsClient = new BrowserWSClient(store, {
-      host: host,
-      port: parseInt(port),
-      login: login,
-      password: password,
-    });
-
-    updateUI();
-    wsClient.connect();
-  }
-}
-
-// Action functions
-function increment() {
-  if (store && store.connected) {
-    store.dispatch({ type: "INCREMENT" });
-  }
-}
-
-function decrement() {
-  if (store && store.connected) {
-    store.dispatch({ type: "DECREMENT" });
-  }
-}
-
-function reset() {
-  if (store && store.connected) {
-    store.dispatch({ type: "RESET" });
-  }
-}
-
-// Initialize UI on page load
-document.addEventListener("DOMContentLoaded", () => {
-  log("Browser example loaded", "success");
-  updateUI();
-});

package/examples/browser.html

@@ -1,255 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Redux-Cluster-WS Browser Example</title>
-    <style>
-      body {
-        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 20px;
-        background-color: #f5f5f5;
-      }
-
-      .container {
-        background: white;
-        padding: 30px;
-        border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      }
-
-      h1 {
-        color: #333;
-        text-align: center;
-        margin-bottom: 30px;
-      }
-
-      .status {
-        padding: 15px;
-        border-radius: 5px;
-        margin-bottom: 20px;
-        font-weight: bold;
-        text-align: center;
-      }
-
-      .connected {
-        background-color: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-
-      .disconnected {
-        background-color: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-
-      .connecting {
-        background-color: #fff3cd;
-        color: #856404;
-        border: 1px solid #ffeaa7;
-      }
-
-      .counter-display {
-        text-align: center;
-        margin: 30px 0;
-      }
-
-      .counter-value {
-        font-size: 48px;
-        font-weight: bold;
-        color: #007bff;
-        margin: 20px 0;
-      }
-
-      .last-update {
-        color: #666;
-        font-size: 14px;
-      }
-
-      .controls {
-        display: flex;
-        gap: 10px;
-        justify-content: center;
-        margin: 30px 0;
-        flex-wrap: wrap;
-      }
-
-      button {
-        background-color: #007bff;
-        color: white;
-        border: none;
-        padding: 12px 24px;
-        border-radius: 5px;
-        cursor: pointer;
-        font-size: 16px;
-        min-width: 120px;
-        transition: background-color 0.3s;
-      }
-
-      button:hover:not(:disabled) {
-        background-color: #0056b3;
-      }
-
-      button:disabled {
-        background-color: #6c757d;
-        cursor: not-allowed;
-      }
-
-      .increment {
-        background-color: #28a745;
-      }
-      .increment:hover:not(:disabled) {
-        background-color: #218838;
-      }
-
-      .decrement {
-        background-color: #dc3545;
-      }
-      .decrement:hover:not(:disabled) {
-        background-color: #c82333;
-      }
-
-      .reset {
-        background-color: #ffc107;
-        color: #212529;
-      }
-      .reset:hover:not(:disabled) {
-        background-color: #e0a800;
-      }
-
-      .connection-form {
-        background-color: #f8f9fa;
-        padding: 20px;
-        border-radius: 5px;
-        margin-bottom: 20px;
-      }
-
-      .form-group {
-        margin-bottom: 15px;
-      }
-
-      label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-        color: #333;
-      }
-
-      input {
-        width: 100%;
-        padding: 8px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 14px;
-        box-sizing: border-box;
-      }
-
-      .log {
-        background-color: #f8f9fa;
-        border: 1px solid #dee2e6;
-        border-radius: 5px;
-        padding: 15px;
-        margin-top: 20px;
-        max-height: 200px;
-        overflow-y: auto;
-        font-family: "Courier New", monospace;
-        font-size: 12px;
-      }
-
-      .log-entry {
-        margin-bottom: 5px;
-        padding: 2px 0;
-      }
-
-      .log-info {
-        color: #17a2b8;
-      }
-      .log-success {
-        color: #28a745;
-      }
-      .log-warning {
-        color: #ffc107;
-      }
-      .log-error {
-        color: #dc3545;
-      }
-
-      @media (max-width: 600px) {
-        .controls {
-          flex-direction: column;
-          align-items: center;
-        }
-
-        button {
-          width: 100%;
-          max-width: 300px;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <h1>🚀 Redux-Cluster-WS Browser Example</h1>
-
-      <div id="status" class="status disconnected">Disconnected</div>
-
-      <div class="connection-form">
-        <h3>Connection Settings</h3>
-        <div class="form-group">
-          <label for="host">Server Host:</label>
-          <input
-            type="text"
-            id="host"
-            value="ws://localhost"
-            placeholder="ws://localhost"
-          />
-        </div>
-        <div class="form-group">
-          <label for="port">Port:</label>
-          <input type="number" id="port" value="8080" placeholder="8080" />
-        </div>
-        <div class="form-group">
-          <label for="login">Login:</label>
-          <input type="text" id="login" value="demo" placeholder="demo" />
-        </div>
-        <div class="form-group">
-          <label for="password">Password:</label>
-          <input
-            type="password"
-            id="password"
-            value="demo"
-            placeholder="demo"
-          />
-        </div>
-        <button onclick="toggleConnection()" id="connectBtn">Connect</button>
-      </div>
-
-      <div class="counter-display">
-        <h2>Counter Value</h2>
-        <div class="counter-value" id="counterValue">0</div>
-        <div class="last-update" id="lastUpdate">Never updated</div>
-      </div>
-
-      <div class="controls">
-        <button class="increment" onclick="increment()" id="incBtn" disabled>
-          ➕ Increment
-        </button>
-        <button class="decrement" onclick="decrement()" id="decBtn" disabled>
-          ➖ Decrement
-        </button>
-        <button class="reset" onclick="reset()" id="resetBtn" disabled>
-          🔄 Reset
-        </button>
-      </div>
-
-      <div class="log" id="log">
-        <div class="log-entry log-info">Ready to connect...</div>
-      </div>
-    </div>
-
-    <script src="browser-example.js"></script>
-  </body>
-</html>