Compare commits

..

2 Commits

Author SHA1 Message Date
bc5e2eead8 + create user with public/private key
+ sign and verify votes and prevent unverified updates
2026-04-04 22:36:17 +02:00
b5cb0e83e3 * init p2p polling app 2026-03-31 19:09:46 +02:00
55 changed files with 11227 additions and 8746 deletions

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example

347
README.md
View File

@@ -1,280 +1,129 @@
# 🗳️ P2P Verified Polling App
# P2P Poll App
A decentralized, real-time polling application built with **Nuxt 3**, **Yjs**, and **WebRTC**. This app allows users to create and participate in polls where every vote is cryptographically signed and verified peer-to-peer, ensuring data integrity without a central authority "owning" the results.
A peer-to-peer polling application built with React, TypeScript, Tailwind CSS, Node.js, Yjs, and WebSocket for real-time collaborative voting.
---
**Users can create polls, add answers, and vote in real-time with automatic P2P synchronization across all connected clients.**
## 🌟 Key Features
## Architecture
* **Serverless Real-time Sync:** Uses **Yjs** (CRDTs) and **WebRTC** to sync poll data directly between browsers. No database is required for live updates.
* **Persistence with Nitro:** While the logic is P2P, the **Nuxt/Nitro** backend provides a "Snapshot" service to ensure polls persist even after all peers go offline.
* **Cryptographic Integrity:** Every vote is signed using **RSA-PSS (Web Crypto API)**. Each user has a unique private key (stored locally via `.pem` files) to ensure votes cannot be forged or tampered with.
* **Chained Verification:** Implements a "History-Signing" logic where each new vote signs the entire preceding state of the poll, creating a verifiable chain of trust.
* **Privacy First:** Users identify via UUIDs and Public/Private key pairs rather than traditional accounts.
**Hybrid P2P Approach:**
- Backend serves as both a Yjs WebSocket provider (for state synchronization) and signaling server (for WebRTC peer discovery)
- Clients sync poll data via Yjs CRDT for conflict-free merging
- Direct P2P connections via WebRTC for real-time updates when possible
- Server fallback ensures reliability when P2P fails
---
## Tech Stack
## ⚙️ How It Works
**Backend:**
- Node.js + TypeScript
- Express.js
- WebSocket (ws)
- y-websocket (Yjs WebSocket provider)
- CORS support
### 1. Identity Creation
When a new user is created, the system generates a unique **UUID (User ID)** and an **RSA Key Pair**. The user is prompted to save their **Private Key** as a `.pem` file, named after their User ID (e.g., `550e8400-e29b.pem`). This file acts as their "Passport"—it is never uploaded to the server and must be kept secure by the user.
**Frontend:**
- React 18 + TypeScript
- Vite (build tool)
- Tailwind CSS
- Yjs (CRDT library)
- y-websocket (server sync)
- y-webrtc (P2P sync)
- lucide-react (icons)
### 2. Authentication
Upon returning to the app, users load their local `.pem` file. The application extracts the Private Key for signing and the UUID for identification. No passwords or central servers are involved in this local-first login process.
## Project Structure
### 3. Joining a Poll
When a user joins a poll, the app fetches the latest binary snapshot from the server to populate a local **Y.Doc**. This ensures the user sees the current state immediately, even before connecting to other peers.
```
quicgroup/
├── server/ # Backend Node.js server
│ ├── src/
│ │ ├── index.ts # Main server entry
│ │ ├── yjs-server.ts # Yjs WebSocket provider
│ │ ├── signaling-server.ts # WebRTC signaling
│ │ ├── types/ # TypeScript types
│ │ └── utils/ # Utilities
│ ├── package.json
│ └── tsconfig.json
└── frontend/ # React frontend
├── src/
│ ├── components/ # React components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Yjs setup and utilities
│ ├── types/ # TypeScript types
│ └── styles/ # CSS styles
├── package.json
└── vite.config.ts
```
### 4. The P2P Mesh
The app establishes connections to other active voters via a WebRTC signaling server. Any changes made to the poll (adding options or voting) are broadcasted instantly to all peers using Conflict-free Replicated Data Types (CRDTs) to prevent sync conflicts.
## Setup Instructions
### 5. Casting a Signed Vote
To ensure security, the voting process follows a strict cryptographic chain:
* The app captures the current list of votes.
* It appends the new vote data (User ID + Timestamp).
* It signs the **entire array** (the previous history + the new vote) using the user's RSA private key.
* The signed update is merged into the shared Yjs Map and broadcasted.
### Prerequisites
- Node.js 18+ and npm
### 6. Distributed Verification
Whenever a peer receives a new update, they fetch the voter's **Public Key** from the API. They then verify that the signature matches the current state of the poll history. If a signature is invalid or the history has been tampered with, the vote is rejected by the peer's local state.
### Backend Setup
---
## 🛠️ Tech Stack
* **Framework:** [Nuxt 3](https://nuxt.com/) (Vue 3 + TypeScript)
* **Conflict-Free Replicated Data Types (CRDT):** [Yjs](https://yjs.dev/)
* **P2P Transport:** `y-webrtc`
* **Security:** Web Crypto API (SubtleCrypto)
* **Backend/Storage:** Nitro (Nuxt's server engine) with filesystem storage drivers
# AI Disclaimer
This App was developed with the assistance of AI.
# Nuxt Minimal Starter
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install dependencies:
1. Navigate to server directory:
```bash
cd server
```
2. Install dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
3. Copy environment file:
```bash
cp .env.example .env
```
## Development Server
Start the development server on `http://localhost:3000`:
4. Start the development server:
```bash
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
```
The server will run on `http://localhost:3000` with:
- Yjs WebSocket: `ws://localhost:3000/yjs`
- Signaling WebSocket: `ws://localhost:3000/signal`
## Production
### Frontend Setup
Build the application for production:
1. Navigate to frontend directory:
```bash
cd frontend
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
```
2. Install dependencies:
Locally preview production build:
```bash
npm install
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
```
3. Copy environment file (optional):
```bash
cp .env.example .env
```
4. Start the development server:
```bash
npm run dev
```
The frontend will run on `http://localhost:5173`
## Running the Application
1. **Start Backend** (Terminal 1):
```bash
cd server
npm run dev
```
2. **Start Frontend** (Terminal 2):
```bash
cd frontend
npm run dev
```
3. **Open Browser:**
- Navigate to `http://localhost:5173`
- Open multiple tabs/windows to test P2P synchronization
## Features
### Dynamic Poll Creation
- **Create Polls** - Any user can create new polls with custom questions
- **Add Answers** - Anyone can add answer options to any poll
- **Real-time Voting** - Vote on options with instant updates across all clients
- **Smart Vote Tracking** - One vote per user per option (prevents duplicate voting)
- **Visual Feedback** - Green border and " Voted" indicator on voted options
- **User Attribution** - See who created each poll and option
- **Live Vote Counts** - See vote percentages and counts update in real-time
- **P2P Synchronization** - Uses Yjs CRDT for conflict-free state merging
- **Connection Status** - Visual indicator showing WebSocket and peer connections
- **Hybrid Architecture** - Combines WebSocket server sync with WebRTC P2P
- **Beautiful UI** - Modern gradient design with Tailwind CSS
## How to Use
### Create a Poll
1. Enter your question in the "Create a New Poll" form at the top
2. Click "Create Poll"
3. Your poll appears instantly for all connected users
### Add Answer Options
1. Find the poll you want to add an answer to
2. Type your answer in the "Add a new option..." field
3. Click "Add"
4. Your answer appears instantly for all users
### Vote on Options
1. Click the vote button (thumbs up icon) on any option
2. You can only vote once per option
3. Voted options show a green border and " Voted" indicator
4. Vote counts update in real-time across all clients
### Multi-User Testing
1. Open multiple browser tabs/windows
2. Create polls from different tabs
3. Add answers from different tabs
4. Vote from different tabs
5. Watch real-time synchronization in action!
## How It Works
### CRDT Synchronization
The app uses Yjs (a CRDT library) to ensure all clients converge to the same state without conflicts:
- Each client maintains a local Yjs document
- Changes are automatically synced via WebSocket to the server
- WebRTC provides direct P2P connections between clients
- Yjs handles merge conflicts automatically
- One vote per user per option is enforced via `votedBy` tracking
## Data Model
```typescript
{
polls: Array<{
id: string,
question: string,
createdBy: string,
timestamp: number,
options: Array<{
id: string,
text: string,
votes: number,
votedBy: string[], // Tracks which users have voted
createdBy: string,
timestamp: number
}>
}>
}
```
## Testing P2P Functionality
1. Open the app in multiple browser tabs/windows
2. **Create polls** from different tabs - they appear everywhere instantly
3. **Add answer options** from different tabs to the same poll
4. **Vote** from different tabs - watch vote counts update in real-time
5. Try voting twice on the same option - it won't let you!
6. Check the connection status indicator for peer count
7. Verify visual feedback (green border) on options you've voted on
## Development
### Backend Scripts
- `npm run dev` - Start development server with hot reload
- `npm run build` - Build for production
- `npm start` - Run production build
### Frontend Scripts
- `npm run dev` - Start Vite dev server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
## Environment Variables
### Backend (.env)
```
PORT=3000
YJS_WS_PORT=1234
NODE_ENV=development
CORS_ORIGIN=http://localhost:5173
```
### Frontend (.env)
```
VITE_WS_URL=ws://localhost:3000
```
## Components
### Frontend Components
- **PollView** - Main view showing all polls and create poll form
- **CreatePoll** - Form to create new polls
- **PollCard** - Individual poll display with metadata
- **OptionList** - List of answer options with vote tracking
- **AddOption** - Form to add new answer options
- **VoteButton** - Vote button with disabled state for voted options
- **ConnectionStatus** - Shows WebSocket and P2P connection status
### Key Functions
- `createPoll(question)` - Create a new poll
- `addOption(pollId, text)` - Add an option to a specific poll
- `vote(pollId, optionId)` - Vote on an option (one vote per user)
- `hasVoted(option)` - Check if current user has voted on an option
## User Tracking
Each user gets a unique ID stored in localStorage:
- Format: `user-xxxxxxxxx`
- Used to track poll/option creators
- Used to prevent duplicate voting
- Persists across browser sessions
## Future Enhancements
- [ ] Edit/delete polls and options
- [ ] User nicknames instead of IDs
- [ ] Poll expiration/closing
- [ ] Vote history and analytics
- [ ] Export poll results
- [ ] Persistent storage (database)
- [ ] Dark mode toggle
- [ ] Mobile responsive improvements
- [ ] Poll categories/tags
- [ ] Search/filter polls
## License
MIT
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

175
app/app.vue Normal file
View File

@@ -0,0 +1,175 @@
<style>
/* Basic styling to make it look clean */
body {
font-family: system-ui, -apple-system, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
display: flex;
justify-content: center;
padding: 2rem;
}
header {
margin-bottom: 2rem;
text-align: center;
}
h1 { margin: 0 0 0.5rem 0; }
input {
flex-grow: 1;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}
button,
.button {
background: #3b82f6;
color: white;
border: none;
padding: 0.75rem 1rem;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: background 0.2s;
}
button:hover,
.button:hover { background: #2563eb; }
.status {
font-size: 0.85rem;
color: #666;
}
.status .connected { color: #10b981; font-weight: bold; }
.connectionFailed { color: #FF2525; font-weight: bold; }
.poll-container {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
}
.back-btn {
margin-left: 1rem;
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
background: #64748b;
}
/* Hide the actual file input */
input[type="file"] {
display: none;
}
</style>
<template>
<div class="poll-container">
<header>
<h1 @click="activePollId = null" style="cursor:pointer">P2P Polling App 🗳</h1>
<div class="status">
<button v-if="activePollId" @click="activePollId = null" class="back-btn"> Back To List</button>
<span :class="{ 'connected': isConnected }">
{{ isConnected ? 'Synced' : 'Waiting for other Peers...' }}
</span>
<span> | Peers online: {{ connectedPeers }}</span>
<h2 v-if="connectionAttempFailed" class="connectionFailed"> Connection to Signaling Server Failed!</h2>
<div v-if="user===null" style="margin-top: 10px;">
<button @click="createUser">Create New User</button>
Or
<label title="Select Key File">
<span class="button">Login</span>
<input
type="file"
accept=".pem"
@change="loadUser"
/>
</label>
</div>
</div>
</header>
<main>
<PollList v-if="!activePollId" :userid="user?.userid" @select-poll="selectPoll" />
<Poll v-else :activePollId="activePollId" :userid="user?.userid" :poll-data="pollData" :addOption="addOption" :vote="vote"/>
</main>
</div>
</template>
<script setup lang="ts">
import { v4 as uuidv4 } from 'uuid';
const activePollId = ref<string | null>(null);
const user = shallowRef<UserData | null>(null);
const { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote } = usePoll(activePollId,user);
const selectPoll = (id: string) => {
activePollId.value = id;
};
const createUser = async () => {
try {
const keypair : CryptoKeyPair = await generateUserKeyPair();
console.log('keypair:', keypair);
const uuid = uuidv4();
user.value = {
userid: uuid,
private_key: keypair.privateKey,
public_key: keypair.publicKey,
};
const prvKeyString = await exportPrivateKey(keypair.privateKey);
await savePrivateKeyToFile(prvKeyString,uuid+".pem")
const pubKeyString = await exportPublicKey(keypair.publicKey);
await $fetch(`/api/users/${uuid}`, {
method: 'POST',
body: { public_key: pubKeyString }
});
} catch (err) {
user.value = null
console.error("Failed to create new User!", err);
}
};
const loadUser = async (event: Event) => {
const target = event.target as HTMLInputElement;
const file = target.files?.[0];
if (file) {
try {
const content = await file.text();
console.log("File loaded: ");
if (file.name && content) {
try {
const uuid = file.name.replace(".pem", "");
// Standardize the string for the importer
const pkBase64 = content.replace(/-----BEGIN PRIVATE KEY-----|-----END PRIVATE KEY-----/g, "").replace(/\s+/g, "");
const key = await stringToCryptoKey(pkBase64, "private");
user.value = {
userid: uuid,
private_key: key,
public_key: undefined, // Note: You might need to import a pub key too!
};
console.log("Login successful for:", uuid);
} catch (err) {
console.error("Crypto Import Error:", err);
alert("The file content is not a valid Private Key.");
}
}
} catch (e) {
console.error("Failed to read file", e);
}
}
};
</script>

83
app/components/Poll.vue Normal file
View File

@@ -0,0 +1,83 @@
<style scoped>
.poll-list {
list-style: none;
padding: 0;
margin: 0;
}
.poll-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 0.5rem;
}
.poll-title {
font-size: 1.1rem;
color: #3b82f6;
text-transform: uppercase;
letter-spacing: 1px;
}
.add-option-form {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
}
.option-name { font-weight: 500; }
.vote-section { display: flex; align-items: center; gap: 1rem; }
.vote-count { font-size: 0.9rem; color: #475569; }
.vote-btn { padding: 0.4rem 0.8rem; background: #10b981; }
.vote-btn:hover { background: #059669; }
.vote-btn:disabled,
.vote-btn[disabled] { background: #888888; }
.vote-btn:disabled:hover,
.vote-btn[disabled]:hover { background: #AAAAAA; }
</style>
<template>
<div>
<h2 class="poll-title">Poll: {{ activePollId }}</h2>
<p v-if="Object.keys(pollData).length==0">Note: Add at least one Option to save the Poll.</p>
<form @submit.prevent="handleAddNewOption" class="add-option-form" v-if="userid">
<input v-model="newOption" placeholder="Enter a new poll option..." required />
<button type="submit">Add Option</button>
</form>
<ul class="poll-list">
<li v-for="(votes, optionName) in pollData" :key="optionName" class="poll-item">
<span class="option-name">{{ optionName }}</span>
<div class="vote-section">
<span class="vote-count">{{ votes.length }} {{ votes.length === 1 ? 'vote' : 'votes' }}</span>
<button @click="vote(String(optionName))" class="vote-btn" :disabled="userid==undefined || voted(votes)">+1</button>
</div>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import type { PollProps, SignedData, VoteData } from '@/utils/types'
const props = defineProps<PollProps>()
const newOption = ref('');
const handleAddNewOption = () => {
props.addOption(newOption.value);
newOption.value = '';
};
const voted = (votes: SignedData<VoteData>[]) => {
for(let vote of votes){
if(vote.data.userid == props.userid){
return true;
}
}
return false;
}
</script>

View File

@@ -0,0 +1,64 @@
<style scoped>
.poll-list { margin-top: 1rem; }
.empty-state { text-align: center; color: #94a3b8; font-style: italic; }
.create-poll { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.poll-links { list-style: none; padding: 0; }
.poll-link-btn {
width: 100%;
text-align: left;
background: #f1f5f9;
color: #1e293b;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
}
.poll-link-btn:hover { background: #e2e8f0; }
</style>
<template>
<div class="poll-list">
<h3>Available Polls</h3>
<ul v-if="polls && polls.length > 0" class="poll-links">
<li v-for="id in polls" :key="id">
<button class="poll-link-btn" @click="$emit('select-poll', id)">
{{ id }} <span></span>
</button>
</li>
</ul>
<p v-else class="empty-state">No polls found. Create the first one!</p>
<div class="create-poll" v-if="userid !== undefined">
<input
v-model="newPollId"
placeholder="Enter new poll name..."
@keyup.enter="createPoll"
/>
<button @click="createPoll">Create & Join</button>
</div>
</div>
</template>
<script setup lang="ts">
import type { PollListProps } from '@/utils/types'
const props = defineProps<PollListProps>()
const newPollId = ref('');
const polls = ref<string[]>([]);
// Fetch existing polls on mount
const fetchPolls = async () => {
const data = await $fetch<{ polls: string[] }>('/api/polls');
polls.value = data.polls;
};
const createPoll = () => {
const id = newPollId.value.trim().toLowerCase().replace(/\s+/g, '-');
if (id) {
// In a real app, you might want to POST to create it first,
// but here we just navigate to it and let usePoll handle the save.
emit('select-poll', id);
}
};
const emit = defineEmits(['select-poll']);
onMounted(fetchPolls);
</script>

131
app/composables/usePoll.ts Normal file
View File

@@ -0,0 +1,131 @@
// composables/usePoll.ts
import { ref, watch, onUnmounted } from 'vue';
import * as Y from 'yjs';
export const usePoll = (pollId: Ref<string | null>, user: Ref<UserData | null>) => {
const pollData = ref<PollData>({});
const isConnected = ref(false);
const connectionAttempFailed = ref(false);
const connectedPeers = ref(1);
let ydoc: Y.Doc | null = null;
let provider: any = null;
let yMap: Y.Map<SignedData<VoteData>[]> | null = null;
const cleanup = () => {
if (provider) provider.disconnect();
if (ydoc) ydoc.destroy();
isConnected.value = false;
pollData.value = {};
};
const initPoll = async (id: string) => {
cleanup(); // Clear previous session
ydoc = new Y.Doc();
// 1. Fetch Snapshot from Nuxt API
try {
const response = await $fetch<{ update: number[] | null }>(`/api/polls/${id}`).catch((e) => {
console.error("Failed to get poll: " + id,e)
});
//trust the server without verification.
if (response?.update) {
Y.applyUpdate(ydoc, new Uint8Array(response.update));
}
} catch (err) {
console.error('Persistence fetch failed', err);
}
yMap = ydoc.getMap<SignedData<VoteData>[]>('shared-poll');
// 2. Local State Sync
yMap.observe(async () => {
await performUpdateAndVerify();
saveStateToServer(id);
});
await performUpdateAndVerify();
// 3. P2P Connection
const { WebrtcProvider } = await import('y-webrtc');
provider = new WebrtcProvider(`nuxt-p2p-${id}`, ydoc, {
signaling: ["ws://localhost:4444", "ws://lynxpi.ddns.net:4444"]
});
provider.on('synced', (arg: {synced: boolean}) => {
isConnected.value = arg.synced;
console.log('Connection synced:', arg.synced) // "connected" or "disconnected"
});
provider.on('status', (event: { connected: boolean }) => {
console.log('Connection status:', event.connected) // "connected" or "disconnected"
})
provider.on('peers', (data: any) => {
connectedPeers.value = data.webrtcPeers.length + 1
});
};
const saveStateToServer = async (id: string) => {
if (!ydoc) return;
const stateUpdate = Y.encodeStateAsUpdate(ydoc);
await $fetch(`/api/polls/${id}`, {
method: 'POST',
body: { update: Array.from(stateUpdate) }
}).catch((e) => {
console.error("Failed to update poll",e)
});
};
// Watch for ID changes (e.g., user clicks a link or goes back)
watch(pollId, (newId) => {
if (newId && import.meta.client) {
initPoll(newId);
} else {
cleanup();
}
}, { immediate: true });
onUnmounted(cleanup);
const addOption = (optionName: string) => {
if (yMap && !yMap.has(optionName)) yMap.set(optionName, []);
};
const performUpdateAndVerify = async () => {
const pollDataUpdate = yMap!.toJSON();
console.log("Poll Data Update: ", pollDataUpdate)
for(var option in pollDataUpdate){
console.log("verifying votes for option: " + option);
const votes = pollDataUpdate[option] || [];
const verified = await verifyAllVotesForOption(votes);
if(!verified){
console.error("Failed to verify option: "+option)
return;
}
}
console.log("All options verified! :)")
pollData.value = pollDataUpdate
}
const vote = async (optionName: string) => {
const currentUser = user.value;
if (currentUser != undefined && yMap?.has(optionName)) {
const voteData = [...(yMap.get(optionName) || [])];
if(voteData != undefined && currentUser.private_key){
var unsignedVoteData : VoteData = {
userid: currentUser.userid,
timestamp: new Date().toISOString()
}
var newVote : SignedData<VoteData> = {
data: unsignedVoteData,
signature: "",
}
voteData?.push(newVote)
const signature = await signVote(voteData,currentUser.private_key);
newVote.signature=signature
yMap?.set(optionName, voteData);
}
}
};
return { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote };
};

2
app/composables/user.ts Normal file
View File

@@ -0,0 +1,2 @@
export const user = (user: Ref<UserData | null>) => {
}

187
app/utils/crypto.ts Normal file
View File

@@ -0,0 +1,187 @@
// utils/crypto.ts
export const generateUserKeyPair = async () => {
return await window.crypto.subtle.generateKey(
{
name: "RSASSA-PKCS1-v1_5",
modulusLength: 2048,
publicExponent: new Uint8Array([1, 0, 1]), // 65537
hash: "SHA-256",
},
true, // extractable
["sign", "verify"]
);
};
export const signVote = async (data: any, privateKey: CryptoKey) => {
const encoder = new TextEncoder();
const encodedData = encoder.encode(JSON.stringify(data));
const signature = await window.crypto.subtle.sign(
"RSASSA-PKCS1-v1_5",
privateKey,
encodedData
);
// Convert to Base64 or Hex to store in Yjs easily
return btoa(String.fromCharCode(...new Uint8Array(signature)));
};
export const verifyVote = async (data: any, signatureStr: string, publicKey: CryptoKey) => {
const encoder = new TextEncoder();
const encodedData = encoder.encode(JSON.stringify(data));
// Convert Base64 back to Uint8Array
const signature = Uint8Array.from(atob(signatureStr), c => c.charCodeAt(0));
return await window.crypto.subtle.verify(
"RSASSA-PKCS1-v1_5",
publicKey,
signature,
encodedData
);
};
/**
* Verifies a specific vote within an array of votes by
* reconstructing the "signed state" at that point in time.
*/
export const verifyChainedVote = async (
voteData: SignedData<VoteData>[],
index: number
) => {
const voteToVerify = voteData[index];
console.log("Verifying vote: " + voteToVerify)
if(voteToVerify) {
// 1. Reconstruct the exact data state the user signed
// We need the array exactly as it was when they pushed their vote
const historicalState = voteData.slice(0, index + 1).map((v, i) => {
if (i === index) {
// For the current vote, the signature must be empty string
// because it wasn't signed yet when passed to signVote
return { ...v, signature: "" };
}
return v;
});
try {
// 2. Fetch public key
const response = await $fetch<{ public_key: string }>(`/api/users/${voteToVerify.data.userid}`);
console.log("Got key: ",response)
const pubKey = await stringToCryptoKey(response.public_key, 'public');
console.log("Using pubKey to verify Vote.")
// 3. Verify: Does this historicalState match the signature?
return await verifyVote(historicalState, voteToVerify.signature, pubKey);
} catch (err) {
console.error("Verification failed")
console.error(err);
return false;
}
}
console.error("Vote is undefined or null");
return false;
};
export const verifyAllVotesForOption = async (votes: SignedData<VoteData>[]) => {
console.log("verifying votes for option ",votes);
for (let i = votes.length-1; i >= 0 ; i--) {
const isValid = await verifyChainedVote(votes, i);
if(!isValid){
console.error("Error! Invalid Vote at: " + i,votes)
return false;
}
}
return true;
};
// Helper to convert ArrayBuffer to Base64 string
const bufferToBase64 = (buf: ArrayBuffer) =>
window.btoa(String.fromCharCode(...new Uint8Array(buf)));
export const exportPublicKey = async (key: CryptoKey) => {
// Export Public Key
const exportedPublic = await window.crypto.subtle.exportKey("spki", key);
const publicKeyString = bufferToBase64(exportedPublic);
return publicKeyString;
};
export const exportPrivateKey = async (key: CryptoKey) => {
// Export Private Key
const exportedPrivate = await window.crypto.subtle.exportKey("pkcs8", key);
const privateKeyString = bufferToBase64(exportedPrivate);
return privateKeyString;
};
/**
* Converts a Base64 string back into a usable CryptoKey object
* @param keyStr The Base64 string (without PEM headers)
* @param type 'public' or 'private'
*/
export const stringToCryptoKey = async (keyStr: string, type: 'public' | 'private'): Promise<CryptoKey> => {
// 1. Convert Base64 string to a Uint8Array (binary)
const binaryString = window.atob(keyStr);
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
// 2. Identify the format based on the key type
// Public keys usually use 'spki', Private keys use 'pkcs8'
const format = type === 'public' ? 'spki' : 'pkcs8';
const usages: KeyUsage[] = type === 'public' ? ['verify'] : ['sign'];
// 3. Import the key
return await window.crypto.subtle.importKey(
format,
bytes.buffer,
{
name: "RSASSA-PKCS1-v1_5",
hash: "SHA-256",
},
true, // extractable (set to false if you want to lock it in memory)
usages
);
};
export const savePrivateKeyToFile = (privateKeyStr: string, filename: string) => {
// Optional: Wrap in PEM headers for standard formatting
const pemHeader = "-----BEGIN PRIVATE KEY-----\n";
const pemFooter = "\n-----END PRIVATE KEY-----";
const fileContent = pemHeader + privateKeyStr + pemFooter;
const blob = new Blob([fileContent], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
// Cleanup
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
export const loadPrivateKeyFromFile = async (file: File): Promise<string> => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target?.result as string;
// Clean up the string by removing PEM headers and newlines
const cleanKey = content
.replace("-----BEGIN PRIVATE KEY-----", "")
.replace("-----END PRIVATE KEY-----", "")
.replace(/\s+/g, ""); // Removes all whitespace/newlines
resolve(cleanKey);
};
reader.onerror = () => reject("Error reading file");
reader.readAsText(file);
});
};

36
app/utils/types.ts Normal file
View File

@@ -0,0 +1,36 @@
export interface PollProps {
userid: string | undefined,
activePollId: string,
pollData: PollData,
addOption: (name: string) => void,
vote: (optionName: string) => void
}
export interface PollListProps {
userid: string | undefined,
}
export interface PollData extends Record<string, SignedData<VoteData>[]> {
}
export interface SignedData<T> {
data: T,
signature: string
}
export interface VoteData {
userid: string,
timestamp: string
}
export interface OptionData {
userid: string,
timestamp: string,
optionName: string
}
export interface UserData {
userid: string,
private_key: CryptoKey | undefined,
public_key: CryptoKey | undefined
}

View File

@@ -1 +0,0 @@
VITE_WS_URL=ws://localhost:5000

6
frontend/.gitignore vendored
View File

@@ -1,6 +0,0 @@
node_modules
dist
dist-ssr
*.local
.env
.DS_Store

View File

@@ -1,13 +0,0 @@
<!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>P2P Poll App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -1,35 +0,0 @@
{
"name": "p2p-poll-frontend",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"yjs": "^13.6.8",
"y-websocket": "^1.5.0",
"y-webrtc": "^10.2.5",
"lucide-react": "^0.294.0"
},
"devDependencies": {
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.53.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"typescript": "^5.2.2",
"vite": "^5.0.0"
}
}

View File

@@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@@ -1,8 +0,0 @@
import { PollView } from './components/PollView';
import './styles/index.css';
function App() {
return <PollView />;
}
export default App;

View File

@@ -1,38 +0,0 @@
import { useState } from 'react';
import { Plus } from 'lucide-react';
interface AddOptionProps {
onAdd: (text: string) => void;
}
export function AddOption({ onAdd }: AddOptionProps) {
const [text, setText] = useState('');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (text.trim()) {
onAdd(text);
setText('');
}
};
return (
<form onSubmit={handleSubmit} className="flex gap-2">
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Add a new option..."
className="flex-1 px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
/>
<button
type="submit"
disabled={!text.trim()}
className="px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
>
<Plus className="w-5 h-5" />
Add
</button>
</form>
);
}

View File

@@ -1,34 +0,0 @@
import { Wifi, WifiOff, Users } from 'lucide-react';
interface ConnectionStatusProps {
isConnected: boolean;
wsProvider: any;
webrtcProvider: any;
}
export function ConnectionStatus({ isConnected, wsProvider, webrtcProvider }: ConnectionStatusProps) {
const peerCount = webrtcProvider?.room?.peers?.size || 0;
return (
<div className="flex items-center gap-4 text-white/90 text-sm">
<div className="flex items-center gap-2">
{isConnected ? (
<>
<Wifi className="w-4 h-4 text-green-400" />
<span>Connected</span>
</>
) : (
<>
<WifiOff className="w-4 h-4 text-red-400" />
<span>Disconnected</span>
</>
)}
</div>
<div className="flex items-center gap-2">
<Users className="w-4 h-4" />
<span>{peerCount} peer{peerCount !== 1 ? 's' : ''}</span>
</div>
</div>
);
}

View File

@@ -1,43 +0,0 @@
import { useState } from 'react';
import { Plus } from 'lucide-react';
interface CreatePollProps {
onCreate: (question: string) => void;
}
export function CreatePoll({ onCreate }: CreatePollProps) {
const [question, setQuestion] = useState('');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (question.trim()) {
onCreate(question);
setQuestion('');
}
};
return (
<form onSubmit={handleSubmit} className="mb-8">
<div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-white/20">
<h2 className="text-xl font-bold text-white mb-4">Create a New Poll</h2>
<div className="flex gap-2">
<input
type="text"
value={question}
onChange={(e) => setQuestion(e.target.value)}
placeholder="Enter your question..."
className="flex-1 px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
/>
<button
type="submit"
disabled={!question.trim()}
className="px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
>
<Plus className="w-5 h-5" />
Create Poll
</button>
</div>
</div>
</form>
);
}

View File

@@ -1,60 +0,0 @@
import { PollOption } from '../types/poll.types';
import { VoteButton } from './VoteButton';
interface OptionListProps {
options: PollOption[];
onVote: (optionId: string) => void;
hasVoted?: (option: PollOption) => boolean;
}
export function OptionList({ options, onVote, hasVoted }: OptionListProps) {
const totalVotes = options.reduce((sum, opt) => sum + opt.votes, 0);
const sortedOptions = [...options].sort((a, b) => b.votes - a.votes);
return (
<div className="space-y-3">
{sortedOptions.length === 0 ? (
<div className="text-center py-8 text-white/60">
No options yet. Add one to get started!
</div>
) : (
sortedOptions.map((option) => {
const percentage = totalVotes > 0 ? (option.votes / totalVotes) * 100 : 0;
const userHasVoted = hasVoted ? hasVoted(option) : false;
return (
<div
key={option.id}
className={`bg-white/10 backdrop-blur-sm rounded-lg p-4 border transition-all duration-200 ${
userHasVoted
? 'border-green-400/50 bg-green-400/10'
: 'border-white/20 hover:border-white/30'
}`}
>
<div className="flex items-center justify-between mb-2">
<span className="text-white font-medium text-lg">
{option.text}
{userHasVoted && <span className="ml-2 text-green-400 text-sm"> Voted</span>}
</span>
<VoteButton optionId={option.id} votes={option.votes} onVote={onVote} disabled={userHasVoted} />
</div>
<div className="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
className="bg-gradient-to-r from-green-400 to-blue-500 h-full transition-all duration-500 ease-out"
style={{ width: `${percentage}%` }}
/>
</div>
<div className="mt-2 flex justify-between text-xs text-white/60">
<span>by {option.createdBy}</span>
<span>{percentage.toFixed(1)}%</span>
</div>
</div>
);
})
)}
</div>
);
}

View File

@@ -1,50 +0,0 @@
import { Poll } from '../types/poll.types';
import { AddOption } from './AddOption';
import { OptionList } from './OptionList';
import { User, Clock } from 'lucide-react';
interface PollCardProps {
poll: Poll;
onAddOption: (pollId: string, text: string) => void;
onVote: (pollId: string, optionId: string) => void;
hasVoted: (option: any) => boolean;
}
export function PollCard({ poll, onAddOption, onVote, hasVoted }: PollCardProps) {
const handleAddOption = (text: string) => {
onAddOption(poll.id, text);
};
const handleVote = (optionId: string) => {
onVote(poll.id, optionId);
};
const formatTime = (timestamp: number) => {
const date = new Date(timestamp);
return date.toLocaleString();
};
return (
<div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-8 border border-white/20 mb-6">
<div className="mb-6">
<h2 className="text-3xl font-bold text-white mb-3">{poll.question}</h2>
<div className="flex items-center gap-4 text-white/60 text-sm">
<div className="flex items-center gap-1">
<User className="w-4 h-4" />
<span>{poll.createdBy}</span>
</div>
<div className="flex items-center gap-1">
<Clock className="w-4 h-4" />
<span>{formatTime(poll.timestamp)}</span>
</div>
</div>
</div>
<div className="mb-6">
<AddOption onAdd={handleAddOption} />
</div>
<OptionList options={poll.options} onVote={handleVote} hasVoted={hasVoted} />
</div>
);
}

View File

@@ -1,57 +0,0 @@
import { RefreshCw } from 'lucide-react';
import { usePoll } from '../hooks/usePoll';
import { CreatePoll } from './CreatePoll';
import { PollCard } from './PollCard';
import { ConnectionStatus } from './ConnectionStatus';
export function PollView() {
const { polls, createPoll, addOption, vote, hasVoted, isConnected, wsProvider, webrtcProvider } = usePoll();
return (
<div className="min-h-screen p-4 py-8">
<div className="max-w-4xl mx-auto">
<div className="mb-8 flex items-center justify-between">
<div>
<h1 className="text-4xl font-bold text-white mb-2">P2P Polling App</h1>
<p className="text-white/70">Create polls, add answers, and vote in real-time</p>
</div>
<ConnectionStatus
isConnected={isConnected}
wsProvider={wsProvider}
webrtcProvider={webrtcProvider}
/>
</div>
<CreatePoll onCreate={createPoll} />
{polls.length === 0 ? (
<div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-12 border border-white/20 text-center">
<p className="text-white/60 text-lg mb-2">No polls yet!</p>
<p className="text-white/40">Create the first poll to get started.</p>
</div>
) : (
<div className="space-y-6">
{polls.map((poll) => (
<PollCard
key={poll.id}
poll={poll}
onAddOption={addOption}
onVote={vote}
hasVoted={hasVoted}
/>
))}
</div>
)}
<div className="mt-8 text-center text-white/50 text-sm">
<p>QUIC P2P Experiment !</p>
<p className="flex items-center justify-center gap-2 mt-1">
<RefreshCw className="w-4 h-4" />
Real-time P2P synchronization with Yjs
</p>
<p className="mt-1">Open multiple tabs to see live updates!</p>
</div>
</div>
</div>
);
}

View File

@@ -1,25 +0,0 @@
import { ThumbsUp } from 'lucide-react';
interface VoteButtonProps {
optionId: string;
votes: number;
onVote: (optionId: string) => void;
disabled?: boolean;
}
export function VoteButton({ optionId, votes, onVote, disabled = false }: VoteButtonProps) {
return (
<button
onClick={() => !disabled && onVote(optionId)}
disabled={disabled}
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 text-white font-medium ${
disabled
? 'bg-white/10 cursor-not-allowed opacity-60'
: 'bg-white/20 hover:bg-white/30'
}`}
>
<ThumbsUp className="w-4 h-4" />
<span>{votes}</span>
</button>
);
}

View File

@@ -1,37 +0,0 @@
import { useCallback } from 'react';
import { pollManager } from '../lib/poll-manager';
import { useYjsSync } from './useYjsSync';
export function usePoll() {
const { polls, isConnected, wsProvider, webrtcProvider } = useYjsSync();
const createPoll = useCallback((question: string) => {
return pollManager.createPoll(question);
}, []);
const addOption = useCallback((pollId: string, text: string) => {
pollManager.addOption(pollId, text);
}, []);
const vote = useCallback((pollId: string, optionId: string) => {
pollManager.vote(pollId, optionId);
}, []);
const hasVoted = useCallback((option: any) => {
return pollManager.hasVoted(option);
}, []);
const userId = pollManager.getUserId();
return {
polls,
createPoll,
addOption,
vote,
hasVoted,
userId,
isConnected,
wsProvider,
webrtcProvider
};
}

View File

@@ -1,50 +0,0 @@
import { useEffect, useState } from 'react';
import { Poll } from '../types/poll.types';
import {
initializeProviders,
destroyProviders,
yPolls,
wsProvider,
webrtcProvider
} from '../lib/yjs-setup';
export function useYjsSync() {
const [polls, setPolls] = useState<Poll[]>([]);
const [isConnected, setIsConnected] = useState(false);
useEffect(() => {
console.log('[SYNC] Initializing Yjs sync hook');
const { wsProvider: ws } = initializeProviders();
const updatePolls = () => {
const currentPolls = Array.from(yPolls.values());
console.log('[SYNC] Polls updated, count:', currentPolls.length);
setPolls(currentPolls);
};
yPolls.observe(updatePolls);
updatePolls();
const handleStatus = (event: { status: string }) => {
console.log('[SYNC] WebSocket status event:', event.status);
const connected = event.status === 'connected';
setIsConnected(connected);
console.log('[SYNC] Connection state set to:', connected);
};
ws?.on('status', handleStatus);
return () => {
yPolls.unobserve(updatePolls);
ws?.off('status', handleStatus);
destroyProviders();
};
}, []);
return {
polls,
isConnected,
wsProvider,
webrtcProvider
};
}

View File

@@ -1,43 +0,0 @@
import { PollOption } from '../types/poll.types';
import { createPoll as yjsCreatePoll, addOption as yjsAddOption, voteForOption as yjsVoteForOption } from './yjs-setup';
export class PollManager {
private userId: string;
constructor() {
this.userId = this.generateUserId();
}
private generateUserId(): string {
const stored = localStorage.getItem('p2p-poll-user-id');
if (stored) return stored;
const newId = 'user-' + Math.random().toString(36).substr(2, 9);
localStorage.setItem('p2p-poll-user-id', newId);
return newId;
}
getUserId(): string {
return this.userId;
}
createPoll(question: string): string {
if (!question.trim()) return '';
return yjsCreatePoll(question.trim(), this.userId);
}
addOption(pollId: string, text: string): void {
if (!text.trim()) return;
yjsAddOption(pollId, text.trim(), this.userId);
}
vote(pollId: string, optionId: string): void {
yjsVoteForOption(pollId, optionId, this.userId);
}
hasVoted(option: PollOption): boolean {
return option.votedBy.includes(this.userId);
}
}
export const pollManager = new PollManager();

View File

@@ -1,287 +0,0 @@
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
import { WebrtcProvider } from 'y-webrtc';
import { Poll, PollOption } from '../types/poll.types';
const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:5000';
const ROOM_NAME = 'default-poll';
function getSignalingUrl(wsUrl: string): string {
try {
const url = new URL(wsUrl);
const protocol = url.protocol === 'ws:' ? 'ws' : 'wss';
return `${protocol}://${url.host}/signal`;
} catch (error) {
console.error('Invalid WebSocket URL:', wsUrl, error);
return wsUrl + '/signal';
}
}
export const ydoc = new Y.Doc();
export const yPolls = ydoc.getMap<Poll>('polls');
export let wsProvider: WebsocketProvider | null = null;
export let webrtcProvider: WebrtcProvider | null = null;
let wsReconnectAttempts = 0;
let webrtcReconnectAttempts = 0;
const MAX_RECONNECT_ATTEMPTS = 5;
const BASE_RECONNECT_DELAY = 1000;
interface ConnectionMetrics {
rtt: number;
bandwidth: number;
packetLoss: number;
lastUpdated: number;
}
const connectionMetrics: ConnectionMetrics = {
rtt: 0,
bandwidth: 0,
packetLoss: 0,
lastUpdated: Date.now()
};
function getReconnectDelay(attempts: number): number {
return Math.min(BASE_RECONNECT_DELAY * Math.pow(2, attempts), 30000);
}
export function getConnectionMetrics(): ConnectionMetrics {
return { ...connectionMetrics };
}
export function initializeProviders() {
console.log('[INIT] Initializing providers with WS_URL:', WS_URL);
console.log('[INIT] Connecting to WebSocket:', WS_URL + '/yjs');
console.log('[INIT] Room name:', ROOM_NAME);
console.log('[INIT] Signaling URL:', getSignalingUrl(WS_URL));
wsProvider = new WebsocketProvider(
WS_URL + '/yjs',
ROOM_NAME,
ydoc,
{ connect: true }
);
webrtcProvider = new WebrtcProvider(
ROOM_NAME,
ydoc,
{
signaling: [getSignalingUrl(WS_URL)],
password: null,
awareness: wsProvider.awareness,
maxConns: 20,
filterBcConns: true,
peerOpts: {}
}
);
wsProvider.on('status', (event: { status: string }) => {
console.log('[WS] WebSocket status changed:', event.status);
if (event.status === 'connected') {
wsReconnectAttempts = 0;
console.log('[WS] Successfully connected to WebSocket');
} else if (event.status === 'disconnected') {
console.log('[WS] WebSocket disconnected');
if (wsReconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
const delay = getReconnectDelay(wsReconnectAttempts);
console.log(`[WS] Reconnecting in ${delay}ms (attempt ${wsReconnectAttempts + 1})`);
setTimeout(() => {
wsReconnectAttempts++;
try {
wsProvider?.connect();
} catch (error) {
console.error('[WS] Failed to reconnect:', error);
}
}, delay);
} else {
console.error('[WS] Max reconnection attempts reached');
}
}
});
wsProvider.on('connection-error', (error: any) => {
console.error('[WS] Connection error:', error);
});
webrtcProvider.on('synced', (synced: boolean) => {
console.log('[WEBRTC] Synced:', synced);
if (synced) {
webrtcReconnectAttempts = 0;
}
});
webrtcProvider.on('peers', (peers: any) => {
console.log('[WEBRTC] Peers changed:', peers.size, 'peers');
if (peers.size === 0 && webrtcReconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
const delay = getReconnectDelay(webrtcReconnectAttempts);
console.log(`[WEBRTC] No peers, reconnecting in ${delay}ms (attempt ${webrtcReconnectAttempts + 1})`);
setTimeout(() => {
webrtcReconnectAttempts++;
try {
webrtcProvider?.connect();
} catch (error) {
console.error('[WEBRTC] Failed to reconnect:', error);
}
}, delay);
} else if (peers.size > 0) {
webrtcReconnectAttempts = 0;
console.log('[WEBRTC] Connected to', peers.size, 'peers');
}
});
// Periodically collect WebRTC stats
const statsInterval = setInterval(async () => {
if (webrtcProvider && webrtcProvider.room) {
let totalRtt = 0;
let totalBandwidth = 0;
let peerCount = 0;
// Access peers through the room's internal structure
const room = webrtcProvider.room as any;
if (room.peers) {
for (const peer of room.peers.values()) {
try {
if (peer.peerConnection) {
const stats = await peer.peerConnection.getStats();
stats.forEach((report: any) => {
if (report.type === 'remote-inbound-rtp' || report.type === 'inbound-rtp') {
totalRtt += report.roundTripTime || 0;
}
if (report.type === 'outbound-rtp') {
totalBandwidth += report.bytesSent || 0;
}
});
peerCount++;
}
} catch (error) {
console.error('Failed to get WebRTC stats:', error);
}
}
}
if (peerCount > 0) {
connectionMetrics.rtt = totalRtt / peerCount;
connectionMetrics.bandwidth = totalBandwidth;
connectionMetrics.packetLoss = 0; // Would need more complex calculation
connectionMetrics.lastUpdated = Date.now();
}
}
}, 5000);
// Cleanup stats interval on destroy
const originalDestroy = webrtcProvider.destroy;
webrtcProvider.destroy = function() {
clearInterval(statsInterval);
originalDestroy.call(this);
};
return { wsProvider, webrtcProvider };
}
export function destroyProviders() {
wsProvider?.destroy();
webrtcProvider?.destroy();
}
export function createPoll(question: string, createdBy: string): string {
const pollId = crypto.randomUUID();
const poll: Poll = {
id: pollId,
question,
createdBy,
timestamp: Date.now(),
options: []
};
yPolls.set(pollId, poll);
return pollId;
}
export function addOption(pollId: string, text: string, createdBy: string): void {
try {
ydoc.transact(() => {
const poll = yPolls.get(pollId);
if (!poll) {
console.error(`Poll not found: ${pollId}`);
throw new Error('Poll not found');
}
const option: PollOption = {
id: crypto.randomUUID(),
text,
votes: 0,
votedBy: [],
createdBy,
timestamp: Date.now()
};
const updatedPoll = {
...poll,
options: [...poll.options, option]
};
yPolls.set(pollId, updatedPoll);
});
} catch (error) {
console.error('Failed to add option:', error);
throw error;
}
}
export function voteForOption(pollId: string, optionId: string, userId: string): void {
try {
ydoc.transact(() => {
const poll = yPolls.get(pollId);
if (!poll) {
console.error(`Poll not found: ${pollId}`);
throw new Error('Poll not found');
}
const optionIndex = poll.options.findIndex(opt => opt.id === optionId);
if (optionIndex === -1) {
console.error(`Option not found: ${optionId}`);
throw new Error('Option not found');
}
const option = poll.options[optionIndex];
if (option.votedBy.includes(userId)) {
console.log(`User ${userId} already voted for option ${optionId}`);
return;
}
const updatedOption = {
...option,
votes: option.votes + 1,
votedBy: [...option.votedBy, userId]
};
const updatedOptions = [...poll.options];
updatedOptions[optionIndex] = updatedOption;
const updatedPoll = {
...poll,
options: updatedOptions
};
yPolls.set(pollId, updatedPoll);
});
} catch (error) {
console.error('Failed to vote for option:', error);
throw error;
}
}
export function getPolls(): Poll[] {
return Array.from(yPolls.values());
}
export function getPoll(pollId: string): Poll | undefined {
return yPolls.get(pollId);
}

View File

@@ -1,9 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

View File

@@ -1,17 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
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;
}
#root {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

View File

@@ -1,22 +0,0 @@
export interface PollOption {
id: string;
text: string;
votes: number;
votedBy: string[];
createdBy: string;
timestamp: number;
}
export interface Poll {
id: string;
question: string;
createdBy: string;
timestamp: number;
options: PollOption[];
}
export interface ConnectionStatus {
websocket: boolean;
webrtc: boolean;
peers: number;
}

View File

@@ -1,11 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

View File

@@ -1,21 +0,0 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

View File

@@ -1,10 +0,0 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

View File

@@ -1,10 +0,0 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 5173,
host: true
}
})

23
nuxt.config.ts Normal file
View File

@@ -0,0 +1,23 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
devtools: { enabled: true },
vite: {
optimizeDeps: {
include: ['yjs', 'y-webrtc']
}
},
// ... existing config
nitro: {
storage: {
polls: {
driver: 'fs',
base: './.data/polls'
},
users: {
driver: 'fs',
base: './.data/users'
}
}
}
})

10118
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

20
package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "p2p-poll",
"type": "module",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "PORT=4444 npx y-webrtc & nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"nuxt": "^4.1.3",
"uuid": "^13.0.0",
"vue": "^3.5.30",
"vue-router": "^5.0.3",
"y-webrtc": "^10.3.0",
"yjs": "^13.6.30"
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

2
public/robots.txt Normal file
View File

@@ -0,0 +1,2 @@
User-Agent: *
Disallow:

View File

@@ -1,4 +0,0 @@
PORT=3000
YJS_WS_PORT=1234
NODE_ENV=development
CORS_ORIGIN=http://localhost:5173

5
server/.gitignore vendored
View File

@@ -1,5 +0,0 @@
node_modules/
dist/
.env
*.log
.DS_Store

68
server/api/polls/[id].ts Normal file
View File

@@ -0,0 +1,68 @@
import * as Y from 'yjs';
// server/api/polls/[id].ts
export default defineEventHandler(async (event) => {
const method = event.node.req.method;
const pollId = getRouterParam(event, 'id');
// We use Nitro's built-in storage.
// 'polls' is the storage namespace.
const storage = useStorage('polls');
if (!pollId) {
throw createError({ statusCode: 400, statusMessage: 'Poll ID required' });
}
// GET: Fetch the saved Yjs document state
if (method === 'GET') {
const data = await storage.getItem(`poll:${pollId}`);
// Return the array of numbers (or null if it doesn't exist yet)
return { update: data || null };
}
// POST: Save a new Yjs document state
if (method === 'POST') {
const body = await readBody(event);
if (body.update && Array.isArray(body.update)) {
// create a temp Y.Doc to encode the Data
const tempDoc = new Y.Doc();
Y.applyUpdate(tempDoc, new Uint8Array(body.update));
const yMap = tempDoc.getMap('shared-poll');
const pollData = yMap.toJSON();
// verify pollData
for(var option in pollData){
const votes = pollData[option] || [];
var pubKeys: CryptoKey[] = [];
const verifyAllVotesForOption = async (votes: SignedData<VoteData>[]) => {
console.log("verifying votes for option " + option,votes);
// check last votes first. if there is something wrong, its likely in the last vote.
for (let i = votes.length-1; i >= 0 ; i--) {
const userStorage = useStorage('users');
const votePubKeyString = await userStorage.getItem(`user:${votes[i]?.data.userid}`);
//console.log("Using public key: "+votePubKeyString)
const votePubKey = await stringToCryptoKey(String(votePubKeyString),'public')
const isValid = await verifyChainedVote(votes, i,votePubKey);
if(!isValid){
console.error("Error! Invalid Vote at: " + i,votes)
return false;
}
}
return true;
};
const verified = await verifyAllVotesForOption(votes);
if(!verified){
console.error("Failed to verify option: "+option)
throw createError({ statusCode: 400, statusMessage: 'PollData contains unverifyable content!' });
}
}
// Save the binary update (sent as an array of numbers) to storage
await storage.setItem(`poll:${pollId}`, body.update);
return { success: true };
}
throw createError({ statusCode: 400, statusMessage: 'Invalid update payload' });
}
});

View File

@@ -0,0 +1,15 @@
// server/api/polls/index.get.ts
export default defineEventHandler(async () => {
const storage = useStorage('polls');
// Get all keys in the 'polls' namespace
const allKeys = await storage.getKeys();
// Filter for our specific poll prefix and strip it for the UI
// poll:my-id -> my-id
const polls = allKeys
.filter(key => key.startsWith('poll:'))
.map(key => key.replace('poll:', ''));
return { polls };
});

41
server/api/users/[id].ts Normal file
View File

@@ -0,0 +1,41 @@
// server/api/users/[id].ts
export default defineEventHandler(async (event) => {
const method = event.node.req.method;
const userId = getRouterParam(event, 'id');
// We use Nitro's built-in storage.
// 'polls' is the storage namespace.
const storage = useStorage('users');
if (!userId) {
throw createError({ statusCode: 400, statusMessage: 'User ID required' });
}
// GET: Fetch the saved Yjs document state
if (method === 'GET') {
const data = await storage.getItem(`user:${userId}`);
// Return the array of numbers (or null if it doesn't exist yet)
return { public_key: data };
}
// POST: Save a new Yjs document state
if (method === 'POST') {
const body = await readBody(event);
if (body.public_key) {
const data = await storage.getItem(`user:${userId}`);
if (data == undefined || data == null) {
// Save the binary update (sent as an array of numbers) to storage
await storage.setItem(`user:${userId}`, body.public_key);
console.log("New User created: " + userId)
console.log("Public Key: " + body.public_key);
return { success: true };
}
throw createError({ statusCode: 400, statusMessage: 'User already exists.' });
}
throw createError({ statusCode: 400, statusMessage: 'Invalid update payload' });
}
});

2112
server/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,36 +0,0 @@
{
"name": "p2p-poll-server",
"version": "1.0.0",
"description": "Backend server for P2P polling app with Yjs and WebRTC signaling",
"main": "dist/index.js",
"scripts": {
"dev": "tsx watch src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
},
"keywords": [
"yjs",
"websocket",
"webrtc",
"p2p"
],
"author": "",
"license": "MIT",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"ws": "^8.14.2",
"y-websocket": "^1.5.0",
"yjs": "^13.6.8",
"zod": "^4.3.6"
},
"devDependencies": {
"@types/cors": "^2.8.15",
"@types/express": "^4.17.20",
"@types/node": "^20.9.0",
"@types/ws": "^8.5.8",
"tsx": "^4.6.2",
"typescript": "^5.2.2"
}
}

View File

@@ -1,59 +0,0 @@
import express from 'express';
import http from 'http';
import cors from 'cors';
import dotenv from 'dotenv';
import { createYjsServer } from './yjs-server';
import { createSignalingServer } from './signaling-server';
import { logger } from './utils/logger';
dotenv.config();
const app = express();
const PORT = process.env.PORT || 5000;
app.use(cors({
origin: process.env.CORS_ORIGIN || ['http://localhost:5173', 'http://localhost:5174', 'http://localhost:5175'],
credentials: true
}));
app.use(express.json());
app.get('/health', (req, res) => {
res.json({
status: 'ok',
timestamp: new Date().toISOString(),
services: {
yjs: 'running',
signaling: 'running'
}
});
});
app.get('/', (req, res) => {
res.json({
message: 'P2P Poll Server',
endpoints: {
health: '/health',
yjs: 'ws://localhost:' + PORT + '/yjs',
signaling: 'ws://localhost:' + PORT + '/signal'
}
});
});
const server = http.createServer(app);
createYjsServer(server, PORT as number);
createSignalingServer(server);
server.listen(PORT, () => {
logger.info(`Server running on port ${PORT}`);
logger.info(`Yjs WebSocket: ws://localhost:${PORT}/yjs`);
logger.info(`Signaling WebSocket: ws://localhost:${PORT}/signal`);
});
process.on('SIGTERM', () => {
logger.info('SIGTERM signal received: closing HTTP server');
server.close(() => {
logger.info('HTTP server closed');
});
});

View File

@@ -1,305 +0,0 @@
import { WebSocketServer, WebSocket } from 'ws';
import http from 'http';
import { SignalingMessage, SignalingMessageSchema } from './types/poll.types';
import { logger } from './utils/logger';
interface Client {
id: string;
ws: WebSocket;
roomId: string;
lastSeen: number;
messageCount: number;
lastMessageTime: number;
}
export function createSignalingServer(server: http.Server) {
const wss = new WebSocketServer({
noServer: true
});
// Handle upgrade requests for /signal path
server.on('upgrade', (request, socket, head) => {
const pathname = request.url || '';
if (pathname === '/signal' || pathname.startsWith('/signal?')) {
logger.info(`[SIGNALING] Upgrade request for path: ${pathname}`);
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request);
});
}
});
const clients = new Map<string, Client>();
const rooms = new Map<string, Set<string>>();
const roomPasswords = new Map<string, string>();
const HEARTBEAT_INTERVAL = 30000;
const CLIENT_TIMEOUT = 60000;
const RATE_LIMIT_WINDOW = 1000;
const RATE_LIMIT_MAX = 10;
const heartbeatInterval = setInterval(() => {
const now = Date.now();
clients.forEach((client, clientId) => {
if (now - client.lastSeen > CLIENT_TIMEOUT) {
logger.info(`Client ${clientId} timed out, removing...`);
handleClientLeave(clientId);
} else {
client.ws.send(JSON.stringify({ type: 'ping' }));
}
});
}, HEARTBEAT_INTERVAL);
wss.on('connection', (ws: WebSocket) => {
let clientId: string | null = null;
const tempClientId = `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
logger.info(`[SIGNALING] New WebSocket connection (temp: ${tempClientId})`);
ws.on('message', (data: Buffer) => {
try {
const parsed = JSON.parse(data.toString());
const validationResult = SignalingMessageSchema.safeParse(parsed);
if (!validationResult.success) {
logger.error('Invalid signaling message:', validationResult.error);
ws.send(JSON.stringify({
type: 'error',
message: 'Invalid message format',
errors: validationResult.error.issues
}));
return;
}
const message: SignalingMessage = validationResult.data;
if (clientId) {
const client = clients.get(clientId);
if (client) {
const now = Date.now();
if (now - client.lastMessageTime < RATE_LIMIT_WINDOW) {
client.messageCount++;
if (client.messageCount > RATE_LIMIT_MAX) {
logger.warn(`Client ${clientId} exceeded rate limit`);
ws.send(JSON.stringify({
type: 'error',
message: 'Rate limit exceeded'
}));
return;
}
} else {
client.messageCount = 1;
client.lastMessageTime = now;
}
}
}
switch (message.type) {
case 'subscribe':
// y-webrtc subscribe message - client wants to join topics
if (message.topics) {
message.topics.forEach((topic: string) => {
if (!rooms.has(topic)) {
rooms.set(topic, new Set());
}
const tempId = `sub-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
clientId = tempId;
rooms.get(topic)!.add(tempId);
clients.set(tempId, {
id: tempId,
ws,
roomId: topic,
lastSeen: Date.now(),
messageCount: 0,
lastMessageTime: Date.now()
});
logger.info(`[SIGNALING] Client subscribed to topic: ${topic}`);
});
}
break;
case 'unsubscribe':
// y-webrtc unsubscribe message
if (message.topics && clientId) {
message.topics.forEach((topic: string) => {
const room = rooms.get(topic);
if (room && clientId) {
room.delete(clientId);
if (room.size === 0) {
rooms.delete(topic);
}
}
});
}
break;
case 'publish':
// y-webrtc publish message - broadcast to all subscribers of a topic
if (message.topic) {
const topic = message.topic;
const room = rooms.get(topic);
if (room) {
room.forEach((subscriberId) => {
const subscriber = clients.get(subscriberId);
if (subscriber && subscriber.ws !== ws && subscriber.ws.readyState === WebSocket.OPEN) {
subscriber.ws.send(JSON.stringify({
type: 'publish',
topic: topic,
data: message.data
}));
}
});
}
}
break;
case 'join':
clientId = message.from || `client-${Date.now()}`;
const roomId = message.roomId || 'default-room';
const roomPassword = roomPasswords.get(roomId);
if (roomPassword && message.password !== roomPassword) {
logger.warn(`Client ${clientId} failed password authentication for room ${roomId}`);
ws.send(JSON.stringify({
type: 'error',
message: 'Invalid room password'
}));
return;
}
clients.set(clientId, {
id: clientId,
ws,
roomId,
lastSeen: Date.now(),
messageCount: 0,
lastMessageTime: Date.now()
});
if (!rooms.has(roomId)) {
rooms.set(roomId, new Set());
}
rooms.get(roomId)!.add(clientId);
logger.info(`Client ${clientId} joined room ${roomId}`);
const roomClients = Array.from(rooms.get(roomId)!).filter(id => id !== clientId);
ws.send(JSON.stringify({
type: 'peers',
peers: roomClients
}));
roomClients.forEach(peerId => {
const peer = clients.get(peerId);
if (peer && peer.ws.readyState === WebSocket.OPEN) {
peer.ws.send(JSON.stringify({
type: 'peer-joined',
peerId: clientId
}));
}
});
break;
case 'offer':
case 'answer':
case 'ice-candidate':
if (message.to) {
const targetClient = clients.get(message.to);
if (targetClient && targetClient.ws.readyState === WebSocket.OPEN) {
targetClient.ws.send(JSON.stringify({
type: message.type,
from: message.from,
data: message.data
}));
}
}
break;
case 'leave':
if (message.from) {
handleClientLeave(message.from);
}
break;
case 'create-room':
if (message.roomId && message.password) {
roomPasswords.set(message.roomId, message.password);
logger.info(`Room ${message.roomId} created with password protection`);
ws.send(JSON.stringify({
type: 'room-created',
roomId: message.roomId
}));
}
break;
case 'ping':
if (clientId) {
const client = clients.get(clientId);
if (client) {
client.lastSeen = Date.now();
client.ws.send(JSON.stringify({ type: 'pong', from: 'server' }));
}
}
break;
case 'pong':
if (clientId) {
const client = clients.get(clientId);
if (client) {
client.lastSeen = Date.now();
}
}
break;
}
} catch (error) {
logger.error('Error processing signaling message:', error);
}
});
ws.on('close', () => {
if (clientId) {
handleClientLeave(clientId);
}
});
ws.on('error', (error) => {
logger.error('WebSocket error:', error);
});
});
function handleClientLeave(clientId: string) {
const client = clients.get(clientId);
if (client) {
const roomId = client.roomId;
const room = rooms.get(roomId);
if (room) {
room.delete(clientId);
room.forEach(peerId => {
const peer = clients.get(peerId);
if (peer && peer.ws.readyState === WebSocket.OPEN) {
peer.ws.send(JSON.stringify({
type: 'peer-left',
peerId: clientId
}));
}
});
if (room.size === 0) {
rooms.delete(roomId);
}
}
clients.delete(clientId);
logger.info(`Client ${clientId} left room ${roomId}`);
}
}
wss.on('close', () => {
clearInterval(heartbeatInterval);
logger.info('Signaling server closed');
});
logger.info('Signaling server running at path /signal');
return wss;
}

View File

@@ -1,40 +0,0 @@
import { z } from 'zod';
export interface PollOption {
id: string;
text: string;
votes: number;
votedBy: string[];
createdBy: string;
timestamp: number;
}
export interface Poll {
id: string;
question: string;
createdBy: string;
timestamp: number;
options: PollOption[];
}
export const SignalingMessageSchema = z.object({
type: z.enum(['offer', 'answer', 'ice-candidate', 'join', 'leave', 'ping', 'pong', 'create-room', 'subscribe', 'unsubscribe', 'publish', 'signal']),
from: z.string().optional(),
to: z.string().optional(),
data: z.any().optional(),
roomId: z.string().optional(),
password: z.string().optional(),
topics: z.array(z.string()).optional(),
topic: z.string().optional()
});
export interface SignalingMessage {
type: 'offer' | 'answer' | 'ice-candidate' | 'join' | 'leave' | 'ping' | 'pong' | 'create-room' | 'subscribe' | 'unsubscribe' | 'publish' | 'signal';
from?: string;
to?: string;
data?: any;
roomId?: string;
password?: string;
topics?: string[];
topic?: string;
}

View File

@@ -1,115 +0,0 @@
type LogLevel = 'info' | 'error' | 'warn' | 'debug';
type LogContext = Record<string, any>;
interface LogEntry {
timestamp: string;
level: LogLevel;
message: string;
context?: LogContext;
}
class Logger {
private context: LogContext = {};
private timers: Map<string, number> = new Map();
setContext(ctx: LogContext): void {
this.context = { ...this.context, ...ctx };
}
clearContext(): void {
this.context = {};
}
private formatLog(level: LogLevel, message: string, args: any[]): LogEntry {
const entry: LogEntry = {
timestamp: new Date().toISOString(),
level,
message,
context: Object.keys(this.context).length > 0 ? { ...this.context } : undefined
};
if (args.length > 0) {
if (entry.context) {
entry.context.args = args;
} else {
entry.context = { args };
}
}
return entry;
}
private log(level: LogLevel, message: string, ...args: any[]): void {
const entry = this.formatLog(level, message, args);
const logString = JSON.stringify(entry);
switch (level) {
case 'info':
console.log(logString);
break;
case 'error':
console.error(logString);
break;
case 'warn':
console.warn(logString);
break;
case 'debug':
if (process.env.NODE_ENV === 'development') {
console.debug(logString);
}
break;
}
}
info(message: string, ...args: any[]): void {
this.log('info', message, ...args);
}
error(message: string, ...args: any[]): void {
this.log('error', message, ...args);
}
warn(message: string, ...args: any[]): void {
this.log('warn', message, ...args);
}
debug(message: string, ...args: any[]): void {
this.log('debug', message, ...args);
}
startTimer(label: string): void {
this.timers.set(label, Date.now());
}
endTimer(label: string): number {
const startTime = this.timers.get(label);
if (!startTime) {
this.warn(`Timer '${label}' not found`);
return 0;
}
const duration = Date.now() - startTime;
this.timers.delete(label);
this.debug(`Timer '${label}': ${duration}ms`);
return duration;
}
time<T>(label: string, fn: () => T): T {
this.startTimer(label);
try {
return fn();
} finally {
this.endTimer(label);
}
}
async timeAsync<T>(label: string, fn: () => Promise<T>): Promise<T> {
this.startTimer(label);
try {
return await fn();
} finally {
this.endTimer(label);
}
}
}
export const logger = new Logger();

View File

@@ -1,51 +0,0 @@
import { WebSocketServer } from 'ws';
// @ts-ignore
import { setupWSConnection } from 'y-websocket/bin/utils';
import http from 'http';
import { logger } from './utils/logger';
export function createYjsServer(server: http.Server, port: number) {
const wss = new WebSocketServer({
noServer: true
});
// Handle upgrade requests for /yjs/* paths
server.on('upgrade', (request, socket, head) => {
const pathname = request.url || '';
if (pathname.startsWith('/yjs')) {
logger.info(`[YJS] Upgrade request for path: ${pathname}`);
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request);
});
}
});
wss.on('connection', (ws, req) => {
const url = req.url || 'unknown';
const remoteAddress = req.socket.remoteAddress || 'unknown';
logger.info(`[YJS] New connection from ${remoteAddress}, URL: ${url}`);
// Log when connection closes
ws.on('close', () => {
logger.info(`[YJS] Connection closed from ${remoteAddress}`);
});
ws.on('error', (error) => {
logger.error(`[YJS] Connection error from ${remoteAddress}:`, error);
});
// y-websocket automatically handles docName from the URL path
// The room name is passed as part of the URL: /yjs/room-name
// We don't need to manually extract it
setupWSConnection(ws, req, { gc: true });
});
wss.on('error', (error) => {
logger.error('Yjs WebSocket server error:', error);
});
logger.info(`Yjs WebSocket server running on port ${port} at path /yjs`);
return wss;
}

View File

@@ -1,20 +0,0 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2020"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"moduleResolution": "node",
"declaration": true,
"declarationMap": true,
"sourceMap": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}

86
server/utils/crypto.ts Normal file
View File

@@ -0,0 +1,86 @@
import { SignedData, VoteData } from "./types";
/**
* Gets the WebCrypto API regardless of environment (Node vs Browser)
*/
const getCrypto = () => {
return (globalThis as any).crypto;
};
export const verifyVote = async (data: any, signatureStr: string, publicKey: CryptoKey) => {
const encoder = new TextEncoder();
const encodedData = encoder.encode(JSON.stringify(data));
// Convert Base64 back to Uint8Array
const signature = Uint8Array.from(atob(signatureStr), c => c.charCodeAt(0));
return await getCrypto().subtle.verify(
"RSASSA-PKCS1-v1_5",
publicKey,
signature,
encodedData
);
};
/**
* Verifies a specific vote within an array of votes by
* reconstructing the "signed state" at that point in time.
*/
export const verifyChainedVote = async (
voteData: SignedData<VoteData>[],
index: number,
pubKey: CryptoKey
) => {
const voteToVerify = voteData[index];
console.log("Verifying vote: " + voteToVerify)
if(voteToVerify) {
// 1. Reconstruct the exact data state the user signed
// We need the array exactly as it was when they pushed their vote
const historicalState = voteData.slice(0, index + 1).map((v, i) => {
if (i === index) {
// For the current vote, the signature must be empty string
// because it wasn't signed yet when passed to signVote
return { ...v, signature: "" };
}
return v;
});
try {
// 3. Verify: Does this historicalState match the signature?
return await verifyVote(historicalState, voteToVerify.signature, pubKey);
} catch (err) {
console.error("Verification failed")
console.error(err);
return false;
}
}
console.error("Vote is undefined or null");
return false;
};
/**
* Converts a Base64 string back into a usable CryptoKey object
* @param keyStr The Base64 string (without PEM headers)
* @param type 'public' or 'private'
*/
export const stringToCryptoKey = async (keyStr: string, type: 'public' | 'private'): Promise<CryptoKey> => {
// 1. Convert Base64 string to a Uint8Array (binary)
const bytes = Buffer.from(keyStr, 'base64');
// 2. Identify the format based on the key type
// Public keys usually use 'spki', Private keys use 'pkcs8'
const format = type === 'public' ? 'spki' : 'pkcs8';
const usages: KeyUsage[] = type === 'public' ? ['verify'] : ['sign'];
// 3. Import the key
return await getCrypto().subtle.importKey(
format,
bytes,
{
name: "RSASSA-PKCS1-v1_5",
hash: "SHA-256",
},
true, // extractable (set to false if you want to lock it in memory)
usages
);
};

36
server/utils/types.ts Normal file
View File

@@ -0,0 +1,36 @@
export interface PollProps {
userid: string | undefined,
activePollId: string,
pollData: PollData,
addOption: (name: string) => void,
vote: (optionName: string) => void
}
export interface PollListProps {
userid: string | undefined,
}
export interface PollData extends Record<string, SignedData<VoteData>[]> {
}
export interface SignedData<T> {
data: T,
signature: string
}
export interface VoteData {
userid: string,
timestamp: string
}
export interface OptionData {
userid: string,
timestamp: string,
optionName: string
}
export interface UserData {
userid: string,
private_key: CryptoKey | undefined,
public_key: CryptoKey | undefined
}

18
tsconfig.json Normal file
View File

@@ -0,0 +1,18 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"files": [],
"references": [
{
"path": "./.nuxt/tsconfig.app.json"
},
{
"path": "./.nuxt/tsconfig.server.json"
},
{
"path": "./.nuxt/tsconfig.shared.json"
},
{
"path": "./.nuxt/tsconfig.node.json"
}
]
}