stayge-ws-client-sdk 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+## 사용예시
+
+### React
+
+```
+import { createWebSocketClient } from 'stayge-ws-client-sdk/react';
+
+const ws = createReactClient('wss://myserver.com');
+ws.connect();
+ws.send('Hello');
+```
+
+### React Native
+
+```
+import { createReactNativeClient } from 'stayge-ws-client-sdk/react-native';
+
+const ws = createReactNativeClient('wss://myserver.com');
+ws.connect();
+
+```
+
+## 프로젝트 폴더 구조
+
+```
+stayge-ws-client-sdk/
+├── package.json
+├── tsconfig.json
+├── tsup.config.ts
+├── vite.config.ts
+├── src/
+│   ├── index.ts               # 공통 진입점
+│   ├── core/
+│   ├── react/
+│   └── react-native/
+└── dist/                      # 빌드 산출물 (tsup)
+
+```
+
+## 빌드 & 배포
+
+```
+npm run build
+npm publish --access public
+
+```
+
+## 정리
+
+```
+공통 core는 최대한 플랫폼 비의존적으로 설계
+
+플랫폼 별 진입점 (react, react-native) 분리
+
+tsup으로 다중 진입점 + ESM/CJS + 타입 지원
+
+vite는 샘플 및 테스트 개발 용도로 활용
+
+배포 후 NPM에서 React와 React Native에서 각각 import 가능
+```

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+type MessageFromServer = {
+    topic: string;
+    payload: string;
+};
+type MessageToServer = {
+    clientId: string;
+    type: "auth" | "subscribe" | "unsubscribe";
+    token?: string;
+    topic?: string;
+};
+interface WebSocketClient {
+    connect(): void;
+    disconnect(): void;
+    subscribe(topic: string): void;
+    unsubscribe(topic: string): void;
+    onConnect(callback: () => void): void;
+    onMessage(callback: (message: MessageFromServer) => void): void;
+}
+
+export { MessageFromServer, MessageToServer, WebSocketClient };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+type MessageFromServer = {
+    topic: string;
+    payload: string;
+};
+type MessageToServer = {
+    clientId: string;
+    type: "auth" | "subscribe" | "unsubscribe";
+    token?: string;
+    topic?: string;
+};
+interface WebSocketClient {
+    connect(): void;
+    disconnect(): void;
+    subscribe(topic: string): void;
+    unsubscribe(topic: string): void;
+    onConnect(callback: () => void): void;
+    onMessage(callback: (message: MessageFromServer) => void): void;
+}
+
+export { MessageFromServer, MessageToServer, WebSocketClient };

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);

package/dist/react/index.d.mts

@@ -0,0 +1,5 @@
+import { WebSocketClient } from '../index.mjs';
+
+declare function createWebSocketClient(url: string, clientId: string, accessToken: string): WebSocketClient;
+
+export { createWebSocketClient };

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+import { WebSocketClient } from '../index.js';
+
+declare function createWebSocketClient(url: string, clientId: string, accessToken: string): WebSocketClient;
+
+export { createWebSocketClient };

package/dist/react/index.js

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  createWebSocketClient: () => createWebSocketClient
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/core/WebSocketClientImpl.ts
+var WebSocketClientImpl = class {
+  constructor(url, clientId, accessToken) {
+    this.url = url;
+    this.clientId = clientId;
+    this.accessToken = accessToken;
+    this.ws = null;
+    this.onConnectCallback = null;
+    this.onMessageCallback = null;
+    this.reconnectAttempts = 0;
+  }
+  connect() {
+    this.ws = new WebSocket(this.url);
+    this.ws.onopen = () => {
+      this.reconnectAttempts = 0;
+      if (this.onConnectCallback) {
+        this.onConnectCallback();
+      }
+    };
+    this.ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      this.reconnect();
+    };
+    this.ws.onmessage = (event) => {
+      if (this.onMessageCallback) {
+        try {
+          const message = JSON.parse(event.data);
+          this.onMessageCallback(message);
+        } catch (error) {
+          console.error("Error parsing message:", error);
+        }
+      }
+    };
+    this.ws.onclose = () => {
+      console.error("WebSocket closed");
+      this.reconnect();
+    };
+  }
+  disconnect() {
+    this.ws?.close();
+    this.ws = null;
+  }
+  subscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "subscribe",
+      topic
+    };
+    this.ws?.send(JSON.stringify(message));
+  }
+  unsubscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "unsubscribe",
+      topic
+    };
+  }
+  onConnect(callback) {
+    this.onConnectCallback = callback;
+  }
+  onMessage(callback) {
+    this.onMessageCallback = callback;
+  }
+  reconnect() {
+    console.log("Reconnecting...");
+    const delay = Math.min(1e3 * Math.pow(2, this.reconnectAttempts), 1e4);
+    this.reconnectAttempts++;
+    setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+};
+
+// src/react/index.ts
+function createWebSocketClient(url, clientId, accessToken) {
+  return new WebSocketClientImpl(url, clientId, accessToken);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createWebSocketClient
+});

package/dist/react/index.mjs

@@ -0,0 +1,80 @@
+// src/core/WebSocketClientImpl.ts
+var WebSocketClientImpl = class {
+  constructor(url, clientId, accessToken) {
+    this.url = url;
+    this.clientId = clientId;
+    this.accessToken = accessToken;
+    this.ws = null;
+    this.onConnectCallback = null;
+    this.onMessageCallback = null;
+    this.reconnectAttempts = 0;
+  }
+  connect() {
+    this.ws = new WebSocket(this.url);
+    this.ws.onopen = () => {
+      this.reconnectAttempts = 0;
+      if (this.onConnectCallback) {
+        this.onConnectCallback();
+      }
+    };
+    this.ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      this.reconnect();
+    };
+    this.ws.onmessage = (event) => {
+      if (this.onMessageCallback) {
+        try {
+          const message = JSON.parse(event.data);
+          this.onMessageCallback(message);
+        } catch (error) {
+          console.error("Error parsing message:", error);
+        }
+      }
+    };
+    this.ws.onclose = () => {
+      console.error("WebSocket closed");
+      this.reconnect();
+    };
+  }
+  disconnect() {
+    this.ws?.close();
+    this.ws = null;
+  }
+  subscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "subscribe",
+      topic
+    };
+    this.ws?.send(JSON.stringify(message));
+  }
+  unsubscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "unsubscribe",
+      topic
+    };
+  }
+  onConnect(callback) {
+    this.onConnectCallback = callback;
+  }
+  onMessage(callback) {
+    this.onMessageCallback = callback;
+  }
+  reconnect() {
+    console.log("Reconnecting...");
+    const delay = Math.min(1e3 * Math.pow(2, this.reconnectAttempts), 1e4);
+    this.reconnectAttempts++;
+    setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+};
+
+// src/react/index.ts
+function createWebSocketClient(url, clientId, accessToken) {
+  return new WebSocketClientImpl(url, clientId, accessToken);
+}
+export {
+  createWebSocketClient
+};

package/dist/react-native/index.d.mts

@@ -0,0 +1,5 @@
+import { WebSocketClient } from '../index.mjs';
+
+declare function createWebSocketClient(url: string, clientId: string, accessToken: string): WebSocketClient;
+
+export { createWebSocketClient };

package/dist/react-native/index.d.ts

@@ -0,0 +1,5 @@
+import { WebSocketClient } from '../index.js';
+
+declare function createWebSocketClient(url: string, clientId: string, accessToken: string): WebSocketClient;
+
+export { createWebSocketClient };

package/dist/react-native/index.js

@@ -0,0 +1,108 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react-native/index.ts
+var react_native_exports = {};
+__export(react_native_exports, {
+  createWebSocketClient: () => createWebSocketClient
+});
+module.exports = __toCommonJS(react_native_exports);
+
+// src/core/WebSocketClientImpl.ts
+var WebSocketClientImpl = class {
+  constructor(url, clientId, accessToken) {
+    this.url = url;
+    this.clientId = clientId;
+    this.accessToken = accessToken;
+    this.ws = null;
+    this.onConnectCallback = null;
+    this.onMessageCallback = null;
+    this.reconnectAttempts = 0;
+  }
+  connect() {
+    this.ws = new WebSocket(this.url);
+    this.ws.onopen = () => {
+      this.reconnectAttempts = 0;
+      if (this.onConnectCallback) {
+        this.onConnectCallback();
+      }
+    };
+    this.ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      this.reconnect();
+    };
+    this.ws.onmessage = (event) => {
+      if (this.onMessageCallback) {
+        try {
+          const message = JSON.parse(event.data);
+          this.onMessageCallback(message);
+        } catch (error) {
+          console.error("Error parsing message:", error);
+        }
+      }
+    };
+    this.ws.onclose = () => {
+      console.error("WebSocket closed");
+      this.reconnect();
+    };
+  }
+  disconnect() {
+    this.ws?.close();
+    this.ws = null;
+  }
+  subscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "subscribe",
+      topic
+    };
+    this.ws?.send(JSON.stringify(message));
+  }
+  unsubscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "unsubscribe",
+      topic
+    };
+  }
+  onConnect(callback) {
+    this.onConnectCallback = callback;
+  }
+  onMessage(callback) {
+    this.onMessageCallback = callback;
+  }
+  reconnect() {
+    console.log("Reconnecting...");
+    const delay = Math.min(1e3 * Math.pow(2, this.reconnectAttempts), 1e4);
+    this.reconnectAttempts++;
+    setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+};
+
+// src/react-native/index.ts
+function createWebSocketClient(url, clientId, accessToken) {
+  const RNWebSocket = global.WebSocket;
+  return new WebSocketClientImpl(url, clientId, accessToken);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createWebSocketClient
+});

package/dist/react-native/index.mjs

@@ -0,0 +1,81 @@
+// src/core/WebSocketClientImpl.ts
+var WebSocketClientImpl = class {
+  constructor(url, clientId, accessToken) {
+    this.url = url;
+    this.clientId = clientId;
+    this.accessToken = accessToken;
+    this.ws = null;
+    this.onConnectCallback = null;
+    this.onMessageCallback = null;
+    this.reconnectAttempts = 0;
+  }
+  connect() {
+    this.ws = new WebSocket(this.url);
+    this.ws.onopen = () => {
+      this.reconnectAttempts = 0;
+      if (this.onConnectCallback) {
+        this.onConnectCallback();
+      }
+    };
+    this.ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      this.reconnect();
+    };
+    this.ws.onmessage = (event) => {
+      if (this.onMessageCallback) {
+        try {
+          const message = JSON.parse(event.data);
+          this.onMessageCallback(message);
+        } catch (error) {
+          console.error("Error parsing message:", error);
+        }
+      }
+    };
+    this.ws.onclose = () => {
+      console.error("WebSocket closed");
+      this.reconnect();
+    };
+  }
+  disconnect() {
+    this.ws?.close();
+    this.ws = null;
+  }
+  subscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "subscribe",
+      topic
+    };
+    this.ws?.send(JSON.stringify(message));
+  }
+  unsubscribe(topic) {
+    const message = {
+      clientId: this.clientId,
+      type: "unsubscribe",
+      topic
+    };
+  }
+  onConnect(callback) {
+    this.onConnectCallback = callback;
+  }
+  onMessage(callback) {
+    this.onMessageCallback = callback;
+  }
+  reconnect() {
+    console.log("Reconnecting...");
+    const delay = Math.min(1e3 * Math.pow(2, this.reconnectAttempts), 1e4);
+    this.reconnectAttempts++;
+    setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+};
+
+// src/react-native/index.ts
+function createWebSocketClient(url, clientId, accessToken) {
+  const RNWebSocket = global.WebSocket;
+  return new WebSocketClientImpl(url, clientId, accessToken);
+}
+export {
+  createWebSocketClient
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "stayge-ws-client-sdk",
+  "version": "0.1.0",
+  "description": "Stayge WebSocket Client SDK",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.cjs"
+    },
+    "./react-native": {
+      "import": "./dist/react-native/index.mjs",
+      "require": "./dist/react-native/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "vite",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.3.0"
+  }
+}

package/src/core/WebSocketClient.ts

@@ -0,0 +1,20 @@
+export type MessageFromServer = {
+  topic: string;
+  payload: string;
+};
+
+export type MessageToServer = {
+  clientId: string;
+  type: "auth" | "subscribe" | "unsubscribe";
+  token?: string; // access token: required for "auth"
+  topic?: string; // required for "subscribe" | "unsubscribe"
+};
+
+export interface WebSocketClient {
+  connect(): void;
+  disconnect(): void;
+  subscribe(topic: string): void;
+  unsubscribe(topic: string): void;
+  onConnect(callback: () => void): void;
+  onMessage(callback: (message: MessageFromServer) => void): void;
+}

package/src/core/WebSocketClientImpl.ts

@@ -0,0 +1,92 @@
+import {
+  WebSocketClient,
+  MessageToServer,
+  MessageFromServer,
+} from "./WebSocketClient";
+
+export class WebSocketClientImpl implements WebSocketClient {
+  private ws: WebSocket | null = null;
+  private onConnectCallback: (() => void) | null = null;
+  private onMessageCallback: ((message: MessageFromServer) => void) | null =
+    null;
+  private reconnectAttempts = 0;
+  constructor(
+    private url: string,
+    private clientId: string,
+    private accessToken: string
+  ) {}
+
+  connect() {
+    this.ws = new WebSocket(this.url);
+
+    this.ws.onopen = () => {
+      this.reconnectAttempts = 0;
+      if (this.onConnectCallback) {
+        this.onConnectCallback();
+      }
+    };
+
+    this.ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      this.reconnect();
+    };
+
+    this.ws.onmessage = (event) => {
+      if (this.onMessageCallback) {
+        try {
+          const message = JSON.parse(event.data) as MessageFromServer;
+          this.onMessageCallback(message);
+        } catch (error) {
+          console.error("Error parsing message:", error);
+        }
+      }
+    };
+
+    this.ws.onclose = () => {
+      console.error("WebSocket closed");
+      this.reconnect();
+    };
+  }
+
+  disconnect() {
+    this.ws?.close();
+    this.ws = null;
+  }
+
+  subscribe(topic: string) {
+    const message: MessageToServer = {
+      clientId: this.clientId,
+      type: "subscribe",
+      topic,
+    };
+    this.ws?.send(JSON.stringify(message));
+  }
+
+  unsubscribe(topic: string) {
+    const message: MessageToServer = {
+      clientId: this.clientId,
+      type: "unsubscribe",
+      topic,
+    };
+  }
+
+  onConnect(callback: () => void) {
+    this.onConnectCallback = callback;
+  }
+
+  onMessage(callback: (message: MessageFromServer) => void) {
+    this.onMessageCallback = callback;
+  }
+
+  private reconnect() {
+    console.log("Reconnecting...");
+
+    // exponential backoff
+    const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 10000);
+    this.reconnectAttempts++;
+
+    setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./core/WebSocketClient";

package/src/react/index.ts

@@ -0,0 +1,10 @@
+import { WebSocketClient } from "../core/WebSocketClient";
+import { WebSocketClientImpl } from "../core/WebSocketClientImpl";
+
+export function createWebSocketClient(
+  url: string,
+  clientId: string,
+  accessToken: string
+): WebSocketClient {
+  return new WebSocketClientImpl(url, clientId, accessToken);
+}

package/src/react-native/index.ts

@@ -0,0 +1,13 @@
+declare const global: typeof globalThis;
+
+import { WebSocketClient } from "../core/WebSocketClient";
+import { WebSocketClientImpl } from "../core/WebSocketClientImpl";
+
+export function createWebSocketClient(
+  url: string,
+  clientId: string,
+  accessToken: string
+): WebSocketClient {
+  const RNWebSocket = global.WebSocket; // react-native 제공
+  return new WebSocketClientImpl(url, clientId, accessToken);
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "moduleResolution": "Node",
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts", "src/react/index.ts", "src/react-native/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+  splitting: false,
+  shims: true,
+});

package/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    target: "esnext",
+    lib: {
+      entry: "./src/index.ts",
+      name: "WSClient",
+      fileName: "ws-client-sdk",
+      formats: ["es", "cjs"],
+    },
+  },
+});