@sparkstudio/realtime-ui 1.0.7 → 1.0.11

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(index_exports, {
   GuidUtil: () => GuidUtil,
   Home: () => Home,
   HomeView: () => HomeView,
+  RealtimeEngine: () => RealtimeEngine,
   RoomInstance: () => RoomInstance,
   RoomInstanceDTO: () => RoomInstanceDTO,
   RoomInstanceViewDTO: () => RoomInstanceViewDTO,
@@ -35,7 +36,8 @@ __export(index_exports, {
   UserStatusType: () => UserStatusType,
   WebSocketClientRequestDTO: () => WebSocketClientRequestDTO,
   WebSocketConnection: () => WebSocketConnection,
-  WebSocketConnectionDTO: () => WebSocketConnectionDTO
+  WebSocketConnectionDTO: () => WebSocketConnectionDTO,
+  useRealtime: () => useRealtime
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -469,7 +471,104 @@ var UserStatusType = /* @__PURE__ */ ((UserStatusType2) => {
   return UserStatusType2;
 })(UserStatusType || {});
 
-// src/views/HomeView.tsx
+// src/engines/RealtimeEngine.ts
+var RealtimeEngine = class {
+  constructor(url) {
+    this.url = url;
+  }
+  ws = null;
+  status = "disconnected";
+  listeners = {
+    status: /* @__PURE__ */ new Set(),
+    message: /* @__PURE__ */ new Set(),
+    open: /* @__PURE__ */ new Set(),
+    close: /* @__PURE__ */ new Set(),
+    error: /* @__PURE__ */ new Set()
+  };
+  getStatus() {
+    return this.status;
+  }
+  on(event, handler) {
+    const set = this.getListenerSet(event);
+    set.add(handler);
+    return () => set.delete(handler);
+  }
+  connect() {
+    if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    this.setStatus("connecting");
+    const ws = new WebSocket(this.url);
+    this.ws = ws;
+    ws.onopen = (ev) => {
+      this.setStatus("connected");
+      this.emit("open", ev);
+    };
+    ws.onmessage = (ev) => {
+      this.emit("message", this.tryParse(ev.data));
+    };
+    ws.onerror = (ev) => {
+      this.setStatus("error");
+      this.emit("error", ev);
+    };
+    ws.onclose = (ev) => {
+      this.setStatus("disconnected");
+      this.emit("close", ev);
+      this.ws = null;
+    };
+  }
+  disconnect(code, reason) {
+    this.ws?.close(code, reason);
+    this.ws = null;
+    this.setStatus("disconnected");
+  }
+  send(payload) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return false;
+    const message = typeof payload === "string" ? payload : JSON.stringify(payload);
+    this.ws.send(message);
+    return true;
+  }
+  getListenerSet(event) {
+    return this.listeners[event];
+  }
+  setStatus(next) {
+    if (this.status === next) return;
+    this.status = next;
+    this.emit("status", next);
+  }
+  emit(event, value) {
+    const set = this.getListenerSet(event);
+    set.forEach((fn) => fn(value));
+  }
+  tryParse(data) {
+    if (typeof data !== "string") return data;
+    try {
+      return JSON.parse(data);
+    } catch {
+      return data;
+    }
+  }
+};
+
+// src/hooks/useRealtime.ts
+var import_react = require("react");
+function useRealtime(url) {
+  const engine = (0, import_react.useMemo)(() => new RealtimeEngine(url), [url]);
+  const [status, setStatus] = (0, import_react.useState)(engine.getStatus());
+  const [lastMessage, setLastMessage] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    const offStatus = engine.on("status", setStatus);
+    const offMessage = engine.on("message", setLastMessage);
+    return () => {
+      offStatus();
+      offMessage();
+    };
+  }, [engine]);
+  return { engine, status, lastMessage };
+}
+
+// src/views/HomeContent.tsx
+var import_react2 = require("react");
 var import_authentication_ui = require("@sparkstudio/authentication-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function HomeView() {
@@ -483,11 +582,124 @@ function HomeView() {
     }
   );
 }
+function isSuccessMessage(msg) {
+  if (typeof msg === "string") return msg.trim().toLowerCase() === "success";
+  if (msg && typeof msg === "object") {
+    const o = msg;
+    const status = typeof o.Status === "string" ? o.Status : typeof o.status === "string" ? o.status : void 0;
+    const message = typeof o.Message === "string" ? o.Message : typeof o.message === "string" ? o.message : void 0;
+    const success = typeof o.Success === "boolean" ? o.Success : typeof o.success === "boolean" ? o.success : void 0;
+    if (success === true) return true;
+    if (status?.trim().toLowerCase() === "success") return true;
+    if (message?.trim().toLowerCase() === "success") return true;
+  }
+  return false;
+}
 function HomeContent() {
   const { user } = (0, import_authentication_ui.useUser)();
+  const wsUrl = (0, import_react2.useMemo)(() => "ws://localhost:8080", []);
+  const { engine, status } = useRealtime(wsUrl);
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  (0, import_react2.useEffect)(() => {
+    if (!user) {
+      engine.disconnect();
+      return;
+    }
+    engine.connect();
+    return () => engine.disconnect();
+  }, [engine, user]);
+  (0, import_react2.useEffect)(() => {
+    const offOpen = engine.on("open", () => {
+      console.log("\u2705 WS open (socket connected)");
+      const token = localStorage.getItem("auth_token");
+      engine.send({
+        AccessToken: token,
+        Data: "{}",
+        Type: "InterComUserDTO",
+        ControllerName: "UserController",
+        MethodName: "Connected"
+      });
+    });
+    const offMessage = engine.on("message", (msg) => {
+      if (isSuccessMessage(msg)) return;
+      setMessages((prev) => [...prev, msg]);
+    });
+    const offClose = engine.on("close", (ev) => {
+      console.log("\u{1F6D1} WS close", { code: ev.code, reason: ev.reason });
+    });
+    const offError = engine.on("error", () => {
+      console.log("\u274C WS error");
+    });
+    const offStatus = engine.on("status", (s) => {
+      console.log("\u2139\uFE0F WS status:", s);
+    });
+    return () => {
+      offOpen();
+      offMessage();
+      offClose();
+      offError();
+      offStatus();
+    };
+  }, [engine]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_authentication_ui.UserInfoCard, {}),
-    user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Hello World" })
+    user && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "WebSocket:" }),
+        " ",
+        status
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: status !== "connected",
+          onClick: () => {
+            const token = localStorage.getItem("auth_token");
+            engine.send({
+              AccessToken: token,
+              Data: JSON.stringify({
+                Data: "Hello World",
+                UserIds: [user.Id]
+              }),
+              Type: "UserDataDTO",
+              ControllerName: "RoomInstanceController",
+              MethodName: "SendToUsers"
+            });
+          },
+          children: "Send message"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Messages:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              maxHeight: 250,
+              overflowY: "auto",
+              border: "1px solid #ccc",
+              padding: 8,
+              fontFamily: "monospace",
+              fontSize: 12,
+              whiteSpace: "pre-wrap"
+            },
+            children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "(no messages yet)" }) : messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  marginBottom: 10,
+                  paddingBottom: 10,
+                  borderBottom: "1px dashed #ddd"
+                },
+                children: typeof msg === "string" ? msg : JSON.stringify(msg, null, 2)
+              },
+              i
+            ))
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -496,6 +708,7 @@ function HomeContent() {
   GuidUtil,
   Home,
   HomeView,
+  RealtimeEngine,
   RoomInstance,
   RoomInstanceDTO,
   RoomInstanceViewDTO,
@@ -507,5 +720,6 @@ function HomeContent() {
   UserStatusType,
   WebSocketClientRequestDTO,
   WebSocketConnection,
-  WebSocketConnectionDTO
+  WebSocketConnectionDTO,
+  useRealtime
 });

package/dist/index.d.cts

@@ -210,6 +210,39 @@ declare class SparkStudioRealtimeSDK {
     constructor(baseUrl: string);
 }
 
+type RealtimeStatus = "disconnected" | "connecting" | "connected" | "error";
+type RealtimeEventMap = {
+    status: RealtimeStatus;
+    message: unknown;
+    open: Event;
+    close: CloseEvent;
+    error: Event;
+};
+type Unsubscribe = () => void;
+type Handler<K extends keyof RealtimeEventMap> = (v: RealtimeEventMap[K]) => void;
+declare class RealtimeEngine {
+    private readonly url;
+    private ws;
+    private status;
+    private readonly listeners;
+    constructor(url: string);
+    getStatus(): RealtimeStatus;
+    on<K extends keyof RealtimeEventMap>(event: K, handler: Handler<K>): Unsubscribe;
+    connect(): void;
+    disconnect(code?: number, reason?: string): void;
+    send(payload: unknown): boolean;
+    private getListenerSet;
+    private setStatus;
+    private emit;
+    private tryParse;
+}
+
+declare function useRealtime(url: string): {
+    engine: RealtimeEngine;
+    status: RealtimeStatus;
+    lastMessage: unknown;
+};
+
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { type Guid, GuidResultDTO, GuidUtil, Home, HomeView, type IGuidResultDTO, type IRoomInstanceDTO, type IRoomInstanceViewDTO, type IStringResultDTO, type IUniqueViewDTO, type IUserSettingDTO, type IWebSocketClientRequestDTO, type IWebSocketConnectionDTO, RoomInstance, RoomInstanceDTO, RoomInstanceViewDTO, SparkStudioRealtimeSDK, StringResultDTO, UniqueViewDTO, UserSetting, UserSettingDTO, UserStatusType, WebSocketClientRequestDTO, WebSocketConnection, WebSocketConnectionDTO };
+export { type Guid, GuidResultDTO, GuidUtil, Home, HomeView, type IGuidResultDTO, type IRoomInstanceDTO, type IRoomInstanceViewDTO, type IStringResultDTO, type IUniqueViewDTO, type IUserSettingDTO, type IWebSocketClientRequestDTO, type IWebSocketConnectionDTO, RealtimeEngine, type RealtimeEventMap, type RealtimeStatus, RoomInstance, RoomInstanceDTO, RoomInstanceViewDTO, SparkStudioRealtimeSDK, StringResultDTO, UniqueViewDTO, UserSetting, UserSettingDTO, UserStatusType, WebSocketClientRequestDTO, WebSocketConnection, WebSocketConnectionDTO, useRealtime };

package/dist/index.d.ts

@@ -210,6 +210,39 @@ declare class SparkStudioRealtimeSDK {
     constructor(baseUrl: string);
 }
 
+type RealtimeStatus = "disconnected" | "connecting" | "connected" | "error";
+type RealtimeEventMap = {
+    status: RealtimeStatus;
+    message: unknown;
+    open: Event;
+    close: CloseEvent;
+    error: Event;
+};
+type Unsubscribe = () => void;
+type Handler<K extends keyof RealtimeEventMap> = (v: RealtimeEventMap[K]) => void;
+declare class RealtimeEngine {
+    private readonly url;
+    private ws;
+    private status;
+    private readonly listeners;
+    constructor(url: string);
+    getStatus(): RealtimeStatus;
+    on<K extends keyof RealtimeEventMap>(event: K, handler: Handler<K>): Unsubscribe;
+    connect(): void;
+    disconnect(code?: number, reason?: string): void;
+    send(payload: unknown): boolean;
+    private getListenerSet;
+    private setStatus;
+    private emit;
+    private tryParse;
+}
+
+declare function useRealtime(url: string): {
+    engine: RealtimeEngine;
+    status: RealtimeStatus;
+    lastMessage: unknown;
+};
+
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { type Guid, GuidResultDTO, GuidUtil, Home, HomeView, type IGuidResultDTO, type IRoomInstanceDTO, type IRoomInstanceViewDTO, type IStringResultDTO, type IUniqueViewDTO, type IUserSettingDTO, type IWebSocketClientRequestDTO, type IWebSocketConnectionDTO, RoomInstance, RoomInstanceDTO, RoomInstanceViewDTO, SparkStudioRealtimeSDK, StringResultDTO, UniqueViewDTO, UserSetting, UserSettingDTO, UserStatusType, WebSocketClientRequestDTO, WebSocketConnection, WebSocketConnectionDTO };
+export { type Guid, GuidResultDTO, GuidUtil, Home, HomeView, type IGuidResultDTO, type IRoomInstanceDTO, type IRoomInstanceViewDTO, type IStringResultDTO, type IUniqueViewDTO, type IUserSettingDTO, type IWebSocketClientRequestDTO, type IWebSocketConnectionDTO, RealtimeEngine, type RealtimeEventMap, type RealtimeStatus, RoomInstance, RoomInstanceDTO, RoomInstanceViewDTO, SparkStudioRealtimeSDK, StringResultDTO, UniqueViewDTO, UserSetting, UserSettingDTO, UserStatusType, WebSocketClientRequestDTO, WebSocketConnection, WebSocketConnectionDTO, useRealtime };

package/dist/index.js

@@ -428,7 +428,104 @@ var UserStatusType = /* @__PURE__ */ ((UserStatusType2) => {
   return UserStatusType2;
 })(UserStatusType || {});
 
-// src/views/HomeView.tsx
+// src/engines/RealtimeEngine.ts
+var RealtimeEngine = class {
+  constructor(url) {
+    this.url = url;
+  }
+  ws = null;
+  status = "disconnected";
+  listeners = {
+    status: /* @__PURE__ */ new Set(),
+    message: /* @__PURE__ */ new Set(),
+    open: /* @__PURE__ */ new Set(),
+    close: /* @__PURE__ */ new Set(),
+    error: /* @__PURE__ */ new Set()
+  };
+  getStatus() {
+    return this.status;
+  }
+  on(event, handler) {
+    const set = this.getListenerSet(event);
+    set.add(handler);
+    return () => set.delete(handler);
+  }
+  connect() {
+    if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    this.setStatus("connecting");
+    const ws = new WebSocket(this.url);
+    this.ws = ws;
+    ws.onopen = (ev) => {
+      this.setStatus("connected");
+      this.emit("open", ev);
+    };
+    ws.onmessage = (ev) => {
+      this.emit("message", this.tryParse(ev.data));
+    };
+    ws.onerror = (ev) => {
+      this.setStatus("error");
+      this.emit("error", ev);
+    };
+    ws.onclose = (ev) => {
+      this.setStatus("disconnected");
+      this.emit("close", ev);
+      this.ws = null;
+    };
+  }
+  disconnect(code, reason) {
+    this.ws?.close(code, reason);
+    this.ws = null;
+    this.setStatus("disconnected");
+  }
+  send(payload) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return false;
+    const message = typeof payload === "string" ? payload : JSON.stringify(payload);
+    this.ws.send(message);
+    return true;
+  }
+  getListenerSet(event) {
+    return this.listeners[event];
+  }
+  setStatus(next) {
+    if (this.status === next) return;
+    this.status = next;
+    this.emit("status", next);
+  }
+  emit(event, value) {
+    const set = this.getListenerSet(event);
+    set.forEach((fn) => fn(value));
+  }
+  tryParse(data) {
+    if (typeof data !== "string") return data;
+    try {
+      return JSON.parse(data);
+    } catch {
+      return data;
+    }
+  }
+};
+
+// src/hooks/useRealtime.ts
+import { useEffect, useMemo, useState } from "react";
+function useRealtime(url) {
+  const engine = useMemo(() => new RealtimeEngine(url), [url]);
+  const [status, setStatus] = useState(engine.getStatus());
+  const [lastMessage, setLastMessage] = useState(null);
+  useEffect(() => {
+    const offStatus = engine.on("status", setStatus);
+    const offMessage = engine.on("message", setLastMessage);
+    return () => {
+      offStatus();
+      offMessage();
+    };
+  }, [engine]);
+  return { engine, status, lastMessage };
+}
+
+// src/views/HomeContent.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 import {
   AppSettings,
   AuthenticatorProvider,
@@ -447,11 +544,124 @@ function HomeView() {
     }
   );
 }
+function isSuccessMessage(msg) {
+  if (typeof msg === "string") return msg.trim().toLowerCase() === "success";
+  if (msg && typeof msg === "object") {
+    const o = msg;
+    const status = typeof o.Status === "string" ? o.Status : typeof o.status === "string" ? o.status : void 0;
+    const message = typeof o.Message === "string" ? o.Message : typeof o.message === "string" ? o.message : void 0;
+    const success = typeof o.Success === "boolean" ? o.Success : typeof o.success === "boolean" ? o.success : void 0;
+    if (success === true) return true;
+    if (status?.trim().toLowerCase() === "success") return true;
+    if (message?.trim().toLowerCase() === "success") return true;
+  }
+  return false;
+}
 function HomeContent() {
   const { user } = useUser();
+  const wsUrl = useMemo2(() => "ws://localhost:8080", []);
+  const { engine, status } = useRealtime(wsUrl);
+  const [messages, setMessages] = useState2([]);
+  useEffect2(() => {
+    if (!user) {
+      engine.disconnect();
+      return;
+    }
+    engine.connect();
+    return () => engine.disconnect();
+  }, [engine, user]);
+  useEffect2(() => {
+    const offOpen = engine.on("open", () => {
+      console.log("\u2705 WS open (socket connected)");
+      const token = localStorage.getItem("auth_token");
+      engine.send({
+        AccessToken: token,
+        Data: "{}",
+        Type: "InterComUserDTO",
+        ControllerName: "UserController",
+        MethodName: "Connected"
+      });
+    });
+    const offMessage = engine.on("message", (msg) => {
+      if (isSuccessMessage(msg)) return;
+      setMessages((prev) => [...prev, msg]);
+    });
+    const offClose = engine.on("close", (ev) => {
+      console.log("\u{1F6D1} WS close", { code: ev.code, reason: ev.reason });
+    });
+    const offError = engine.on("error", () => {
+      console.log("\u274C WS error");
+    });
+    const offStatus = engine.on("status", (s) => {
+      console.log("\u2139\uFE0F WS status:", s);
+    });
+    return () => {
+      offOpen();
+      offMessage();
+      offClose();
+      offError();
+      offStatus();
+    };
+  }, [engine]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(UserInfoCard, {}),
-    user && /* @__PURE__ */ jsx(Fragment, { children: "Hello World" })
+    user && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "WebSocket:" }),
+        " ",
+        status
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: status !== "connected",
+          onClick: () => {
+            const token = localStorage.getItem("auth_token");
+            engine.send({
+              AccessToken: token,
+              Data: JSON.stringify({
+                Data: "Hello World",
+                UserIds: [user.Id]
+              }),
+              Type: "UserDataDTO",
+              ControllerName: "RoomInstanceController",
+              MethodName: "SendToUsers"
+            });
+          },
+          children: "Send message"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Messages:" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              maxHeight: 250,
+              overflowY: "auto",
+              border: "1px solid #ccc",
+              padding: 8,
+              fontFamily: "monospace",
+              fontSize: 12,
+              whiteSpace: "pre-wrap"
+            },
+            children: messages.length === 0 ? /* @__PURE__ */ jsx("div", { children: "(no messages yet)" }) : messages.map((msg, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  marginBottom: 10,
+                  paddingBottom: 10,
+                  borderBottom: "1px dashed #ddd"
+                },
+                children: typeof msg === "string" ? msg : JSON.stringify(msg, null, 2)
+              },
+              i
+            ))
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 export {
@@ -459,6 +669,7 @@ export {
   GuidUtil,
   Home,
   HomeView,
+  RealtimeEngine,
   RoomInstance,
   RoomInstanceDTO,
   RoomInstanceViewDTO,
@@ -470,5 +681,6 @@ export {
   UserStatusType,
   WebSocketClientRequestDTO,
   WebSocketConnection,
-  WebSocketConnectionDTO
+  WebSocketConnectionDTO,
+  useRealtime
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/realtime-ui",
-  "version": "1.0.7",
+  "version": "1.0.11",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",