iosignal 3.0.0 → 3.1.0

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

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

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-lock.json

@@ -0,0 +1,47 @@
+{
+  "name": "iosignal-example-server",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "iosignal-example-server",
+      "version": "1.0.0",
+      "dependencies": {
+        "iosignal": "file:../.."
+      }
+    },
+    "../..": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "boho": "^1.1.1",
+        "eventemitter3": "^5.0.1",
+        "meta-buffer-pack": "^2.1.0",
+        "ws": "^8.18.3"
+      },
+      "devDependencies": {
+        "@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",
+        "@types/node": "^24.1.0",
+        "rollup": "^4.36.0",
+        "rollup-plugin-dts": "^6.2.1",
+        "typescript": "^5.8.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "bufferutil": "^4.0.9",
+        "utf-8-validate": "^6.0.5"
+      }
+    },
+    "node_modules/iosignal": {
+      "resolved": "../..",
+      "link": true
+    }
+  }
+}

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/examples/svelte-chat-js/.devtools

@@ -0,0 +1,3 @@
+{
+  "sources": ["/src"]
+}

package/examples/svelte-chat-js/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.