Merge pull request #13 from doppar/techmahedy-websocket

airbender.js code refactored and improve error handling

Author: techmahedy

assets/js/doppar.js assets/js/airbender.jsassets/js/doppar.js renamed to assets/js/airbender.js

@@ -1,5 +1,5 @@
 /**
- * Doppar.js - WebSocket Broadcasting Client
+ * Airbender.js - WebSocket Broadcasting Client
  *
  * A powerful, WebSocket client for Doppar framework
  * Supports public, private, and presence channels with automatic reconnection
@@ -8,7 +8,7 @@
  * @author Mahedi Hasan
  */
 
-class Doppar {
+class Airbender {
     constructor(options = {}) {
         this.options = {
             host: options.host || "ws://127.0.0.1:6001",
@@ -40,9 +40,6 @@ class Doppar {
         const protocol = this.options.encrypted ? "wss" : "ws";
         const host = this.options.host.replace(/^(ws|wss):\/\//, "");
         const url = `${protocol}://${host}`;
-
-        console.log(`[Doppar] Connecting to ${url}...`);
-
         this.socket = new WebSocket(url);
         this.setupEventHandlers();
     }
@@ -52,7 +49,6 @@ class Doppar {
      */
     setupEventHandlers() {
         this.socket.onopen = () => {
-            console.log("[Doppar] Connection established");
             this.isConnected = true;
             this.reconnectCount = 0;
 
@@ -64,7 +60,16 @@ class Doppar {
         };
 
         this.socket.onmessage = (event) => {
-            this.handleMessage(JSON.parse(event.data));
+            let parsed;
+
+            try {
+                parsed = JSON.parse(event.data);
+            } catch (e) {
+                console.error("[Doppar] Invalid JSON from server:", event.data);
+                return;
+            }
+
+            this.handleMessage(parsed);
         };
 
         this.socket.onerror = (error) => {
@@ -73,7 +78,6 @@ class Doppar {
         };
 
         this.socket.onclose = () => {
-            console.log("[Doppar] Connection closed");
             this.isConnected = false;
             this.socketId = null;
             this.trigger("disconnected");
@@ -100,7 +104,7 @@ class Doppar {
                 break;
 
             case "doppar:subscription_succeeded":
-                this.handleSubscriptionSucceeded(channel);
+                this.handleSubscriptionSucceeded(channel, JSON.parse(data));
                 break;
 
             case "doppar:member_added":
@@ -142,8 +146,6 @@ class Doppar {
         this.socketId = data.socket_id;
         this.isReady = true;
 
-        console.log(`[Doppar] Socket ID: ${this.socketId}`);
-
         // Trigger new "ready" event
         this.trigger("ready", this.socketId);
 
@@ -160,12 +162,11 @@ class Doppar {
     /**
      * Handle subscription succeeded
      */
-    handleSubscriptionSucceeded(channelName) {
+    handleSubscriptionSucceeded(channelName, payload) {
         const channel = this.channels.get(channelName);
         if (channel) {
             channel.subscribed = true;
-            channel.trigger("subscribed");
-            console.log(`[Doppar] Subscribed to ${channelName}`);
+            channel.trigger("subscribed", payload);
         }
     }
 
@@ -188,7 +189,10 @@ class Doppar {
     handleMemberAdded(channelName, data) {
         const channel = this.channels.get(channelName);
         if (channel && channel.type === "presence") {
-            channel.members.push(data);
+            if (!channel.members.find((m) => m.user_id === data.user_id)) {
+                channel.members.push(data);
+            }
+
             channel.trigger("member-added", data);
         }
     }
@@ -214,7 +218,7 @@ class Doppar {
             return this.channels.get(channelName);
         }
 
-        const channel = new DopparChannel(this, channelName, "public");
+        const channel = new AirbenderChannel(this, channelName, "public");
         this.channels.set(channelName, channel);
         channel.subscribe();
 
@@ -233,7 +237,7 @@ class Doppar {
             return this.channels.get(fullName);
         }
 
-        const channel = new DopparPrivateChannel(this, fullName);
+        const channel = new AirbenderPrivateChannel(this, fullName);
         this.channels.set(fullName, channel);
         channel.subscribe();
 
@@ -252,7 +256,7 @@ class Doppar {
             return this.channels.get(fullName);
         }
 
-        const channel = new DopparPresenceChannel(this, fullName);
+        const channel = new AirbenderPresenceChannel(this, fullName);
         this.channels.set(fullName, channel);
         channel.subscribe();
 
@@ -274,8 +278,12 @@ class Doppar {
      * Send message to server
      */
     send(message) {
-        if (this.isConnected && this.socket.readyState === WebSocket.OPEN) {
-            this.socket.send(JSON.stringify(message));
+        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+           try {
+               this.socket.send(JSON.stringify(message));
+           } catch (e) {
+               this.messageQueue.push(message);
+           }
         } else {
             this.messageQueue.push(message);
         }
@@ -286,19 +294,26 @@ class Doppar {
      */
     processMessageQueue() {
         while (this.messageQueue.length > 0) {
-            const message = this.messageQueue.shift();
-            this.send(message);
+            const queue = [...this.messageQueue];
+            this.messageQueue = [];
+            queue.forEach((msg) => this.send(msg));
         }
     }
 
+    cleanup() {
+        if (!this.socket) return;
+        this.socket.onopen = null;
+        this.socket.onmessage = null;
+        this.socket.onerror = null;
+        this.socket.onclose = null;
+    }
+
     /**
      * Reconnect to server
      */
     reconnect() {
+        this.cleanup();
         this.reconnectCount++;
-        console.log(
-            `[Doppar] Reconnecting (${this.reconnectCount}/${this.options.reconnectAttempts})...`
-        );
 
         setTimeout(() => {
             this.connect();
@@ -345,7 +360,7 @@ class Doppar {
 /**
  * Base Channel Class
  */
-class DopparChannel {
+class AirbenderChannel {
     constructor(doppar, name, type = "public") {
         this.doppar = doppar;
         this.name = name;
@@ -370,10 +385,8 @@ class DopparChannel {
      * Resubscribe to channel (after reconnection)
      */
     resubscribe() {
-        if (this.subscribed) {
-            this.subscribed = false;
-            this.subscribe();
-        }
+        this.subscribed = false;
+        this.subscribe();
     }
 
     /**
@@ -426,7 +439,7 @@ class DopparChannel {
 /**
  * Private Channel Class
  */
-class DopparPrivateChannel extends DopparChannel {
+class AirbenderPrivateChannel extends AirbenderChannel {
     constructor(doppar, name) {
         super(doppar, name, "private");
     }
@@ -495,7 +508,7 @@ class DopparPrivateChannel extends DopparChannel {
 /**
  * Presence Channel Class
  */
-class DopparPresenceChannel extends DopparPrivateChannel {
+class AirbenderPresenceChannel extends AirbenderPrivateChannel {
     constructor(doppar, name) {
         super(doppar, name);
         this.type = "presence";
@@ -520,11 +533,11 @@ class DopparPresenceChannel extends DopparPrivateChannel {
      * Get here (current members)
      */
     here(callback) {
-        return this.listen("subscribed", (data) => {
-            if (data && data.presence) {
-                callback(this.members);
-            }
-        });
+        if (this.subscribed && this.members.length > 0) {
+            callback(this.members);
+        }
+
+        return super.listen("subscribed", () => callback(this.members));
     }
 
     /**
@@ -544,8 +557,8 @@ class DopparPresenceChannel extends DopparPrivateChannel {
 
 // Export for use in different environments
 if (typeof module !== "undefined" && module.exports) {
-    module.exports = Doppar;
+    module.exports = Airbender;
 }
 if (typeof window !== "undefined") {
-    window.Doppar = Doppar;
+    window.Airbender = Airbender;
 }