create-fuzionx 0.1.33 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fuzionx",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "Create a new FuzionX application — npx create-fuzionx my-app",
   "type": "module",
   "bin": {

package/templates/common/package.json.tpl

@@ -9,8 +9,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@fuzionx/framework": "^0.1.33",
-    "@fuzionx/client": "^0.1.33",
+    "@fuzionx/framework": "^0.1.35",
+    "@fuzionx/client": "^0.1.35",
     "joi": "^18.1.1"
   },
   "devDependencies": {

package/templates/spa/meta.json

@@ -4,7 +4,7 @@
   "description": "Vue.js 3 SPA + Tera SSR 하이브리드. WASM 암호화 통신.",
   "features": ["auth", "board", "i18n", "asp", "wasm"],
   "dependencies": {
-    "@fuzionx/client": "^0.1.33"
+    "@fuzionx/client": "^0.1.35"
   },
   "devDependencies": {},
   "spaDevDependencies": {

package/templates/spa/ws/ChatHandler.js

@@ -1,7 +1,138 @@
-/**
- * SPA ChatHandler — SSR ChatHandler 참조.
- *
- * SSR과 동일한 WebSocket 채팅 핸들러를 사용.
- * 코드 중복 방지를 위해 SSR 핸들러를 re-export.
- */
-export { default } from '../../ssr/ws/ChatHandler.js';
+import { WsHandler } from '@fuzionx/framework';
+
+/** 채팅 WebSocket 핸들러 */
+export default class ChatHandler extends WsHandler {
+    static namespace = '/chat';
+    static middleware = ['auth'];
+
+    /**
+     * disconnect 시 metadata가 이미 삭제되므로,
+     * setUser 시점에 이름을 캐시하여 disconnect에서 사용.
+     * 연결/해제는 항상 같은 워커에서 발생하므로 per-worker 캐시로 충분.
+     */
+    static _nameCache = new Map();
+
+    static events(e) {
+        e.on('message', ChatHandler.prototype.handleMessage);
+        e.on('broadcast', ChatHandler.prototype.handleBroadcast);
+        e.on('typing', ChatHandler.prototype.handleTyping);
+        e.on('userlist', ChatHandler.prototype.handleUserList);
+        e.on('setUser', ChatHandler.prototype.handleSetUser);
+    }
+
+    /* ── helpers ── */
+
+    /** 사용자 이름 조회 (캐시 → metadata → UUID 폴백) */
+    _getName(socket, sid) {
+        return ChatHandler._nameCache.get(sid)
+            || socket.getMetadataFor(sid, 'name')
+            || sid;
+    }
+
+    /** 단일 사용자 정보 빌드 */
+    _buildUserInfo(socket, sid) {
+        return {
+            sid,
+            name: this._getName(socket, sid),
+            email: socket.getMetadataFor(sid, 'email') || '',
+        };
+    }
+
+    /** 전체 접속자 목록 빌드 */
+    _buildUserList(socket) {
+        const sessions = socket.sessionIds;
+        return {
+            count: socket.onlineCount,
+            users: sessions.map(sid => this._buildUserInfo(socket, sid)),
+        };
+    }
+
+    /* ── lifecycle ── */
+
+    async onConnect(socket) {
+        const sid = socket.sessionId;
+        console.log(`[Chat] 연결: ${sid}`);
+
+        socket.send(JSON.stringify({
+            type: 'chat_ready',
+            data: { sessionId: sid, timestamp: Date.now() },
+        }));
+    }
+
+    async onDisconnect(socket, code, reason) {
+        const sid = socket.sessionId;
+        const name = ChatHandler._nameCache.get(sid);
+        ChatHandler._nameCache.delete(sid);
+
+        // setUser 미완료 세션은 user_joined도 안 보냈으므로 user_left 불필요
+        if (!name) return;
+
+        console.log(`[Chat] 해제: ${name} code=${code ?? 'N/A'}`);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'user_left',
+            data: { sid, name, timestamp: Date.now() },
+        }));
+    }
+
+    /* ── event handlers ── */
+
+    /** setUser — 사용자 정보 등록 + userlist 응답 */
+    async handleSetUser(socket, data) {
+        const sid = socket.sessionId;
+        const name = (data.name || '').trim() || sid;
+
+        // Bridge metadata + 로컬 캐시 동시 저장
+        socket.setMetadata('name', name);
+        if (data.email) socket.setMetadata('email', data.email);
+        if (data.id) socket.setMetadata('userId', String(data.id));
+        ChatHandler._nameCache.set(sid, name);
+        console.log(`[Chat] 사용자 등록: ${sid} → ${name}`);
+
+        // 다른 사용자에게 참여 알림
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'user_joined',
+            data: this._buildUserInfo(socket, sid),
+        }));
+
+        // 본인에게 전체 목록 응답
+        return {
+            type: 'userlist',
+            data: this._buildUserList(socket),
+        };
+    }
+
+    /** chat_msg — 본인 제외 전체 전송 */
+    async handleMessage(socket, data) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'chat_msg',
+            data: { user: name, text: data.text || data, timestamp: Date.now() },
+        }));
+    }
+
+    /** broadcast — 공지 */
+    async handleBroadcast(socket, data) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'broadcast',
+            data: { user: name, text: data.text || data, timestamp: Date.now() },
+        }));
+    }
+
+    /** typing — 타이핑 표시 */
+    async handleTyping(socket) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'typing',
+            data: { user: name },
+        }));
+    }
+
+    /** userlist — 목록 요청 */
+    async handleUserList(socket) {
+        return {
+            type: 'userlist',
+            data: this._buildUserList(socket),
+        };
+    }
+}

package/templates/ssr/public/js/fx-client.js

@@ -0,0 +1,107 @@
+/**
+ * FuzionX SSR Client — WASM ASP HTTP + WebSocket 통합 클라이언트
+ *
+ * create-fuzionx tester 레이아웃 패턴 기반.
+ * WASM 로드 → FuzionXClient, FuzionXSocket, aspFetch 글로벌 노출.
+ *
+ * 사용법 (인증 유저):
+ *   FxClient.init(clientSecret, encSecret, headerSignal)
+ *
+ * 사용법 (공개 페이지):
+ *   FxClient.initPublic(masterSecret, headerSignal)
+ */
+(function () {
+  'use strict';
+
+  /**
+   * 인증 유저용 — 암호화된 masterSecret 복호화 후 ASP 클라이언트 생성
+   */
+  function init(clientSecret, encSecret, headerSignal) {
+    if (!clientSecret || !encSecret) return;
+
+    window.aspEnabled = true;
+    window._aspReady = (async () => {
+      try {
+        const _v = Date.now();
+        const mod = await import(`/wasm/fuzionx_client_wasm.js?v=${_v}`);
+        await mod.default({ module_or_path: `/wasm/fuzionx_client_wasm_bg.wasm?v=${_v}` });
+        const { FuzionXClient, FuzionXSocket } = mod;
+        window.FuzionXSocket = FuzionXSocket;
+
+        // 임시 클라이언트로 masterSecret 복호화
+        const tmp = new FuzionXClient('_init_');
+        const masterSecret = tmp.decrypt_custom(clientSecret, encSecret);
+        window._aspMasterSecret = masterSecret;
+
+        // ASP 활성 클라이언트 생성
+        window._aspClient = FuzionXClient.new_with_options(
+          masterSecret,
+          headerSignal || 'Ruxy-Enc-Mode',
+        );
+        console.log('[FxClient] WASM ASP client ready');
+      } catch (e) {
+        console.warn('[FxClient] WASM init failed:', e);
+      }
+    })();
+  }
+
+  /**
+   * 공개 페이지용 — masterSecret 직접 사용
+   */
+  function initPublic(masterSecret, headerSignal) {
+    window.aspEnabled = !!masterSecret;
+    if (masterSecret) window._aspMasterSecret = masterSecret;
+
+    window._aspReady = (async () => {
+      try {
+        const _v = Date.now();
+        const mod = await import(`/wasm/fuzionx_client_wasm.js?v=${_v}`);
+        await mod.default({ module_or_path: `/wasm/fuzionx_client_wasm_bg.wasm?v=${_v}` });
+        const { FuzionXClient, FuzionXSocket } = mod;
+        window.FuzionXSocket = FuzionXSocket;
+
+        if (masterSecret) {
+          window._aspClient = FuzionXClient.new_with_options(
+            masterSecret,
+            headerSignal || 'Ruxy-Enc-Mode',
+          );
+        }
+        console.log('[FxClient] WASM client ready (public)');
+      } catch (e) {
+        console.warn('[FxClient] WASM init failed:', e);
+      }
+    })();
+  }
+
+  /**
+   * ASP 암호화 fetch — create-fuzionx tester aspFetch 동일 패턴
+   */
+  window.aspFetch = async function (url, opts = {}) {
+    if (window._aspReady) await window._aspReady;
+    const method = (opts.method || 'GET').toUpperCase();
+    if (!url.startsWith('/api') || !window._aspClient) return fetch(url, opts);
+
+    if (opts.body instanceof FormData) {
+      return window._aspClient.upload(url, opts.body);
+    }
+
+    let bodyObj = undefined;
+    if (opts.body) {
+      bodyObj = typeof opts.body === 'string' ? JSON.parse(opts.body) : opts.body;
+    }
+
+    switch (method) {
+      case 'GET':    return window._aspClient.get(url);
+      case 'POST':   return window._aspClient.post(url, bodyObj);
+      case 'PUT':    return window._aspClient.put(url, bodyObj);
+      case 'PATCH':  return window._aspClient.patch(url, bodyObj);
+      case 'DELETE': return window._aspClient.delete(url);
+      default:       return window._aspClient.get(url);
+    }
+  };
+
+  // 글로벌 노출
+  window.FxClient = { init, initPublic };
+  window.aspEnabled = false;
+  window._aspReady = Promise.resolve();
+})();