unifinisehd

eclipse-zenoh · Dec 5, 2024 · 0e492a5 · 0e492a5
1 parent 285ac28
commit 0e492a5
Show file tree

Hide file tree

Showing 34 changed files with 8,670 additions and 165 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -29,6 +29,7 @@ ts-rs = { version = "9.0", features = [
     "uuid-impl",
     "serde-json-impl",
     "no-serde-warnings",
+    "import-esm",
 ] }
 tracing = "0.1"
 schemars = { version = "0.8.12", features = ["either"] }

diff --git a/zenoh-ts/examples/browser/chat/package-lock.json b/zenoh-ts/examples/browser/chat/package-lock.json
diff --git a/zenoh-ts/examples/browser/chat/package.json b/zenoh-ts/examples/browser/chat/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "zenoh-ts-chat",
+  "version": "1.0.0",
+  "description": "Simple example of using zenoh-ts library on the web page",
+  "repository": "[email protected]:eclipse-zenoh/zenoh-ts",
+  "author": "Michael Ilyin <[email protected]>",
+  "license": "EPL-2.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && webpack",
+    "start": "http-server dist -c-1 -o"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^5.6.3",
+    "http-server": "^14.1.1",
+    "typescript": "^5.7.2",
+    "webpack": "^5.97.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "@eclipse-zenoh/zenoh-ts": "file:../../..",
+    "importly": "^0.2.3"
+  }
+}
diff --git a/zenoh-ts/examples/browser/chat/src/index.css b/zenoh-ts/examples/browser/chat/src/index.css
@@ -0,0 +1,96 @@
+body {
+    font-family: Arial, sans-serif;
+}
+
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.server-panel {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background-color: #f0f0f0;
+}
+
+.server-panel label {
+    margin-right: 5px;
+}
+
+.server-panel input {
+    margin-right: 10px;
+}
+
+.main-panel {
+    display: flex;
+    flex: 1;
+}
+
+.user-list {
+    width: 20%;
+    border-right: 1px solid #ccc;
+    padding: 10px;
+}
+
+.chat-panel {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+}
+
+.chat-log {
+    flex: 1;
+    border: 1px solid #ccc;
+    padding: 10px;
+    overflow-y: auto;
+    margin-bottom: 10px;
+}
+
+.chat-input {
+    display: flex;
+}
+
+.chat-input input {
+    flex: 1;
+    padding: 5px;
+}
+
+.chat-input button {
+    padding: 5px 10px;
+}
+
+.technical-log-panel {
+    background-color: #f0f0f0;
+    padding: 10px;
+    height: 33vh;
+    /* 1/3 of the screen height */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+.technical-log-panel.hidden {
+    display: none;
+}
+
+.technical-log {
+    border-top: 1px solid #ccc;
+    padding-top: 10px;
+    margin-top: 10px;
+    height: calc(100% - 40px);
+    /* Adjust height to fit within the panel */
+    overflow-y: auto;
+}
+
+.toggle-log-panel {
+    position: fixed;
+    bottom: 10px;
+    left: 10px;
+}
+
+#toggle-log-button {
+    margin-top: 10px;
+}
diff --git a/zenoh-ts/examples/browser/chat/src/index.html b/zenoh-ts/examples/browser/chat/src/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>Zenoh TS Example</title>
+    <script async src="./node_modules/es-module-shims/dist/es-module-shims.js" crossorigin="anonymous"></script>
+    <script type="importmap" />
+    <script type="module" src="main.js"></script>
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+    <div class="chat-container">
+        <div class="server-panel">
+            <label for="server-name">Server Name:</label>
+            <input type="text" id="server-name" value="ws://localhost">
+            <label for="server-port">Server Port:</label>
+            <input type="text" id="server-port" value="10000">
+            <button id="connect-button">Connect</button>
+        </div>
+        <div class="main-panel">
+            <div class="user-list">
+                <h3>Users</h3>
+                <ul id="users">
+                    <!-- User list items will be added here -->
+                </ul>
+            </div>
+            <div class="chat-panel">
+                <div class="chat-log" id="chat-log">
+                    <!-- Chat messages will be added here -->
+                </div>
+                <div class="chat-input">
+                    <input type="text" id="message-input">
+                    <button id="send-button">Send</button>
+                </div>
+            </div>
+        </div>
+        <div class="technical-log-panel" id="technical-log-panel">
+            <div class="technical-log" id="technical-log">
+                <!-- Technical log messages will be added here -->
+            </div>
+        </div>
+        <div class="toggle-log-panel">
+            <button id="toggle-log-button">Toggle Log</button>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/zenoh-ts/examples/browser/chat/src/main.ts b/zenoh-ts/examples/browser/chat/src/main.ts
@@ -0,0 +1,38 @@
+import { Config, Session } from "@eclipse-zenoh/zenoh-ts";
+import { SimpleChannel } from "channel-ts";
+
+let q = new SimpleChannel();
+
+document.addEventListener('DOMContentLoaded', () => {
+	const toggleLogButton = document.getElementById('toggle-log-button');
+	const technicalLogPanel = document.getElementById('technical-log-panel');
+	const connectButton = document.getElementById('connect-button');
+	const serverNameInput = document.getElementById('server-name') as HTMLInputElement;
+	const serverPortInput = document.getElementById('server-port') as HTMLInputElement;
+
+	toggleLogButton?.addEventListener('click', () => {
+		if (technicalLogPanel) {
+			technicalLogPanel.classList.toggle('hidden');
+		}
+	});
+
+	connectButton?.addEventListener('click', () => {
+		connect(serverNameInput.value, serverPortInput.value);
+	});
+});
+
+function log(message: string) {
+	const technicalLog = document.getElementById('technical-log');
+	const timestamp = new Date().toLocaleTimeString();
+	const logMessage = document.createElement('div');
+	logMessage.textContent = `[${timestamp}] ${message}`;
+	technicalLog?.appendChild(logMessage);
+}
+
+async function connect(serverName: string, serverPort: string) {
+	let locator = `ws/${serverName}:${serverPort}`;
+	let config = new Config(locator);
+	log(`Connecting to zenohd on ${locator}`);
+	let session = await Session.open(config);
+	log(`Connected to zenohd on ${locator}`);
+}
diff --git a/zenoh-ts/examples/browser/chat/tsconfig.json b/zenoh-ts/examples/browser/chat/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "NodeNext",
+        "moduleResolution": "nodenext",
+        "target": "es2021",
+        "strict": true,
+        "baseUrl": ".",
+        "esModuleInterop": true,
+        "outDir": "./dist"
+    },
+    "include": [
+        "src/main.ts"
+    ]
+}
diff --git a/zenoh-ts/examples/browser/chat/webpack.config.js b/zenoh-ts/examples/browser/chat/webpack.config.js
@@ -0,0 +1,13 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+// import { fileURLToPath } from "url";
+// import path from "path";
+// const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default {
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html',
+            filename: 'dist/index.html'
+        }),
+    ],
+};