pingerchips-js 2.0.0 → 2.1.1

package/README.md

@@ -1,4 +1,4 @@
-# Pingerchips JavaScript SDK
+# pingerchips-js
 
 Real-time WebSocket client for Pingerchips.
 
@@ -10,17 +10,29 @@ npm install pingerchips-js
 
 ## Usage
 
-### Basic Connection
+### Basic connection
 
 ```javascript
 import Pingerchips from 'pingerchips-js';
 
+// Connects to queue.pingerchips.com in production by default
+const client = new Pingerchips('your_app_key');
+```
+
+Pass `debug: "false"` to force the production endpoint, or override with `endpoint`:
+
+```javascript
+const client = new Pingerchips('your_app_key', {
+  debug: "false"  // uses wss://queue.pingerchips.com/socket
+});
+
+// or explicit:
 const client = new Pingerchips('your_app_key', {
-  endpoint: 'wss://pinger-processor.pingerchips.com/socket'
+  endpoint: 'wss://your-own-deployment.com/socket'
 });
 ```
 
-### Subscribe to Public Channels
+### Public channels
 
 ```javascript
 const channel = await client.subscribe('lobby');
@@ -29,77 +41,76 @@ channel.bind('message', (data) => {
   console.log('Received:', data);
 });
 
+// Send client event
 channel.trigger('message', { text: 'Hello!' });
 ```
 
-### Subscribe to Private Channels
+### Private channels
 
-For private channels, you need to configure an auth endpoint:
+Requires an `authEndpoint` on your server (see `pingerchips-js-server`):
 
 ```javascript
 const client = new Pingerchips('your_app_key', {
-  endpoint: 'wss://pinger-processor.pingerchips.com/socket',
   authEndpoint: 'https://your-server.com/auth',
-  authInfo: {
-    userId: '123',
-    token: 'user-session-token'
-  }
+  authInfo: { token: 'user-session-token' }  // forwarded to your auth endpoint
 });
 
-const privateChannel = await client.subscribe('private-chat');
+const channel = await client.subscribe('private-chat');
 ```
 
-### Subscribe to Presence Channels
+### Presence channels
 
 ```javascript
-const presenceChannel = await client.subscribe('presence-lobby');
-
-presenceChannel.bind('user-joined', (data) => {
-  console.log('User joined:', data.user_info);
+const client = new Pingerchips('your_app_key', {
+  authEndpoint: 'https://your-server.com/auth',
+  authInfo: { token: 'user-session-token' }
 });
-```
-
-## Configuration Options
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `endpoint` | string | WebSocket endpoint URL |
-| `authEndpoint` | string | Your server's auth endpoint for private/presence channels |
-| `authInfo` | object | User authentication info passed to your auth endpoint |
-| `authHeaders` | object | Additional headers for auth requests |
+const channel = await client.subscribe('presence-lobby');
 
-## Authentication
-
-For private and presence channels, you must implement an auth endpoint on your server. See [pingerchips-js-server](https://www.npmjs.com/package/pingerchips-js-server) for server-side implementation.
-
-## Channel Methods
-
-### `bind(event, callback)`
-
-Listen for events on a channel.
-
-```javascript
-channel.bind('message', (data) => {
-  console.log(data);
+channel.bind('presence_diff', ({ joins, leaves }) => {
+  console.log('Joined:', joins);
+  console.log('Left:', leaves);
 });
 ```
 
-### `trigger(event, data)`
+### Reconnection
+
+The client automatically reconnects on disconnect. All previously subscribed channels are re-joined transparently — no extra handling needed.
 
-Send an event to a channel.
+### Socket ID
 
 ```javascript
-channel.trigger('message', { text: 'Hello!' });
+// Available after first channel join
+const socketId = client.getSocketId();
 ```
 
-### `unbind(event)`
-
-Stop listening for an event.
+### Unsubscribe
 
 ```javascript
-channel.unbind('message');
+client.unsubscribe('lobby');
 ```
 
+## Configuration
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `endpoint` | string | auto | WebSocket endpoint. Defaults to `wss://queue.pingerchips.com/socket` (prod) or `ws://localhost:4000/socket` (dev) |
+| `debug` | string | — | Set to `"false"` to use production endpoint without providing `endpoint` explicitly |
+| `authEndpoint` | string | — | Your server's auth URL for private/presence channels |
+| `authInfo` | object | `{}` | Forwarded to your auth endpoint in the request body |
+| `authHeaders` | object | — | Extra headers added to auth requests |
+| `params` | object | — | Extra params sent with the WebSocket connection |
+
+## Channel API
+
+| Method | Description |
+|---|---|
+| `bind(event, callback)` | Listen for an event |
+| `unbind(event)` | Stop listening for an event |
+| `trigger(event, data)` | Send a client event |
+| `leave()` | Leave the channel |
+
 ## License
 
 MIT

package/index.js

@@ -7,87 +7,124 @@ export class Pingerchips {
     this.socket = null;
     this.channels = {};
     this.socketId = null;
-    this.authInfo = options.authInfo || {}; // Store auth_info from constructor
+    this.authInfo = options.authInfo || {};
+    this._endpoint = this._resolveEndpoint();
 
     this.connect();
   }
 
+  _resolveEndpoint() {
+    return (
+      this.options.endpoint ||
+      (this.options.debug === "false"
+        ? "wss://queue.pingerchips.com/socket"
+        : "ws://localhost:4000/socket")
+    );
+  }
+
   connect() {
     const params = { app_key: this.key, ...this.options.params };
-    const endpoint =
-      this.options.endpoint || this.options.debug === "false"
-        ? "wss://pinger-processor.pingerchips.com/socket"
-        : "ws://localhost:4000/socket";
 
-    this.socket = new Socket(endpoint, { params });
+    this.socket = new Socket(this._endpoint, { params });
     this.socket.connect();
 
     this.socket.onOpen(() => {
-      console.log("Pingerchips connected");
-      // Store socket ID when connection is established
-      // Phoenix socket uses a ref-based ID system
-      this.socketId = this.socket.connectionState();
+      // Socket ID comes from the server via socket params on open —
+      // read it directly from the socket transport if available,
+      // otherwise it is set when the first channel join receives socket_id.
+      const transportParams = this.socket.params();
+      if (transportParams?.socket_id) {
+        this.socketId = transportParams.socket_id;
+      }
     });
 
     this.socket.onClose(() => {
-      console.log("Pingerchips disconnected");
+      // Clear socket ID on disconnect — will be re-acquired on reconnect
+      this.socketId = null;
+      this._resubscribeOnReconnect();
     });
   }
 
-  async subscribe(channelName) {
+  // Re-join all previously subscribed channels after reconnect.
+  // Phoenix Socket handles reconnect automatically; we re-subscribe channels
+  // once the socket is open again.
+  _resubscribeOnReconnect() {
+    const channelNames = Object.keys(this.channels);
+    if (channelNames.length === 0) return;
+
+    // Clear stale channel references — they are bound to the old socket connection
+    this.channels = {};
+
+    const attemptResubscribe = () => {
+      if (this.socket.isConnected()) {
+        channelNames.forEach((name) => {
+          this.subscribe(name).catch(() => {
+            // Silently retry on next reconnect cycle
+          });
+        });
+      } else {
+        // Wait for next open event
+        this.socket.onOpen(() => {
+          channelNames.forEach((name) => {
+            this.subscribe(name).catch(() => {});
+          });
+        });
+      }
+    };
+
+    attemptResubscribe();
+  }
+
+  async subscribe(channelName, options = {}) {
     if (this.channels[channelName]) {
       return this.channels[channelName];
     }
 
-    // Topic format: "app:{app_key}:room:{channel_name}"
     const topic = `app:${this.key}:room:${channelName}`;
-
-    // Check if authentication is needed
     const isPrivate = channelName.startsWith("private-");
     const isPresence = channelName.startsWith("presence-");
 
     let joinParams = {};
 
     if (isPrivate || isPresence) {
-      // Need to authenticate via user's auth endpoint
       if (!this.options.authEndpoint) {
         throw new Error(
-          "authEndpoint must be configured for private/presence channels"
+          "authEndpoint must be configured for private/presence channels",
         );
       }
 
-      try {
-        const authData = await this.authenticate(channelName);
-        joinParams = authData;
-      } catch (error) {
-        console.error(`Failed to authenticate for ${channelName}:`, error);
-        throw error;
+      if (!this.socketId) {
+        throw new Error(
+          "Socket ID not yet available. Ensure socket is connected before subscribing to private/presence channels.",
+        );
       }
+
+      joinParams = await this.authenticate(channelName);
     }
 
     const channel = this.socket.channel(topic, joinParams);
 
-    channel
-      .join()
-      .receive("ok", (resp) => {
-        console.log(`Joined ${channelName} successfully`, resp);
-      })
-      .receive("error", (resp) => {
-        console.log(`Unable to join ${channelName}`, resp);
-      });
-
-    const wrapper = new ChannelWrapper(channel);
-    this.channels[channelName] = wrapper;
-    return wrapper;
+    return new Promise((resolve, reject) => {
+      channel
+        .join()
+        .receive("ok", (resp) => {
+          if (resp.socket_id && !this.socketId) {
+            this.socketId = resp.socket_id;
+          }
+
+          const wrapper = new ChannelWrapper(channel);
+          this.channels[channelName] = wrapper;
+          resolve(wrapper);
+        })
+        .receive("error", (resp) => {
+          reject(new Error(`Failed to join channel: ${JSON.stringify(resp)}`));
+        });
+    });
   }
 
   async authenticate(channelName) {
-    // Call user's auth endpoint with socket_id, channel_name, and auth_info
-    // User's server will use Pingerchips.authenticate() to sign the data
-    const socketId = this.getSocketId();
-
     const body = {
-      socket_id: socketId,
+      socket_id: this.socketId,
       channel_name: channelName,
       auth_info: this.authInfo,
     };
@@ -108,26 +145,20 @@ export class Pingerchips {
       throw new Error(error.error || "Authentication failed");
     }
 
-    // Expected response from user's server: { auth: "app_key:signature", channel_data: "..." }
-    return await response.json();
+    return response.json();
   }
 
   getSocketId() {
-    // Phoenix socket generates a unique ref for each connection
-    // We can use the socket's internal state or generate a compatible ID
-    // For now, use a simple approach: use the socket's makeRef() output
     if (!this.socketId) {
-      this.socketId = `socket-${Date.now()}-${Math.random()
-        .toString(36)
-        .substring(2, 11)}`;
+      throw new Error(
+        "Socket ID not available. Connect and join a channel first.",
+      );
     }
     return this.socketId;
   }
 
   getHttpEndpoint() {
-    const wsEndpoint = this.options.endpoint || "ws://localhost:4000/socket";
-    // Convert ws:// to http:// and wss:// to https://
-    return wsEndpoint
+    return this._endpoint
       .replace("ws://", "http://")
       .replace("wss://", "https://")
       .replace("/socket", "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingerchips-js",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Pingerchips JavaScript client SDK for real-time WebSocket connections",
   "main": "index.js",
   "type": "module",