tauri-apps · FabianLars · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist/**
+!dist/.gitkeep
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WebSocket Plugin Example</title>
+  </head>
+  <body>
+    <div id="app">
+      <div>
+        <input bind:value="{message}" />
+        <button on:click="{send}">Send</button>
+        <button on:click="{disconnect}">Disconnect</button>
+      </div>
+      <div id="response-container"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "tauri-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "1.5.7",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.6"
+  },
+  "dependencies": {
+    "tauri-plugin-websocket-api": "link:..\\.."
+  }
+}
@@ -0,0 +1,50 @@
+import WebSocket from "tauri-plugin-websocket-api";
+import "./style.css";
+
+let ws: WebSocket;
+
+document.addEventListener("DOMContentLoaded", async () => {
+  document.querySelector("#send")?.addEventListener("click", send);
+  document.querySelector("#disconnect")?.addEventListener("click", disconnect);
+  await connect();
+});
+
+function _updateResponse(returnValue: unknown) {
+  const msg = document.createElement("p");
+  msg.textContent =
+    typeof returnValue === "string" ? returnValue : JSON.stringify(returnValue);
+  document.querySelector("#response-container")?.appendChild(msg);
+}
+
+async function connect() {
+  try {
+    ws = await WebSocket.connect("ws://127.0.0.1:8080").then((r) => {
+      _updateResponse("Connected");
+      return r;
+    });
+  } catch (e) {
+    _updateResponse(e);
+  }
+  ws.addListener(_updateResponse);
+}
+
+function send() {
+  ws.send(document.querySelector("#msg-input")?.textContent || "")
+    .then(() => _updateResponse("Message sent"))
+    .catch(_updateResponse);
+}
+
+function disconnect() {
+  ws.disconnect()
+    .then(() => _updateResponse("Disconnected"))
+    .catch(_updateResponse);
+}
+
+document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
+  <div>
+    <input type="text" />
+    <button id="send">send</button>
+    <button id="disconnect">disconnect</button>
+    <div id="response-container"></div>
+  </div>
+`;
@@ -66,3 +66,7 @@ button:not(:disabled):active {
 button:focus {
   border-color: #666;
 }
+
+p {
+  margin: 3px 0;
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}