feat: frontend draft

src/client/whatsapp.ts

@@ -1,5 +1,3 @@
-import WebSocket from "ws";
-
 import type {
   GetMessagesParams,
   ListChatsParams,
@@ -14,8 +12,9 @@ import type {
 } from "../shared/dto";
 
 export class WhatsAppClient {
+  isConnected: boolean = false;
+
   private url: string = "";
-  private isConnected: boolean = false;
   private socket: WebSocket | null = null;
 
   private pending = new Map<
@@ -27,25 +26,28 @@ export class WhatsAppClient {
     }
   >();
 
+  private listeners: Map<string, (...args: any[]) => void> = new Map();
+
   constructor(url = "ws://127.0.0.1:8787") {
     this.url = url;
   }
 
   async connect() {
-    return new Promise<void>((resolve, reject) => {
+    return new Promise<void>((resolve) => {
       if (this.socket) return;
 
-      this.socket = new WebSocket(this.url);
+      this.emit("connecting");
+      this.socket = new WebSocket(this.url + "?client=1");
 
-      this.socket.on("open", () => {
+      this.socket.addEventListener("open", () => {
         console.log("Connected to bridge");
         this.isConnected = true;
+        this.emit("status", true);
         resolve();
       });
 
-      this.socket.on("message", (data) => {
-        const message = JSON.parse(data.toString());
-
+      this.socket.addEventListener("message", (data) => {
+        const message = JSON.parse(data.data);
         if (message.type !== "response") {
           return;
         }
@@ -66,9 +68,10 @@ export class WhatsAppClient {
         }
       });
 
-      this.socket.on("close", () => {
+      this.socket.addEventListener("close", () => {
         this.socket = null;
         this.isConnected = false;
+        this.emit("status", false);
         setTimeout(() => this.connect(), 3000);
       });
     });
@@ -105,7 +108,19 @@ export class WhatsAppClient {
     });
   }
 
+  on(event: string, callback: (...args: any[]) => void) {
+    this.listeners.set(event, callback);
+  }
+
+  private emit(event: string, ...args: any[]) {
+    this.listeners.get(event)?.(...args);
+  }
+
   status() {
+    if (!this.isConnected) {
+      return null;
+    }
+
     return this.request<{
       authenticated: boolean;
       ready: boolean;