stayge-ws-client-sdk 0.1.21 → 0.1.23

package/README.md

@@ -10,15 +10,22 @@ npm install stayge-ws-client-sdk
 ```typescript
 import { getWebSocketClient, wsError } from "stayge-ws-client-sdk/react";
 
+type Message = {
+  title: string;
+  body: string;
+};
+
 const ws = getWebSocketClient();
+
 await ws.connect({ url: "wss://dev.linc.fan/ws/linc" });
 
 // 이벤트 핸들러는 connect 이전에 등록 가능, 여러번 호출해서 멀티 핸들러 등록 가능
-ws.onMessage({
+ws.onMessage<Message>({
   topic: "openchat/12345",
   callback: (topic, payload) => {
     // 서버에서 메시지가 수신되면 호출됨
-    console.log(`Received: topic=${topic}, payload=${payload}`);
+    // payload는 Message 타입으로 넘어오고 sdk에서 JSON.parse() 후에 핸들러에 넘겨줌
+    console.log(`Received: topic=${topic}, payload=${JSON.stringify(payload)}`);
   },
 });
 
@@ -44,15 +51,22 @@ ws.onError({
 ```typescript
 import { getWebSocketClient, wsError } from "stayge-ws-client-sdk/react-native";
 
+type Message = {
+  title: string;
+  body: string;
+};
+
 const ws = getWebSocketClient();
+
 await ws.connect({ url: "wss://dev.linc.fan/ws/linc" });
 
 // 이벤트 핸들러는 connect 이전에 등록 가능, 여러번 호출해서 멀티 핸들러 등록 가능
-ws.onMessage({
+ws.onMessage<Message>({
   topic: "openchat/12345",
   callback: (topic, payload) => {
     // 서버에서 메시지가 수신되면 호출됨
-    console.log(`Received: topic=${topic}, payload=${payload}`);
+    // payload는 Message 타입으로 넘어오고 sdk에서 JSON.parse() 후에 핸들러에 넘겨줌
+    console.log(`Received: topic=${topic}, payload=${JSON.stringify(payload)}`);
   },
 });
 

package/dist/index.d.mts

@@ -59,7 +59,7 @@ interface WebSocketClient {
      */
     connect(args: {
         url: string;
-    }): Promise<void>;
+    }): void;
     /**
      * Closes the WebSocket connection.
      */

package/dist/index.d.ts

@@ -59,7 +59,7 @@ interface WebSocketClient {
      */
     connect(args: {
         url: string;
-    }): Promise<void>;
+    }): void;
     /**
      * Closes the WebSocket connection.
      */

package/dist/react/index.js

@@ -42,12 +42,13 @@ var WebSocketClientImpl = class {
     this.onMessageCallbacks = {};
     this.onErrorCallbacks = /* @__PURE__ */ new Set();
   }
-  async connect(args) {
+  connect(args) {
     console.log(`[${Date.now()}] WebSocketClient:connect ${args.url}`);
     if (this.ws) {
       this.disconnect();
     }
-    this.ws = await this.createWebSocket(args.url);
+    this.clearEventHandlers();
+    this.ws = this.createWebSocket(args.url);
   }
   disconnect() {
     console.log(`[${Date.now()}] WebSocketClient:disconnect`);
@@ -73,26 +74,19 @@ var WebSocketClientImpl = class {
     this.ws?.send(JSON.stringify(message));
   }
   onConnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onConnect`);
     this.onConnectCallbacks.add(args.callback);
   }
   onDisconnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onDisconnect`);
     this.onDisconnectCallbacks.add(args.callback);
   }
   onMessage(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onMessage`);
     this.onMessageCallbacks[args.topic] = this.onMessageCallbacks[args.topic] || /* @__PURE__ */ new Set();
     this.onMessageCallbacks[args.topic].add(args.callback);
   }
   onError(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onError`);
     this.onErrorCallbacks.add(args.callback);
   }
   addEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:addEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.add(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -105,9 +99,6 @@ var WebSocketClientImpl = class {
     }
   }
   removeEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:removeEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.delete(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -119,34 +110,25 @@ var WebSocketClientImpl = class {
     }
   }
   createWebSocket(url) {
-    let connected = false;
-    return new Promise((resolve, reject) => {
-      const ws = new WebSocket(url);
-      ws.onopen = () => {
-        connected = true;
-        this.wsOnOpen(ws);
-        resolve(ws);
-      };
-      ws.onerror = (error) => {
-        if (!connected) {
-          reject(error);
-          return;
-        }
-        this.wsOnError(ws, error);
-      };
-      ws.onmessage = (event) => {
-        this.wsOnMessage(ws, event);
-      };
-      ws.onclose = () => {
-        if (!connected) {
-          reject(new Error("Connection closed"));
-          return;
-        }
-        this.wsOnClose(ws);
-      };
-    });
+    const ws = new WebSocket(url);
+    ws.onopen = () => {
+      this.wsOnOpen(ws);
+    };
+    ws.onerror = (error) => {
+      this.wsOnError(ws, error);
+    };
+    ws.onmessage = (event) => {
+      this.wsOnMessage(ws, event);
+    };
+    ws.onclose = () => {
+      this.wsOnClose(ws);
+    };
+    return ws;
   }
   wsOnOpen(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnOpen`);
     this.onConnectCallbacks.forEach((callback) => callback());
   }
@@ -155,6 +137,9 @@ var WebSocketClientImpl = class {
     ws.close();
   }
   wsOnMessage(ws, event) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(
       `[${Date.now()}] WebSocketClient:wsOnMessage event: `,
       event.data
@@ -176,10 +161,13 @@ var WebSocketClientImpl = class {
         });
       }
     } catch (error) {
-      console.error("WebSocketClient:onmessage", error);
+      console.error("WebSocketClient:wsOnMessage", error);
     }
   }
   wsOnClose(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnClose`);
     const disconnectCallbacks = this.onDisconnectCallbacks;
     this.clearEventHandlers();

package/dist/react/index.mjs

@@ -16,12 +16,13 @@ var WebSocketClientImpl = class {
     this.onMessageCallbacks = {};
     this.onErrorCallbacks = /* @__PURE__ */ new Set();
   }
-  async connect(args) {
+  connect(args) {
     console.log(`[${Date.now()}] WebSocketClient:connect ${args.url}`);
     if (this.ws) {
       this.disconnect();
     }
-    this.ws = await this.createWebSocket(args.url);
+    this.clearEventHandlers();
+    this.ws = this.createWebSocket(args.url);
   }
   disconnect() {
     console.log(`[${Date.now()}] WebSocketClient:disconnect`);
@@ -47,26 +48,19 @@ var WebSocketClientImpl = class {
     this.ws?.send(JSON.stringify(message));
   }
   onConnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onConnect`);
     this.onConnectCallbacks.add(args.callback);
   }
   onDisconnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onDisconnect`);
     this.onDisconnectCallbacks.add(args.callback);
   }
   onMessage(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onMessage`);
     this.onMessageCallbacks[args.topic] = this.onMessageCallbacks[args.topic] || /* @__PURE__ */ new Set();
     this.onMessageCallbacks[args.topic].add(args.callback);
   }
   onError(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onError`);
     this.onErrorCallbacks.add(args.callback);
   }
   addEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:addEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.add(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -79,9 +73,6 @@ var WebSocketClientImpl = class {
     }
   }
   removeEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:removeEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.delete(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -93,34 +84,25 @@ var WebSocketClientImpl = class {
     }
   }
   createWebSocket(url) {
-    let connected = false;
-    return new Promise((resolve, reject) => {
-      const ws = new WebSocket(url);
-      ws.onopen = () => {
-        connected = true;
-        this.wsOnOpen(ws);
-        resolve(ws);
-      };
-      ws.onerror = (error) => {
-        if (!connected) {
-          reject(error);
-          return;
-        }
-        this.wsOnError(ws, error);
-      };
-      ws.onmessage = (event) => {
-        this.wsOnMessage(ws, event);
-      };
-      ws.onclose = () => {
-        if (!connected) {
-          reject(new Error("Connection closed"));
-          return;
-        }
-        this.wsOnClose(ws);
-      };
-    });
+    const ws = new WebSocket(url);
+    ws.onopen = () => {
+      this.wsOnOpen(ws);
+    };
+    ws.onerror = (error) => {
+      this.wsOnError(ws, error);
+    };
+    ws.onmessage = (event) => {
+      this.wsOnMessage(ws, event);
+    };
+    ws.onclose = () => {
+      this.wsOnClose(ws);
+    };
+    return ws;
   }
   wsOnOpen(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnOpen`);
     this.onConnectCallbacks.forEach((callback) => callback());
   }
@@ -129,6 +111,9 @@ var WebSocketClientImpl = class {
     ws.close();
   }
   wsOnMessage(ws, event) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(
       `[${Date.now()}] WebSocketClient:wsOnMessage event: `,
       event.data
@@ -150,10 +135,13 @@ var WebSocketClientImpl = class {
         });
       }
     } catch (error) {
-      console.error("WebSocketClient:onmessage", error);
+      console.error("WebSocketClient:wsOnMessage", error);
     }
   }
   wsOnClose(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnClose`);
     const disconnectCallbacks = this.onDisconnectCallbacks;
     this.clearEventHandlers();

package/dist/react-native/index.js

@@ -42,12 +42,13 @@ var WebSocketClientImpl = class {
     this.onMessageCallbacks = {};
     this.onErrorCallbacks = /* @__PURE__ */ new Set();
   }
-  async connect(args) {
+  connect(args) {
     console.log(`[${Date.now()}] WebSocketClient:connect ${args.url}`);
     if (this.ws) {
       this.disconnect();
     }
-    this.ws = await this.createWebSocket(args.url);
+    this.clearEventHandlers();
+    this.ws = this.createWebSocket(args.url);
   }
   disconnect() {
     console.log(`[${Date.now()}] WebSocketClient:disconnect`);
@@ -73,26 +74,19 @@ var WebSocketClientImpl = class {
     this.ws?.send(JSON.stringify(message));
   }
   onConnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onConnect`);
     this.onConnectCallbacks.add(args.callback);
   }
   onDisconnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onDisconnect`);
     this.onDisconnectCallbacks.add(args.callback);
   }
   onMessage(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onMessage`);
     this.onMessageCallbacks[args.topic] = this.onMessageCallbacks[args.topic] || /* @__PURE__ */ new Set();
     this.onMessageCallbacks[args.topic].add(args.callback);
   }
   onError(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onError`);
     this.onErrorCallbacks.add(args.callback);
   }
   addEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:addEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.add(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -105,9 +99,6 @@ var WebSocketClientImpl = class {
     }
   }
   removeEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:removeEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.delete(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -119,34 +110,25 @@ var WebSocketClientImpl = class {
     }
   }
   createWebSocket(url) {
-    let connected = false;
-    return new Promise((resolve, reject) => {
-      const ws = new WebSocket(url);
-      ws.onopen = () => {
-        connected = true;
-        this.wsOnOpen(ws);
-        resolve(ws);
-      };
-      ws.onerror = (error) => {
-        if (!connected) {
-          reject(error);
-          return;
-        }
-        this.wsOnError(ws, error);
-      };
-      ws.onmessage = (event) => {
-        this.wsOnMessage(ws, event);
-      };
-      ws.onclose = () => {
-        if (!connected) {
-          reject(new Error("Connection closed"));
-          return;
-        }
-        this.wsOnClose(ws);
-      };
-    });
+    const ws = new WebSocket(url);
+    ws.onopen = () => {
+      this.wsOnOpen(ws);
+    };
+    ws.onerror = (error) => {
+      this.wsOnError(ws, error);
+    };
+    ws.onmessage = (event) => {
+      this.wsOnMessage(ws, event);
+    };
+    ws.onclose = () => {
+      this.wsOnClose(ws);
+    };
+    return ws;
   }
   wsOnOpen(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnOpen`);
     this.onConnectCallbacks.forEach((callback) => callback());
   }
@@ -155,6 +137,9 @@ var WebSocketClientImpl = class {
     ws.close();
   }
   wsOnMessage(ws, event) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(
       `[${Date.now()}] WebSocketClient:wsOnMessage event: `,
       event.data
@@ -176,10 +161,13 @@ var WebSocketClientImpl = class {
         });
       }
     } catch (error) {
-      console.error("WebSocketClient:onmessage", error);
+      console.error("WebSocketClient:wsOnMessage", error);
     }
   }
   wsOnClose(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnClose`);
     const disconnectCallbacks = this.onDisconnectCallbacks;
     this.clearEventHandlers();

package/dist/react-native/index.mjs

@@ -16,12 +16,13 @@ var WebSocketClientImpl = class {
     this.onMessageCallbacks = {};
     this.onErrorCallbacks = /* @__PURE__ */ new Set();
   }
-  async connect(args) {
+  connect(args) {
     console.log(`[${Date.now()}] WebSocketClient:connect ${args.url}`);
     if (this.ws) {
       this.disconnect();
     }
-    this.ws = await this.createWebSocket(args.url);
+    this.clearEventHandlers();
+    this.ws = this.createWebSocket(args.url);
   }
   disconnect() {
     console.log(`[${Date.now()}] WebSocketClient:disconnect`);
@@ -47,26 +48,19 @@ var WebSocketClientImpl = class {
     this.ws?.send(JSON.stringify(message));
   }
   onConnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onConnect`);
     this.onConnectCallbacks.add(args.callback);
   }
   onDisconnect(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onDisconnect`);
     this.onDisconnectCallbacks.add(args.callback);
   }
   onMessage(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onMessage`);
     this.onMessageCallbacks[args.topic] = this.onMessageCallbacks[args.topic] || /* @__PURE__ */ new Set();
     this.onMessageCallbacks[args.topic].add(args.callback);
   }
   onError(args) {
-    console.log(`[${Date.now()}] WebSocketClient:onError`);
     this.onErrorCallbacks.add(args.callback);
   }
   addEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:addEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.add(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -79,9 +73,6 @@ var WebSocketClientImpl = class {
     }
   }
   removeEventListener(args) {
-    console.log(
-      `[${Date.now()}] WebSocketClient:removeEventListener eventType: ${args.eventType}`
-    );
     if (args.eventType === "connect") {
       this.onConnectCallbacks.delete(args.callback);
     } else if (args.eventType === "disconnect") {
@@ -93,34 +84,25 @@ var WebSocketClientImpl = class {
     }
   }
   createWebSocket(url) {
-    let connected = false;
-    return new Promise((resolve, reject) => {
-      const ws = new WebSocket(url);
-      ws.onopen = () => {
-        connected = true;
-        this.wsOnOpen(ws);
-        resolve(ws);
-      };
-      ws.onerror = (error) => {
-        if (!connected) {
-          reject(error);
-          return;
-        }
-        this.wsOnError(ws, error);
-      };
-      ws.onmessage = (event) => {
-        this.wsOnMessage(ws, event);
-      };
-      ws.onclose = () => {
-        if (!connected) {
-          reject(new Error("Connection closed"));
-          return;
-        }
-        this.wsOnClose(ws);
-      };
-    });
+    const ws = new WebSocket(url);
+    ws.onopen = () => {
+      this.wsOnOpen(ws);
+    };
+    ws.onerror = (error) => {
+      this.wsOnError(ws, error);
+    };
+    ws.onmessage = (event) => {
+      this.wsOnMessage(ws, event);
+    };
+    ws.onclose = () => {
+      this.wsOnClose(ws);
+    };
+    return ws;
   }
   wsOnOpen(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnOpen`);
     this.onConnectCallbacks.forEach((callback) => callback());
   }
@@ -129,6 +111,9 @@ var WebSocketClientImpl = class {
     ws.close();
   }
   wsOnMessage(ws, event) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(
       `[${Date.now()}] WebSocketClient:wsOnMessage event: `,
       event.data
@@ -150,10 +135,13 @@ var WebSocketClientImpl = class {
         });
       }
     } catch (error) {
-      console.error("WebSocketClient:onmessage", error);
+      console.error("WebSocketClient:wsOnMessage", error);
     }
   }
   wsOnClose(ws) {
+    if (ws !== this.ws) {
+      return;
+    }
     console.log(`[${Date.now()}] WebSocketClient:wsOnClose`);
     const disconnectCallbacks = this.onDisconnectCallbacks;
     this.clearEventHandlers();

package/docs/assets/highlight.css

@@ -9,14 +9,16 @@
     --dark-hl-3: #CE9178;
     --light-hl-4: #0000FF;
     --dark-hl-4: #569CD6;
-    --light-hl-5: #0070C1;
-    --dark-hl-5: #4FC1FF;
-    --light-hl-6: #795E26;
-    --dark-hl-6: #DCDCAA;
-    --light-hl-7: #008000;
-    --dark-hl-7: #6A9955;
-    --light-hl-8: #267F99;
-    --dark-hl-8: #4EC9B0;
+    --light-hl-5: #267F99;
+    --dark-hl-5: #4EC9B0;
+    --light-hl-6: #0070C1;
+    --dark-hl-6: #4FC1FF;
+    --light-hl-7: #795E26;
+    --dark-hl-7: #DCDCAA;
+    --light-hl-8: #008000;
+    --dark-hl-8: #6A9955;
+    --light-hl-9: #000000FF;
+    --dark-hl-9: #D4D4D4;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -31,6 +33,7 @@
     --hl-6: var(--light-hl-6);
     --hl-7: var(--light-hl-7);
     --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
     --code-background: var(--light-code-background);
 } }
 
@@ -44,6 +47,7 @@
     --hl-6: var(--dark-hl-6);
     --hl-7: var(--dark-hl-7);
     --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
     --code-background: var(--dark-code-background);
 } }
 
@@ -57,6 +61,7 @@
     --hl-6: var(--light-hl-6);
     --hl-7: var(--light-hl-7);
     --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
     --code-background: var(--light-code-background);
 }
 
@@ -70,6 +75,7 @@
     --hl-6: var(--dark-hl-6);
     --hl-7: var(--dark-hl-7);
     --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
     --code-background: var(--dark-code-background);
 }
 
@@ -82,4 +88,5 @@
 .hl-6 { color: var(--hl-6); }
 .hl-7 { color: var(--hl-7); }
 .hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
 pre, code { background: var(--code-background); }