sa2kit 1.6.34 → 1.6.36

package/dist/{chunk-HQ7VHIEK.mjs → chunk-55FBYGRK.mjs}

@@ -1,4 +1,4 @@
-import React3, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import React3, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import * as THREE2 from 'three';
 
 // src/mikuFireworks3D/components/MikuFireworks3D.tsx
@@ -71,7 +71,9 @@ function FireworksControlPanel({
   avatarUrl,
   onAvatarUrlChange,
   onLaunch,
-  fps
+  fps,
+  realtimeConnected,
+  onlineCount
 }) {
   return /* @__PURE__ */ React3.createElement("div", { className: "rounded-xl border border-slate-600/40 bg-slate-900/70 p-3 text-slate-100 backdrop-blur-sm" }, /* @__PURE__ */ React3.createElement("div", { className: "mb-3 flex flex-wrap items-center gap-2" }, Object.keys(FIREWORK_KIND_LABELS).map((kind) => {
     const active = kind === selectedKind;
@@ -100,7 +102,7 @@ function FireworksControlPanel({
       checked: autoLaunchOnDanmaku,
       onChange: (event) => onAutoLaunchChange(event.target.checked)
     }
-  ), "\u53D1\u9001\u5F39\u5E55\u540E\u81EA\u52A8\u653E\u70DF\u82B1"), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-slate-300" }, "FPS: ", fps)), selectedKind === "avatar" ? /* @__PURE__ */ React3.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React3.createElement(
+  ), "\u53D1\u9001\u5F39\u5E55\u540E\u81EA\u52A8\u653E\u70DF\u82B1"), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-slate-300" }, "FPS: ", fps), typeof realtimeConnected === "boolean" ? /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-slate-300" }, "\u5B9E\u65F6\u72B6\u6001: ", realtimeConnected ? "\u5DF2\u8FDE\u63A5" : "\u672A\u8FDE\u63A5", typeof onlineCount === "number" ? ` \xB7 \u5728\u7EBF ${onlineCount}` : "") : null), selectedKind === "avatar" ? /* @__PURE__ */ React3.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React3.createElement(
     "input",
     {
       type: "url",
@@ -113,12 +115,24 @@ function FireworksControlPanel({
 }
 function useDanmakuController(options) {
   const [items, setItems] = useState([]);
-  const [cursor, setCursor] = useState(0);
+  const cursorRef = useRef(0);
   const removeItem = useCallback((id) => {
     setItems((prev) => prev.filter((item) => item.id !== id));
   }, []);
+  const addIncoming = useCallback((message) => {
+    setItems((prev) => {
+      const track = cursorRef.current % DANMAKU_TRACK_COUNT;
+      const item = {
+        ...message,
+        track,
+        durationMs: 8e3 + Math.floor(Math.random() * 2800)
+      };
+      return [...prev.slice(-40), item];
+    });
+    cursorRef.current += 1;
+  }, []);
   const send = useCallback(
-    (text, color) => {
+    (text, color, sendOptions) => {
       const trimmed = text.trim();
       if (!trimmed) {
         return null;
@@ -134,31 +148,26 @@ function useDanmakuController(options) {
         color,
         timestamp: Date.now()
       };
-      setItems((prev) => {
-        const track = cursor % DANMAKU_TRACK_COUNT;
-        const item = {
-          ...message,
-          track,
-          durationMs: 8e3 + Math.floor(Math.random() * 2800)
-        };
-        return [...prev.slice(-40), item];
-      });
-      setCursor((prev) => prev + 1);
+      const optimistic = sendOptions?.optimistic ?? true;
+      if (optimistic) {
+        addIncoming(message);
+      }
       options?.onSend?.(message);
       return {
         message,
         launchKind
       };
     },
-    [cursor, options]
+    [addIncoming, options]
   );
   return useMemo(
     () => ({
       items,
       send,
+      addIncoming,
       removeItem
     }),
-    [items, removeItem, send]
+    [addIncoming, items, removeItem, send]
   );
 }
 function parseCommand(text) {
@@ -672,6 +681,302 @@ function useFireworksEngine(options) {
   return api;
 }
 
+// src/mikuFireworks3D/client/WebSocketTransport.ts
+var WebSocketTransport = class {
+  constructor(config, callbacks) {
+    this.socket = null;
+    this.reconnectTimer = null;
+    this.isManualClose = false;
+    this.pendingQueue = [];
+    this.config = config;
+    this.callbacks = callbacks || {};
+    this.state = {
+      connected: false,
+      joined: false,
+      onlineCount: 0,
+      roomId: config.roomId
+    };
+  }
+  connect() {
+    if (this.socket && (this.socket.readyState === window.WebSocket.OPEN || this.socket.readyState === window.WebSocket.CONNECTING)) {
+      return;
+    }
+    this.isManualClose = false;
+    try {
+      this.socket = this.config.protocols ? new window.WebSocket(this.config.serverUrl, this.config.protocols) : new window.WebSocket(this.config.serverUrl);
+    } catch {
+      this.callbacks.onError?.(new Error("Failed to create WebSocket connection."));
+      return;
+    }
+    this.socket.onopen = () => {
+      this.updateState({ connected: true, joined: false });
+      this.send({
+        type: "join",
+        roomId: this.config.roomId,
+        user: this.config.user
+      });
+    };
+    this.socket.onmessage = (event) => {
+      const parsed = parseServerMessage(event.data);
+      if (!parsed) {
+        return;
+      }
+      this.handleServerMessage(parsed);
+    };
+    this.socket.onerror = () => {
+      this.callbacks.onError?.(new Error("WebSocket transport error."));
+    };
+    this.socket.onclose = () => {
+      this.updateState({ connected: false, joined: false });
+      this.scheduleReconnect();
+    };
+  }
+  disconnect() {
+    this.isManualClose = true;
+    this.pendingQueue.length = 0;
+    if (this.reconnectTimer != null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (!this.socket) {
+      return;
+    }
+    this.send({ type: "leave" });
+    this.socket.close();
+    this.socket = null;
+  }
+  sendDanmaku(payload) {
+    this.send({
+      type: "danmaku.send",
+      payload
+    });
+  }
+  sendFirework(payload) {
+    this.send({
+      type: "firework.launch",
+      payload
+    });
+  }
+  getState() {
+    return this.state;
+  }
+  send(message) {
+    if (!this.socket || this.socket.readyState !== window.WebSocket.OPEN) {
+      if (message.type === "danmaku.send" || message.type === "firework.launch") {
+        this.pendingQueue.push(message);
+      }
+      return;
+    }
+    if ((message.type === "danmaku.send" || message.type === "firework.launch") && !this.state.joined) {
+      this.pendingQueue.push(message);
+      return;
+    }
+    this.socket.send(JSON.stringify(message));
+  }
+  updateState(partial) {
+    this.state = {
+      ...this.state,
+      ...partial
+    };
+    this.callbacks.onStateChange?.(this.state);
+  }
+  handleServerMessage(message) {
+    if (message.type === "joined") {
+      this.updateState({ roomId: message.roomId, onlineCount: message.onlineCount, joined: true });
+      this.flushPendingQueue();
+      return;
+    }
+    if (message.type === "room.user_joined" || message.type === "room.user_left") {
+      this.updateState({ onlineCount: message.onlineCount, roomId: message.roomId });
+      return;
+    }
+    if (message.type === "room.snapshot") {
+      this.updateState({ roomId: message.roomId, onlineCount: message.users.length });
+      this.callbacks.onSnapshot?.(message);
+      return;
+    }
+    if (message.type === "danmaku.broadcast") {
+      this.callbacks.onDanmakuBroadcast?.(message.event);
+      return;
+    }
+    if (message.type === "firework.broadcast") {
+      this.callbacks.onFireworkBroadcast?.(message.event);
+      return;
+    }
+    if (message.type === "error") {
+      this.callbacks.onError?.(new Error(`${message.code}: ${message.message}`));
+    }
+  }
+  scheduleReconnect() {
+    const reconnect = this.config.reconnect ?? true;
+    if (this.isManualClose || !reconnect) {
+      return;
+    }
+    if (this.reconnectTimer != null) {
+      return;
+    }
+    const delay = this.config.reconnectIntervalMs ?? 1500;
+    this.reconnectTimer = window.setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, delay);
+  }
+  flushPendingQueue() {
+    if (!this.socket || this.socket.readyState !== window.WebSocket.OPEN || !this.state.joined) {
+      return;
+    }
+    while (this.pendingQueue.length > 0) {
+      const message = this.pendingQueue.shift();
+      if (!message) {
+        break;
+      }
+      this.socket.send(JSON.stringify(message));
+    }
+  }
+};
+function parseServerMessage(raw) {
+  if (typeof raw !== "string") {
+    return null;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+// src/mikuFireworks3D/hooks/useFireworksRealtime.ts
+function useFireworksRealtime(options) {
+  const { config, enabled, onDanmakuBroadcast, onFireworkBroadcast, onSnapshot, onError, onStateChange } = options;
+  const transportRef = useRef(null);
+  const callbackRef = useRef({
+    onDanmakuBroadcast,
+    onFireworkBroadcast,
+    onSnapshot,
+    onError,
+    onStateChange
+  });
+  const serverUrl = config?.serverUrl ?? "";
+  const roomId = config?.roomId ?? "";
+  const userId = config?.user.userId ?? "";
+  const nickname = config?.user.nickname ?? "";
+  const avatarUrl = config?.user.avatarUrl ?? "";
+  const reconnect = config?.reconnect ?? true;
+  const reconnectIntervalMs = config?.reconnectIntervalMs ?? 1500;
+  const [state, setState] = useState({
+    connected: false,
+    joined: false,
+    onlineCount: 0,
+    roomId
+  });
+  useEffect(() => {
+    callbackRef.current = {
+      onDanmakuBroadcast,
+      onFireworkBroadcast,
+      onSnapshot,
+      onError,
+      onStateChange
+    };
+  }, [onDanmakuBroadcast, onError, onFireworkBroadcast, onSnapshot, onStateChange]);
+  const normalizedConfig = useMemo(() => {
+    if (!serverUrl || !roomId || !userId) {
+      return void 0;
+    }
+    const protocols = Array.isArray(config?.protocols) ? [...config.protocols] : config?.protocols;
+    return {
+      serverUrl,
+      roomId,
+      user: {
+        userId,
+        nickname: nickname || void 0,
+        avatarUrl: avatarUrl || void 0
+      },
+      protocols,
+      reconnect,
+      reconnectIntervalMs
+    };
+  }, [avatarUrl, config?.protocols, nickname, reconnect, reconnectIntervalMs, roomId, serverUrl, userId]);
+  useEffect(() => {
+    if (!enabled || !normalizedConfig) {
+      transportRef.current?.disconnect();
+      transportRef.current = null;
+      setState({
+        connected: false,
+        joined: false,
+        onlineCount: 0,
+        roomId: normalizedConfig?.roomId
+      });
+      return;
+    }
+    const transport = new WebSocketTransport(normalizedConfig, {
+      onStateChange: (nextState) => {
+        setState(nextState);
+        callbackRef.current.onStateChange?.(nextState);
+      },
+      onDanmakuBroadcast: (event) => {
+        callbackRef.current.onDanmakuBroadcast?.({
+          id: event.id,
+          text: event.text,
+          color: event.color,
+          kind: event.kind,
+          userId: event.user.userId,
+          timestamp: event.timestamp
+        });
+      },
+      onFireworkBroadcast: (event) => {
+        callbackRef.current.onFireworkBroadcast?.({
+          id: event.id,
+          payload: event.payload,
+          userId: event.user.userId,
+          timestamp: event.timestamp
+        });
+      },
+      onSnapshot: (snapshot) => {
+        callbackRef.current.onSnapshot?.({
+          roomId: snapshot.roomId,
+          danmakuHistory: snapshot.danmakuHistory.map((item) => ({
+            id: item.id,
+            text: item.text,
+            color: item.color,
+            kind: item.kind,
+            userId: item.user.userId,
+            timestamp: item.timestamp
+          })),
+          fireworkHistory: snapshot.fireworkHistory.map((item) => ({
+            id: item.id,
+            payload: item.payload,
+            userId: item.user.userId,
+            timestamp: item.timestamp
+          }))
+        });
+      },
+      onError: (error) => {
+        callbackRef.current.onError?.(error);
+      }
+    });
+    transport.connect();
+    transportRef.current = transport;
+    return () => {
+      transport.disconnect();
+      if (transportRef.current === transport) {
+        transportRef.current = null;
+      }
+    };
+  }, [enabled, normalizedConfig]);
+  return useMemo(
+    () => ({
+      state,
+      sendDanmaku: (payload) => {
+        transportRef.current?.sendDanmaku(payload);
+      },
+      sendFirework: (payload) => {
+        transportRef.current?.sendFirework(payload);
+      }
+    }),
+    [state]
+  );
+}
+
 // src/mikuFireworks3D/components/MikuFireworks3D.tsx
 function MikuFireworks3D({
   width = "100%",
@@ -685,11 +990,15 @@ function MikuFireworks3D({
   onLaunch,
   onDanmakuSend,
   onError,
-  onFpsReport
+  onFpsReport,
+  onRealtimeStateChange,
+  realtime
 }) {
   const [selectedKind, setSelectedKind] = useState(defaultKind);
   const [avatarUrl, setAvatarUrl] = useState(defaultAvatarUrl);
   const [autoLaunch, setAutoLaunch] = useState(autoLaunchOnDanmaku);
+  const seenDanmakuIdsRef = useRef(/* @__PURE__ */ new Set());
+  const seenFireworkIdsRef = useRef(/* @__PURE__ */ new Set());
   const { containerRef, canvasRef, launch, fps } = useFireworksEngine({
     maxParticles,
     maxActiveFireworks,
@@ -697,22 +1006,93 @@ function MikuFireworks3D({
     onError,
     onFpsReport
   });
-  const { items, send, removeItem } = useDanmakuController({
+  const { items, send, addIncoming, removeItem } = useDanmakuController({
     onSend: onDanmakuSend
   });
+  const realtimeEnabled = Boolean(realtime && (realtime.enabled ?? true));
+  const realtimeApi = useFireworksRealtime({
+    enabled: realtimeEnabled,
+    config: realtime,
+    onStateChange: onRealtimeStateChange,
+    onError,
+    onDanmakuBroadcast: (event) => {
+      if (seenDanmakuIdsRef.current.has(event.id)) {
+        return;
+      }
+      seenDanmakuIdsRef.current.add(event.id);
+      addIncoming({
+        id: event.id,
+        userId: event.userId,
+        text: event.text,
+        color: event.color,
+        timestamp: event.timestamp
+      });
+    },
+    onFireworkBroadcast: (event) => {
+      if (seenFireworkIdsRef.current.has(event.id)) {
+        return;
+      }
+      seenFireworkIdsRef.current.add(event.id);
+      launch(event.payload);
+    },
+    onSnapshot: (snapshot) => {
+      for (const danmaku of snapshot.danmakuHistory) {
+        if (seenDanmakuIdsRef.current.has(danmaku.id)) {
+          continue;
+        }
+        seenDanmakuIdsRef.current.add(danmaku.id);
+        addIncoming({
+          id: danmaku.id,
+          userId: danmaku.userId,
+          text: danmaku.text,
+          color: danmaku.color,
+          timestamp: danmaku.timestamp
+        });
+      }
+      for (const firework of snapshot.fireworkHistory) {
+        if (seenFireworkIdsRef.current.has(firework.id)) {
+          continue;
+        }
+        seenFireworkIdsRef.current.add(firework.id);
+        launch(firework.payload);
+      }
+    }
+  });
   const handleLaunch = (kind) => {
-    launch({
+    const payload = {
       kind,
       avatarUrl: kind === "avatar" ? avatarUrl || void 0 : void 0
-    });
+    };
+    if (realtimeEnabled && realtimeApi.state.connected && realtimeApi.state.joined) {
+      realtimeApi.sendFirework(payload);
+      return;
+    }
+    launch(payload);
   };
   const handleSendDanmaku = (text) => {
-    const result = send(text);
+    const result = send(text, void 0, {
+      optimistic: !(realtimeEnabled && realtimeApi.state.connected && realtimeApi.state.joined)
+    });
     if (!result) {
       return;
     }
     const launchKind = result.launchKind ?? selectedKind;
-    if (autoLaunch) {
+    if (realtimeEnabled && realtimeApi.state.connected && realtimeApi.state.joined) {
+      realtimeApi.sendDanmaku({
+        text: result.message.text,
+        color: result.message.color,
+        kind: result.launchKind
+      });
+      if (autoLaunch) {
+        realtimeApi.sendFirework({
+          kind: launchKind,
+          avatarUrl: launchKind === "avatar" ? avatarUrl || void 0 : void 0,
+          message: result.message
+        });
+      }
+      return;
+    }
+    if (autoLaunch || result.launchKind) {
       launch({
         kind: launchKind,
         avatarUrl: launchKind === "avatar" ? avatarUrl || void 0 : void 0,
@@ -751,7 +1131,9 @@ function MikuFireworks3D({
       avatarUrl,
       onAvatarUrlChange: setAvatarUrl,
       onLaunch: () => handleLaunch(selectedKind),
-      fps
+      fps,
+      realtimeConnected: realtimeEnabled ? realtimeApi.state.connected : void 0,
+      onlineCount: realtimeEnabled ? realtimeApi.state.onlineCount : void 0
     }
   ), /* @__PURE__ */ React3.createElement(DanmakuPanel, { onSend: handleSendDanmaku }), /* @__PURE__ */ React3.createElement("style", null, `
         @keyframes sa2kit-danmaku-move {
@@ -767,6 +1149,6 @@ function MikuFireworks3D({
       `));
 }
 
-export { DANMAKU_MAX_LENGTH, DANMAKU_TRACK_COUNT, DEFAULT_MAX_ACTIVE_FIREWORKS, DEFAULT_MAX_PARTICLES, DanmakuPanel, FIREWORK_KIND_LABELS, FireworksCanvas, FireworksControlPanel, MIKU_PALETTE, MikuFireworks3D, NORMAL_PALETTE, useDanmakuController, useFireworksEngine };
-//# sourceMappingURL=chunk-HQ7VHIEK.mjs.map
-//# sourceMappingURL=chunk-HQ7VHIEK.mjs.map
+export { DANMAKU_MAX_LENGTH, DANMAKU_TRACK_COUNT, DEFAULT_MAX_ACTIVE_FIREWORKS, DEFAULT_MAX_PARTICLES, DanmakuPanel, FIREWORK_KIND_LABELS, FireworksCanvas, FireworksControlPanel, MIKU_PALETTE, MikuFireworks3D, NORMAL_PALETTE, WebSocketTransport, useDanmakuController, useFireworksEngine, useFireworksRealtime };
+//# sourceMappingURL=chunk-55FBYGRK.mjs.map
+//# sourceMappingURL=chunk-55FBYGRK.mjs.map