iosignal 2.2.1 → 3.0.1

package/examples/react-chat-js/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-chat-js",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "iosignal": "file:../.."
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.8"
+  }
+}

package/examples/react-chat-js/src/App.css

@@ -0,0 +1,61 @@
+html, body, #root, .App {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.App {
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+h1 {
+  margin-top: 0;
+  color: #333;
+}
+
+.messages {
+  flex-grow: 1; /* 남은 공간을 모두 차지하도록 설정 */
+  border: 1px solid #ccc;
+  padding: 10px;
+  overflow-y: auto; /* 내용이 넘치면 스크롤바 표시 */
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column; /* 메시지를 아래에서 위로 쌓이도록 */
+  justify-content: flex-end; /* 메시지를 아래로 정렬 */
+}
+
+.messages div {
+  background-color: #f0f0f0;
+  padding: 8px;
+  margin-bottom: 5px;
+  border-radius: 5px;
+  text-align: left;
+}
+
+.input-area {
+  display: flex;
+  gap: 10px;
+  margin-top: auto; /* 항상 하단에 위치하도록 */
+}
+
+.input-area input {
+  flex-grow: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.input-area button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.input-area button:hover {
+  background-color: #0056b3;
+}

package/examples/react-chat-js/src/App.jsx

@@ -0,0 +1,125 @@
+import { useState, useEffect, useRef } from 'react';
+import './App.css';
+import IO from 'iosignal/io.js';
+
+const url = 'ws://localhost:7777';
+const channel_tag = 'channel#topic';
+
+function App() {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('Hello, World!');
+  const [ioState, setIoState] = useState(null); // ioState is updated by io.on('change')
+  const [cid, setCid] = useState(null);       // cid is updated by io.on('ready')
+  const [counts, setCounts] = useState({ instances: 0, websockets: 0 }); // State for IO counts
+  const ioRef = useRef(null); // Manage io instance with useRef
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  useEffect(() => {
+    console.log(IO.version)
+    ioRef.current = new IO(url); // Create io instance with URL
+    setCounts({ instances: IO.instanceCount, websockets: IO.webSocketCount }); // Set initial counts
+
+    if (!ioRef.current) {
+      console.error('IO instance is not initialized.');
+      return;
+    }
+
+    const handleReady = () => {
+      console.log('ready cid:', ioRef.current.cid);
+      setCid(ioRef.current.cid); // Update cid state
+      ioRef.current.subscribe(channel_tag); // Subscribe to channel
+    };
+
+    const handleChange = (state) => {
+      setIoState(state);
+      setCounts({ instances: IO.instanceCount, websockets: IO.webSocketCount }); // Update counts on state change
+    };
+
+    const handleChannelMessage = (msgObj, tag) => {
+      console.log('Received message in App:', msgObj, tag);
+      if( typeof msgObj === 'string' ) {
+        msgObj = { text: msgObj, cid: 'cli unknown' }; // Convert string to object if necessary
+      }
+      setMessages((prevMessages) => [...prevMessages, `${msgObj.cid} : ${msgObj.text}`]); // Update messages state]);
+    };
+
+    const handleError = (error) => {
+      console.error('IO Error in App:', error);
+      setIoState(`Error: ${error.message}`);
+    };
+
+    ioRef.current.on('ready', handleReady);
+    ioRef.current.on('change', handleChange);
+    ioRef.current.on(channel_tag, handleChannelMessage); // Add channel message listener
+    ioRef.current.on('error', handleError);
+
+
+    // Cleanup function: remove event listeners when component unmounts
+    return () => {
+      // ioRef.current.off('ready', handleReady);
+      // ioRef.current.off('change', handleChange);
+      // ioRef.current.off(channel_tag, handleChannelMessage);
+      // ioRef.current.off('error', handleError);
+ 
+      // destroy() is called to clean up the io instance, all listeners are removed automatically
+      ioRef.current.destroy(); // Clean up the io instance
+      console.log('IO instance destroyed.');
+      ioRef.current = null; // Release the io instance reference
+    };
+  }, []); // Empty dependency array ensures this runs only once on mount
+
+  const sendMessage = () => {
+    if (input.trim()) {
+      console.log('Sending message:', input);
+      const msgObj = { text: input, cid: ioRef.current.cid };
+      console.log('Sending message object:', msgObj);
+      ioRef.current.signal(channel_tag, msgObj); // Send message to channel
+      setInput('date' + Date.now());
+    }
+  };
+
+  const ioStateStyle = {
+    color: ioState === 'ready' ? 'green' : 'red',
+    fontWeight: 'bold',
+  };
+
+  return (
+    <div className="App">
+      <h1>React Chat Example</h1>
+      <div>URL: {url}</div>
+      <div>Channel: {channel_tag}</div>
+      <div>IO State: <span style={ioStateStyle}>{ioState}</span></div>
+      <div>Client ID: {cid}</div>
+      <div>IO Instances: {counts.instances}</div>
+      <div>WebSockets Created: {counts.websockets}</div>
+      <div className="messages">
+        {messages.map((msg, index) => (
+          <div key={index}>{msg}</div>
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+      <div className="input-area">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyUp={(e) => e.key === 'Enter' && sendMessage()}
+          disabled={ioState !== 'ready'}
+        />
+        <button onClick={sendMessage} disabled={ioState !== 'ready'}>
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/examples/react-chat-js/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/examples/react-chat-js/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+const strictModeEnabled = true; // true/false 바꾸기만 하면 됨
+
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  strictModeEnabled 
+    ? <React.StrictMode><App /></React.StrictMode>
+    : <App />
+)

package/examples/react-chat-js/src/shared_io.js

@@ -0,0 +1,12 @@
+import IO from 'iosignal/io.js'
+
+
+const url = 'ws://localhost:7777';
+const io = new IO(url);
+const channel = 'chat';
+
+
+console.log('IO instance created:', io);
+
+export { io, channel};
+

package/examples/react-chat-js/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/examples/server/index.js

@@ -0,0 +1,12 @@
+import { Server } from "iosignal"
+
+const server = new Server(
+  {
+    port: 7777,     
+    congPort: 8888, 
+    showMetric: 2,  
+    showMessage: 'message' // show signal message
+  })
+
+
+console.log('Signaling server started. Listening on port 7777 and congPort 8888');

package/examples/server/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "iosignal-example-server",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "iosignal": "file:../.."
+  }
+}

package/package.json

@@ -1,26 +1,28 @@
 {
   "name": "iosignal",
-  "version": "2.2.1",
+  "version": "3.0.1",
   "description": "iosignal",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/iosignal.mjs",
-      "require": "./dist/iosignal.cjs"
+      "import": "./dist/iosignal.js",
+      "require": null
     },
     "./io": "./dist/io.js",
     "./io.js": "./dist/io.js",
     "./browser": "./dist/io.js"
   },
+  "types": "./dist/types/src/client/browser/IOWebSocket.d.ts",
   "browser": "./dist/io.min.js",
   "jsdelivr": "./dist/io.min.js",
   "unpkg": "./dist/io.min.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && npm run build:types",
+    "build:types": "tsc --project tsconfig.json",
     "start": "node ./test-browser/server.js"
   },
   "engines": {
-    "node": ">=19.0.0"
+    "node": ">=18.0.0"
   },
   "author": {
     "name": "Taeo Lee",
@@ -31,14 +33,18 @@
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^4.36.0"
+    "@types/node": "^24.1.0",
+    "rollup": "^4.36.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "typescript": "^5.8.3"
   },
   "dependencies": {
-    "boho": "^1.0.3",
+    "boho": "^1.1.1",
     "eventemitter3": "^5.0.1",
-    "meta-buffer-pack": "^2.0.6",
-    "ws": "^8.18.1"
+    "meta-buffer-pack": "^2.1.0",
+    "ws": "^8.18.3"
   },
   "optionalDependencies": {
     "bufferutil": "^4.0.9",
@@ -52,9 +58,15 @@
   "keywords": [
     "websocket",
     "pubsub",
-    "arduino",
+    "messaging",
+    "real-time",
+    "signaling",
+    "signal",
+    "client-server",
+    "nodejs",
+    "browser",
     "iot",
-    "auth",
-    "signal"
+    "arduino",
+    "auth"
   ]
 }

package/rollup.config.js

@@ -2,10 +2,11 @@ import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
 import terser from '@rollup/plugin-terser'
+import dts from 'rollup-plugin-dts'
 
 export default [
-  {
-    input: './src/client/IOWebSocket.js',
+   {
+    input: './src/client/browser/IOWebSocket.js',
     output: [
       {
         file: './dist/io.js',
@@ -23,16 +24,21 @@ export default [
       resolve({
         preferBuiltins: false
       }),
-      json(),      
-      commonjs()
-      ,terser() 
+      commonjs(),
+      json(),
+      terser() 
     ]
   },
   {
+    input: './src/client/browser/IOWebSocket.js',
+    output: { file: './dist/io.d.ts', format: 'es' },
+    plugins: [dts()]
+  }
+
+  ,{
     input: './index.js',
     output: [
-      { file: './dist/iosignal.cjs', format: 'cjs' },
-      { file: './dist/iosignal.mjs', format: 'es' }
+      { file: './dist/iosignal.js', format: 'es' }
     ],
     plugins: [
       resolve({
@@ -40,7 +46,6 @@ export default [
       }), 
       json(),      
       commonjs()
-      ,terser() 
     ]
   }
 

package/src/auth/Auth_File.js

@@ -11,7 +11,7 @@ export class Auth_File extends BohoAuth {
     this.path = path.resolve(_path)
     console.log('auth from file path:', this.path)
     let ext = pathObj.ext;
-    if (ext.toLowerCase() == '.js' || ext.toLowerCase() == '.mjs') {
+    if (ext.toLowerCase() == '.js') {
       // Read auth data from file
       console.log("#JS path:", this.path);
       this.loadAuthInfoFile_JS(this.path)

package/src/client/IOCongSocket.js

@@ -1,4 +1,5 @@
 import { IOCore } from "./IOCore.js"
+import { STATES } from "../common/constants.js";
 import { pack, CongRx } from './CongPacket.js'
 import net from 'net'
 
@@ -9,20 +10,30 @@ export class IOCongSocket extends IOCore {
     if (url) this.open();
   }
 
+  /**
+   * Closes TCP socket and cleans resources.
+   */
   close() {
-    this.socket?.end();
-    this.socket = null;
+    if (this.socket) {
+      if (this.congRx) {
+        this.socket.unpipe(this.congRx);
+        this.congRx.destroy(); // Use destroy() for complete stream cleanup
+        this.congRx = null;
+      }
+      this.socket.removeAllListeners();
+      if (!this.socket.destroyed) {
+        this.socket.destroy(); // destroy() is sufficient for forceful closing
+      }
+    }
+    super.close();
   }
 
-  stop() {
-    this.close()
-    clearInterval(this.connectionCheckerIntervalID);
-    this.connectionCheckerIntervalID = null
-  }
+
 
   keepAlive() {
-    let state = this.socket?.readyState;
-    if (!this.socket || !(state === 'open' || state === 'opening')) {
+    if (!this.autoReconnect) return;
+    // Reconnect only if the socket is fully destroyed and the state is closed.
+    if ((!this.socket || this.socket.destroyed) && this.state === STATES.CLOSED) {
       this.open();
     }
   }