feat: Playground for P2P demo using websocket and streams (#76)

tlsnotary · Dec 3, 2024 · a82add9 · a82add9
1 parent d64361c
commit a82add9
Show file tree

Hide file tree

Showing 14 changed files with 4,089 additions and 0 deletions.
diff --git a/demo/web-to-web-p2p/.gitignore b/demo/web-to-web-p2p/.gitignore
@@ -0,0 +1 @@
+package-lock.json
diff --git a/demo/web-to-web-p2p/README.md b/demo/web-to-web-p2p/README.md
@@ -0,0 +1,24 @@
+# Web-to-Web P2P Demo
+
+This project demonstrates a peer-to-peer (P2P) communication between two web clients using TLSNotary.
+The web prover will get data from <https://swapi.dev> and prove it to the web verifier.
+
+In this demo, the two web clients run in the same browser page (`./src/app.tsx`) and communicate via a simple websocket server (`./server/index.js`)
+
+## Run the demo
+
+1. Run the demo:
+```
+    npm i
+    npm run dev
+```
+2. Open <http://localhost:3456/>
+3. Click the **Start Demo** button
+
+The Prover window logs the Prover's output, the Verifier logs the Verifier's output. In the console view you can see the websocket log.
+You can also open the Browser developer tools (F12) to see more TLSNotary protocol logs.
+
+## Project Structure
+
+- `src/`: Contains the source code for the demo.
+- `server/`: Contains the WebSocket server code.
diff --git a/demo/web-to-web-p2p/index.ejs b/demo/web-to-web-p2p/index.ejs
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React/Typescrip Example</title>
+</head>
+
+<body>
+<script>
+</script>
+<div id="root"></div>
+</body>
+
+</html>
diff --git a/demo/web-to-web-p2p/package.json b/demo/web-to-web-p2p/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "web-to-web-p2p",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.js",
+  "scripts": {
+    "dev:server": "node ./server/index.js",
+    "dev:ui": "webpack-dev-server --config webpack.js",
+    "dev": "concurrently npm:dev:ui npm:dev:server",
+    "build": "webpack --config webpack.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "comlink": "^4.4.1",
+    "concurrently": "^9.1.0",
+    "express": "^4.21.1",
+    "qs": "^6.13.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-loader-spinner": "^6.1.6",
+    "tailwindcss": "^3.4.14",
+    "tlsn-js": "0.1.0-alpha.7.1",
+    "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.1.1",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
+    "source-map-loader": "^5.0.0",
+    "stream-browserify": "^3.0.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.4",
+    "vm-browserify": "^1.1.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  }
+}