npm - redux-cluster-ws - Versions diffs - 2.0.0 → 2.0.2 - Mend

redux-cluster-ws 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/package.json +8 -3
package/FUNDING.yml +0 -7
package/eslint.config.js +0 -143
package/examples/browser-example.cjs +0 -350
package/examples/browser.html +0 -255
package/examples/client.cjs +0 -155
package/examples/cross-library-browser.html +0 -655
package/examples/cross-library-client.cjs +0 -190
package/examples/cross-library-server.cjs +0 -213
package/examples/server.cjs +0 -96

package/examples/cross-library-browser.html DELETED Viewed

@@ -1,655 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cross-library Demo - Browser Client</title>
-    <style>
-      body {
-        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 20px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
-        color: #333;
-      }
-      .container {
-        background: white;
-        border-radius: 12px;
-        padding: 30px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-      }
-      h1 {
-        color: #4a5568;
-        text-align: center;
-        margin-bottom: 30px;
-        font-size: 2.5em;
-      }
-      .status {
-        text-align: center;
-        padding: 15px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        font-weight: bold;
-      }
-      .connected {
-        background: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .disconnected {
-        background: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .section {
-        margin: 20px 0;
-        padding: 20px;
-        border: 1px solid #e2e8f0;
-        border-radius: 8px;
-        background: #f8fafc;
-      }
-      .section h3 {
-        margin-top: 0;
-        color: #2d3748;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-      }
-      .add-todo {
-        display: flex;
-        gap: 10px;
-        margin-bottom: 20px;
-      }
-      .add-todo input {
-        flex: 1;
-        padding: 12px;
-        border: 1px solid #cbd5e0;
-        border-radius: 6px;
-        font-size: 14px;
-      }
-      .add-todo button {
-        padding: 12px 20px;
-        background: #4299e1;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 14px;
-        font-weight: 500;
-      }
-      .add-todo button:hover {
-        background: #3182ce;
-      }
-      .add-todo button:disabled {
-        background: #a0aec0;
-        cursor: not-allowed;
-      }
-      .todo-list {
-        max-height: 300px;
-        overflow-y: auto;
-      }
-      .todo-item {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 10px;
-        border-bottom: 1px solid #e2e8f0;
-        transition: background 0.2s;
-      }
-      .todo-item:hover {
-        background: #edf2f7;
-      }
-      .todo-item.completed {
-        opacity: 0.6;
-        text-decoration: line-through;
-      }
-      .todo-toggle {
-        width: 20px;
-        height: 20px;
-        cursor: pointer;
-      }
-      .user-list {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 10px;
-      }
-      .user-item {
-        padding: 10px;
-        background: white;
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .user-cluster {
-        border-left: 4px solid #ed8936;
-      }
-      .user-web {
-        border-left: 4px solid #38b2ac;
-      }
-      .stats {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 15px;
-      }
-      .stat-card {
-        text-align: center;
-        padding: 20px;
-        background: white;
-        border-radius: 8px;
-        border: 1px solid #e2e8f0;
-      }
-      .stat-number {
-        font-size: 2em;
-        font-weight: bold;
-        color: #4299e1;
-      }
-      .stat-label {
-        color: #718096;
-        margin-top: 5px;
-      }
-      .log {
-        background: #1a202c;
-        color: #e2e8f0;
-        padding: 15px;
-        border-radius: 6px;
-        font-family: "Courier New", monospace;
-        font-size: 12px;
-        max-height: 200px;
-        overflow-y: auto;
-      }
-      .log-entry {
-        margin: 2px 0;
-      }
-      .architecture-note {
-        background: #ebf8ff;
-        border: 1px solid #bee3f8;
-        border-radius: 8px;
-        padding: 15px;
-        margin-bottom: 20px;
-      }
-      .architecture-note h4 {
-        color: #2b6cb0;
-        margin-top: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <h1>🔄 Cross-Library Demo</h1>
-      <div class="architecture-note">
-        <h4>🏗️ Architecture</h4>
-        <p>
-          This demo shows <strong>redux-cluster</strong> (IPC/TCP) working with
-          <strong>redux-cluster-ws</strong> (WebSocket):
-        </p>
-        <ul>
-          <li>
-            🔧 <strong>Server & Workers</strong>: Use redux-cluster for IPC/TCP
-            communication
-          </li>
-          <li>
-            🌐 <strong>Web Clients</strong>: Use redux-cluster-ws for WebSocket
-            communication
-          </li>
-          <li>
-            📊 <strong>Shared State</strong>: All participants see the same
-            Redux store state
-          </li>
-          <li>
-            ⚡ <strong>Real-time</strong>: Changes sync instantly across all
-            connections
-          </li>
-        </ul>
-      </div>
-      <div id="status" class="status disconnected">
-        🔌 Connecting to server...
-      </div>
-      <div class="section">
-        <h3>📝 Add Todo</h3>
-        <div class="add-todo">
-          <input
-            type="text"
-            id="todoInput"
-            placeholder="Enter a new todo..."
-            disabled
-          />
-          <button id="addButton" disabled>Add Todo</button>
-        </div>
-      </div>
-      <div class="section">
-        <h3>📋 Todo List</h3>
-        <div id="todoList" class="todo-list">
-          <p>No todos yet. Add one above!</p>
-        </div>
-      </div>
-      <div class="section">
-        <h3>👥 Connected Users</h3>
-        <div id="userList" class="user-list">
-          <p>Loading users...</p>
-        </div>
-      </div>
-      <div class="section">
-        <h3>📊 Statistics</h3>
-        <div class="stats">
-          <div class="stat-card">
-            <div class="stat-number" id="todoCount">0</div>
-            <div class="stat-label">Total Todos</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number" id="userCount">0</div>
-            <div class="stat-label">Active Users</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number" id="completedCount">0</div>
-            <div class="stat-label">Completed</div>
-          </div>
-        </div>
-      </div>
-      <div class="section">
-        <h3>📜 Activity Log</h3>
-        <div id="log" class="log">
-          <div class="log-entry">Initializing...</div>
-        </div>
-      </div>
-    </div>
-    <script>
-      // Redux implementation
-      function createStore(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);
-            };
-          },
-        };
-      }
-      // Todo reducer (same as server)
-      function todoReducer(
-        state = { todos: [], users: [], stats: { total: 0 } },
-        action
-      ) {
-        switch (action.type) {
-          case "ADD_TODO":
-            return {
-              ...state,
-              todos: [
-                ...state.todos,
-                {
-                  id: Date.now(),
-                  text: action.payload.text,
-                  completed: false,
-                  createdBy: action.payload.user || "anonymous",
-                  timestamp: new Date().toISOString(),
-                },
-              ],
-              stats: { total: state.stats.total + 1 },
-            };
-          case "TOGGLE_TODO":
-            return {
-              ...state,
-              todos: state.todos.map((todo) =>
-                todo.id === action.payload.id
-                  ? { ...todo, completed: !todo.completed }
-                  : todo
-              ),
-            };
-          case "ADD_USER":
-            const userExists = state.users.find(
-              (u) => u.name === action.payload.name
-            );
-            if (userExists) return state;
-            return {
-              ...state,
-              users: [
-                ...state.users,
-                {
-                  id: Date.now(),
-                  name: action.payload.name,
-                  joinedAt: new Date().toISOString(),
-                  type: action.payload.type || "web",
-                },
-              ],
-            };
-          case "REMOVE_USER":
-            return {
-              ...state,
-              users: state.users.filter((u) => u.id !== action.payload.id),
-            };
-          default:
-            return state;
-        }
-      }
-      // WebSocket client implementation
-      class WebSocketClient {
-        constructor(store, config) {
-          this.store = store;
-          this.config = config;
-          this.authenticated = false;
-          this.originalDispatch = store.dispatch;
-          // Hash credentials (simple version for demo)
-          this.login = this.simpleHash(`REDUX_CLUSTER${config.login}`);
-          this.password = this.simpleHash(`REDUX_CLUSTER${config.password}`);
-          this.store.dispatch = this.dispatch.bind(this);
-          this.connect();
-        }
-        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);
-        }
-        connect() {
-          const url = `ws://${this.config.host.replace(/^ws:\/\//, "")}:${
-            this.config.port
-          }/redux-cluster-${this.store.RCHash}`;
-          log(`Connecting to: ${url}`);
-          this.ws = new WebSocket(url);
-          this.ws.onopen = () => {
-            log("WebSocket connected");
-            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}`);
-            }
-          };
-          this.ws.onclose = () => {
-            log("WebSocket disconnected");
-            this.authenticated = false;
-            this.store.connected = false;
-            updateConnectionStatus(false);
-          };
-          this.ws.onerror = (error) => {
-            log(`WebSocket error: ${error}`);
-            this.authenticated = false;
-            this.store.connected = false;
-            updateConnectionStatus(false);
-          };
-        }
-        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}`);
-                this.originalDispatch(message._action);
-              }
-              break;
-            case "REDUX_CLUSTER_SOCKET_AUTHSTATE":
-              if (message._value === true) {
-                this.authenticated = true;
-                this.store.connected = true;
-                updateConnectionStatus(true);
-                log("Authentication successful");
-                this.sendMessage({
-                  _msg: "REDUX_CLUSTER_START",
-                  _hash: this.store.RCHash,
-                });
-              } else {
-                this.authenticated = false;
-                this.store.connected = false;
-                updateConnectionStatus(false);
-                log("Authentication failed");
-              }
-              break;
-          }
-        }
-        dispatch(action) {
-          try {
-            if (
-              this.ws &&
-              this.ws.readyState === WebSocket.OPEN &&
-              this.authenticated
-            ) {
-              log(`Sending action: ${action.type}`);
-              this.sendMessage({
-                _msg: "REDUX_CLUSTER_MSGTOMASTER",
-                _hash: this.store.RCHash,
-                _action: action,
-              });
-            } else {
-              log("Cannot dispatch: not connected");
-            }
-          } catch (error) {
-            log(`Dispatch error: ${error.message}`);
-          }
-          return action;
-        }
-        sendMessage(message) {
-          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-            this.ws.send(JSON.stringify(message));
-          }
-        }
-      }
-      // UI functions
-      const elements = {
-        status: document.getElementById("status"),
-        todoInput: document.getElementById("todoInput"),
-        addButton: document.getElementById("addButton"),
-        todoList: document.getElementById("todoList"),
-        userList: document.getElementById("userList"),
-        todoCount: document.getElementById("todoCount"),
-        userCount: document.getElementById("userCount"),
-        completedCount: document.getElementById("completedCount"),
-        log: document.getElementById("log"),
-      };
-      function log(message) {
-        const timestamp = new Date().toLocaleTimeString();
-        const entry = document.createElement("div");
-        entry.className = "log-entry";
-        entry.textContent = `[${timestamp}] ${message}`;
-        elements.log.appendChild(entry);
-        elements.log.scrollTop = elements.log.scrollHeight;
-        console.log(message);
-      }
-      function updateConnectionStatus(connected) {
-        if (connected) {
-          elements.status.textContent = "✅ Connected to cross-library server";
-          elements.status.className = "status connected";
-          elements.todoInput.disabled = false;
-          elements.addButton.disabled = false;
-        } else {
-          elements.status.textContent = "❌ Disconnected from server";
-          elements.status.className = "status disconnected";
-          elements.todoInput.disabled = true;
-          elements.addButton.disabled = true;
-        }
-      }
-      function updateUI() {
-        const state = store.getState();
-        // Update stats
-        elements.todoCount.textContent = state.todos.length;
-        elements.userCount.textContent = state.users.length;
-        elements.completedCount.textContent = state.todos.filter(
-          (t) => t.completed
-        ).length;
-        // Update todo list
-        if (state.todos.length === 0) {
-          elements.todoList.innerHTML = "<p>No todos yet. Add one above!</p>";
-        } else {
-          elements.todoList.innerHTML = state.todos
-            .map(
-              (todo) => `
-                    <div class="todo-item ${todo.completed ? "completed" : ""}">
-                        <input type="checkbox" class="todo-toggle"
-                               ${todo.completed ? "checked" : ""}
-                               onchange="toggleTodo(${todo.id})">
-                        <span>"${todo.text}" by ${todo.createdBy}</span>
-                    </div>
-                `
-            )
-            .join("");
-        }
-        // Update user list
-        if (state.users.length === 0) {
-          elements.userList.innerHTML = "<p>No users connected</p>";
-        } else {
-          elements.userList.innerHTML = state.users
-            .map(
-              (user) => `
-                    <div class="user-item user-${user.type}">
-                        <span>${user.type === "cluster" ? "🔧" : "🌐"}</span>
-                        <span>${user.name}</span>
-                    </div>
-                `
-            )
-            .join("");
-        }
-      }
-      function addTodo() {
-        const text = elements.todoInput.value.trim();
-        if (text && store.connected) {
-          store.dispatch({
-            type: "ADD_TODO",
-            payload: {
-              text,
-              user: "Browser Client",
-            },
-          });
-          elements.todoInput.value = "";
-          log(`Added todo: "${text}"`);
-        }
-      }
-      function toggleTodo(id) {
-        if (store.connected) {
-          store.dispatch({
-            type: "TOGGLE_TODO",
-            payload: { id },
-          });
-          log(`Toggled todo ${id}`);
-        }
-      }
-      // Initialize app
-      const store = createStore(todoReducer);
-      store.connected = false;
-      store.RCHash = "cross-library-demo";
-      // Connect WebSocket
-      const wsClient = new WebSocketClient(store, {
-        host: "127.0.0.1",
-        port: 8890,
-        login: "web-client",
-        password: "web123",
-      });
-      // Subscribe to state changes
-      store.subscribe(updateUI);
-      // Event listeners
-      elements.addButton.addEventListener("click", addTodo);
-      elements.todoInput.addEventListener("keypress", (e) => {
-        if (e.key === "Enter") addTodo();
-      });
-      // Add user when connected
-      setTimeout(() => {
-        if (store.connected) {
-          store.dispatch({
-            type: "ADD_USER",
-            payload: { name: "Browser Client", type: "web" },
-          });
-        }
-      }, 1000);
-      // Make toggleTodo globally available
-      window.toggleTodo = toggleTodo;
-      log("Browser client initialized");
-      updateConnectionStatus(false);
-    </script>
-  </body>
-</html>