Compare commits
1 Commits
group-7781
...
proposal-5
| Author | SHA1 | Date | |
|---|---|---|---|
| c02f1cfb4c |
200
PollingApp.html
Normal file
200
PollingApp.html
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Peer‑to‑Peer Poll – up to 14 users (no vote loops)</title>
|
||||||
|
<style>
|
||||||
|
body {font-family:Arial,Helvetica,sans-serif; margin:20px;}
|
||||||
|
#options li {margin:5px 0;}
|
||||||
|
button {margin-left:5px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Peer‑to‑Peer Poll (max 14 participants)</h2>
|
||||||
|
|
||||||
|
<div id="setup">
|
||||||
|
<label>Your Peer ID: <input id="myId" readonly size="30"></label><br><br>
|
||||||
|
<label>Room host ID (leave empty if you are the first client):
|
||||||
|
<input id="hostId" placeholder="host peer id">
|
||||||
|
</label>
|
||||||
|
<button id="joinBtn">Join / Create Room</button>
|
||||||
|
<p id="status"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3>Poll</h3>
|
||||||
|
<ul id="options"></ul>
|
||||||
|
|
||||||
|
<input id="newOption" placeholder="New option text">
|
||||||
|
<button id="addOptionBtn">Add option</button>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
|
||||||
|
<script>
|
||||||
|
/* ---------- 1. Initialise PeerJS ---------- */
|
||||||
|
const peer = new Peer(); // public signalling server
|
||||||
|
const myIdInput = document.getElementById('myId');
|
||||||
|
const statusEl = document.getElementById('status');
|
||||||
|
|
||||||
|
let isHost = false; // true for the first client
|
||||||
|
let connections = []; // all open DataConnections
|
||||||
|
let knownPeers = new Set(); // IDs of every peer we know (including host)
|
||||||
|
|
||||||
|
peer.on('open', id => {
|
||||||
|
myIdInput.value = id;
|
||||||
|
statusEl.textContent = 'Enter a host ID (or leave empty) and click Join.';
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- 2. Accept incoming connections (host side) ---------- */
|
||||||
|
peer.on('connection', incoming => {
|
||||||
|
registerConnection(incoming);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- 3. Join / create a room ---------- */
|
||||||
|
document.getElementById('joinBtn').onclick = () => {
|
||||||
|
const hostId = document.getElementById('hostId').value.trim();
|
||||||
|
if (hostId) {
|
||||||
|
isHost = false;
|
||||||
|
connectToPeer(hostId);
|
||||||
|
statusEl.textContent = `Connecting to host ${hostId}…`;
|
||||||
|
} else {
|
||||||
|
isHost = true;
|
||||||
|
knownPeers.add(peer.id);
|
||||||
|
statusEl.textContent = 'Room created – share this Peer ID with others.';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------- 4. Helper: connect to a remote peer ---------- */
|
||||||
|
function connectToPeer(peerId) {
|
||||||
|
if (knownPeers.has(peerId)) return;
|
||||||
|
const conn = peer.connect(peerId);
|
||||||
|
registerConnection(conn);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 5. Register a DataConnection ---------- */
|
||||||
|
function registerConnection(conn) {
|
||||||
|
if (!conn) return;
|
||||||
|
connections.push(conn);
|
||||||
|
knownPeers.add(conn.peer);
|
||||||
|
|
||||||
|
conn.on('open', () => {
|
||||||
|
// 1️⃣ Send full poll state
|
||||||
|
conn.send({type: 'full', payload: poll, msgId: crypto.randomUUID()});
|
||||||
|
|
||||||
|
// 2️⃣ If we are the host, tell the newcomer about other peers
|
||||||
|
if (isHost) {
|
||||||
|
const others = Array.from(knownPeers).filter(id => id !== conn.peer && id !== peer.id);
|
||||||
|
if (others.length) conn.send({type: 'peer-list', payload: others, msgId: crypto.randomUUID()});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
conn.on('data', data => handleMessage(data, conn.peer));
|
||||||
|
conn.on('close', () => {
|
||||||
|
connections = connections.filter(c => c !== conn);
|
||||||
|
knownPeers.delete(conn.peer);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 6. Shared poll state ---------- */
|
||||||
|
let poll = {options: []}; // each option: {id, text, votes}
|
||||||
|
|
||||||
|
/* ---------- 7. Track my own votes ---------- */
|
||||||
|
const myVotes = new Set(); // option.id values
|
||||||
|
|
||||||
|
/* ---------- 8. Remember which messages we already processed ---------- */
|
||||||
|
const seenMsgIds = new Set();
|
||||||
|
|
||||||
|
/* ---------- 9. Broadcast helper (skip the sender) ---------- */
|
||||||
|
function broadcast(msg, except = null) {
|
||||||
|
connections.forEach(c => {
|
||||||
|
if (c.open && c.peer !== except) c.send(msg);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 10. Message handling ---------- */
|
||||||
|
function handleMessage(msg, senderId) {
|
||||||
|
// Ignore duplicates
|
||||||
|
if (seenMsgIds.has(msg.msgId)) return;
|
||||||
|
seenMsgIds.add(msg.msgId);
|
||||||
|
|
||||||
|
switch (msg.type) {
|
||||||
|
case 'full':
|
||||||
|
poll = msg.payload;
|
||||||
|
render();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'add':
|
||||||
|
poll.options.push(msg.payload);
|
||||||
|
render();
|
||||||
|
broadcast(msg, senderId); // forward once
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'vote':
|
||||||
|
const opt = poll.options.find(o => o.id === msg.payload.id);
|
||||||
|
if (opt) opt.votes++;
|
||||||
|
render();
|
||||||
|
broadcast(msg, senderId);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'peer-list':
|
||||||
|
msg.payload.forEach(id => {
|
||||||
|
if (id !== peer.id && !knownPeers.has(id)) connectToPeer(id);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 11. UI rendering ---------- */
|
||||||
|
function render() {
|
||||||
|
const ul = document.getElementById('options');
|
||||||
|
ul.innerHTML = '';
|
||||||
|
poll.options.forEach(opt => {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.textContent = `${opt.text} – ${opt.votes} vote(s)`;
|
||||||
|
|
||||||
|
const btn = document.createElement('button');
|
||||||
|
btn.textContent = myVotes.has(opt.id) ? 'Voted' : 'Vote';
|
||||||
|
btn.disabled = myVotes.has(opt.id);
|
||||||
|
btn.onclick = () => {
|
||||||
|
// Record locally – prevents double‑click on the same client
|
||||||
|
myVotes.add(opt.id);
|
||||||
|
btn.textContent = 'Voted';
|
||||||
|
btn.disabled = true;
|
||||||
|
|
||||||
|
const voteMsg = {
|
||||||
|
type: 'vote',
|
||||||
|
payload: {id: opt.id},
|
||||||
|
msgId: crypto.randomUUID()
|
||||||
|
};
|
||||||
|
// Apply locally first
|
||||||
|
opt.votes++;
|
||||||
|
render();
|
||||||
|
// Send to all peers
|
||||||
|
broadcast(voteMsg);
|
||||||
|
};
|
||||||
|
li.appendChild(btn);
|
||||||
|
ul.appendChild(li);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 12. Add new option ---------- */
|
||||||
|
document.getElementById('addOptionBtn').onclick = () => {
|
||||||
|
const txt = document.getElementById('newOption').value.trim();
|
||||||
|
if (!txt) return;
|
||||||
|
const option = {id: crypto.randomUUID(), text: txt, votes: 0};
|
||||||
|
poll.options.push(option);
|
||||||
|
render();
|
||||||
|
|
||||||
|
const addMsg = {
|
||||||
|
type: 'add',
|
||||||
|
payload: option,
|
||||||
|
msgId: crypto.randomUUID()
|
||||||
|
};
|
||||||
|
broadcast(addMsg);
|
||||||
|
document.getElementById('newOption').value = '';
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
280
README.md
280
README.md
@@ -1,279 +1,7 @@
|
|||||||
# P2P Poll App
|
# P2P Poll App
|
||||||
|
|
||||||
A peer-to-peer polling application built with React, TypeScript, Tailwind CSS, Node.js, Yjs, and WebSocket for real-time collaborative voting.
|
This is a very simple polling app using peerjs.
|
||||||
|
It runs as a single HTML file and can handle multiple users in one poll room.
|
||||||
|
The app once open is self explanatory.
|
||||||
|
App created with the help of GPTOSS120B.
|
||||||
|
|
||||||
**Users can create polls, add answers, and vote in real-time with automatic P2P synchronization across all connected clients.**
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
**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
|
|
||||||
|
|
||||||
**Backend:**
|
|
||||||
- Node.js + TypeScript
|
|
||||||
- Express.js
|
|
||||||
- WebSocket (ws)
|
|
||||||
- y-websocket (Yjs WebSocket provider)
|
|
||||||
- CORS support
|
|
||||||
|
|
||||||
**Frontend:**
|
|
||||||
- React 18 + TypeScript
|
|
||||||
- Vite (build tool)
|
|
||||||
- Tailwind CSS
|
|
||||||
- Yjs (CRDT library)
|
|
||||||
- y-websocket (server sync)
|
|
||||||
- y-webrtc (P2P sync)
|
|
||||||
- lucide-react (icons)
|
|
||||||
|
|
||||||
## Project Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
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
|
|
||||||
```
|
|
||||||
|
|
||||||
## Setup Instructions
|
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
- Node.js 18+ and npm
|
|
||||||
|
|
||||||
### Backend Setup
|
|
||||||
|
|
||||||
1. Navigate to server directory:
|
|
||||||
```bash
|
|
||||||
cd server
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Install dependencies:
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Copy environment file:
|
|
||||||
```bash
|
|
||||||
cp .env.example .env
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Start the development server:
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
The server will run on `http://localhost:3000` with:
|
|
||||||
- Yjs WebSocket: `ws://localhost:3000/yjs`
|
|
||||||
- Signaling WebSocket: `ws://localhost:3000/signal`
|
|
||||||
|
|
||||||
### Frontend Setup
|
|
||||||
|
|
||||||
1. Navigate to frontend directory:
|
|
||||||
```bash
|
|
||||||
cd frontend
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Install dependencies:
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
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
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
VITE_WS_URL=ws://localhost:3000
|
|
||||||
6
frontend/.gitignore
vendored
6
frontend/.gitignore
vendored
@@ -1,6 +0,0 @@
|
|||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
.env
|
|
||||||
.DS_Store
|
|
||||||
@@ -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>
|
|
||||||
4857
frontend/package-lock.json
generated
4857
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { PollView } from './components/PollView';
|
|
||||||
import './styles/index.css';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return <PollView />;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,44 +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(() => {
|
|
||||||
const { wsProvider: ws } = initializeProviders();
|
|
||||||
|
|
||||||
const updatePolls = () => {
|
|
||||||
setPolls([...yPolls.toArray()]);
|
|
||||||
};
|
|
||||||
|
|
||||||
yPolls.observe(updatePolls);
|
|
||||||
updatePolls();
|
|
||||||
|
|
||||||
const handleStatus = (event: { status: string }) => {
|
|
||||||
setIsConnected(event.status === 'connected');
|
|
||||||
};
|
|
||||||
|
|
||||||
ws?.on('status', handleStatus);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
yPolls.unobserve(updatePolls);
|
|
||||||
ws?.off('status', handleStatus);
|
|
||||||
destroyProviders();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return {
|
|
||||||
polls,
|
|
||||||
isConnected,
|
|
||||||
wsProvider,
|
|
||||||
webrtcProvider
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -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();
|
|
||||||
@@ -1,133 +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:3000';
|
|
||||||
const ROOM_NAME = 'default-poll';
|
|
||||||
|
|
||||||
export const ydoc = new Y.Doc();
|
|
||||||
|
|
||||||
export const yPolls = ydoc.getArray<Poll>('polls');
|
|
||||||
|
|
||||||
export let wsProvider: WebsocketProvider | null = null;
|
|
||||||
export let webrtcProvider: WebrtcProvider | null = null;
|
|
||||||
|
|
||||||
export function initializeProviders() {
|
|
||||||
wsProvider = new WebsocketProvider(
|
|
||||||
WS_URL + '/yjs',
|
|
||||||
ROOM_NAME,
|
|
||||||
ydoc,
|
|
||||||
{ connect: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
webrtcProvider = new WebrtcProvider(
|
|
||||||
ROOM_NAME,
|
|
||||||
ydoc,
|
|
||||||
{
|
|
||||||
signaling: [WS_URL.replace('ws://', 'wss://').replace('http://', 'https://') + '/signal'],
|
|
||||||
password: null,
|
|
||||||
awareness: wsProvider.awareness,
|
|
||||||
maxConns: 20,
|
|
||||||
filterBcConns: true,
|
|
||||||
peerOpts: {}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
wsProvider.on('status', (event: { status: string }) => {
|
|
||||||
console.log('WebSocket status:', event.status);
|
|
||||||
});
|
|
||||||
|
|
||||||
webrtcProvider.on('synced', (synced: boolean) => {
|
|
||||||
console.log('WebRTC synced:', synced);
|
|
||||||
});
|
|
||||||
|
|
||||||
return { wsProvider, webrtcProvider };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function destroyProviders() {
|
|
||||||
wsProvider?.destroy();
|
|
||||||
webrtcProvider?.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createPoll(question: string, createdBy: string): string {
|
|
||||||
const pollId = Math.random().toString(36).substr(2, 9);
|
|
||||||
const poll: Poll = {
|
|
||||||
id: pollId,
|
|
||||||
question,
|
|
||||||
createdBy,
|
|
||||||
timestamp: Date.now(),
|
|
||||||
options: []
|
|
||||||
};
|
|
||||||
|
|
||||||
yPolls.push([poll]);
|
|
||||||
return pollId;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addOption(pollId: string, text: string, createdBy: string): void {
|
|
||||||
const polls = yPolls.toArray();
|
|
||||||
const pollIndex = polls.findIndex(p => p.id === pollId);
|
|
||||||
|
|
||||||
if (pollIndex !== -1) {
|
|
||||||
const poll = polls[pollIndex];
|
|
||||||
const option: PollOption = {
|
|
||||||
id: Math.random().toString(36).substr(2, 9),
|
|
||||||
text,
|
|
||||||
votes: 0,
|
|
||||||
votedBy: [],
|
|
||||||
createdBy,
|
|
||||||
timestamp: Date.now()
|
|
||||||
};
|
|
||||||
|
|
||||||
const updatedPoll = {
|
|
||||||
...poll,
|
|
||||||
options: [...poll.options, option]
|
|
||||||
};
|
|
||||||
|
|
||||||
yPolls.delete(pollIndex, 1);
|
|
||||||
yPolls.insert(pollIndex, [updatedPoll]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function voteForOption(pollId: string, optionId: string, userId: string): void {
|
|
||||||
const polls = yPolls.toArray();
|
|
||||||
const pollIndex = polls.findIndex(p => p.id === pollId);
|
|
||||||
|
|
||||||
if (pollIndex !== -1) {
|
|
||||||
const poll = polls[pollIndex];
|
|
||||||
const optionIndex = poll.options.findIndex(opt => opt.id === optionId);
|
|
||||||
|
|
||||||
if (optionIndex !== -1) {
|
|
||||||
const option = poll.options[optionIndex];
|
|
||||||
|
|
||||||
if (option.votedBy.includes(userId)) {
|
|
||||||
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.delete(pollIndex, 1);
|
|
||||||
yPolls.insert(pollIndex, [updatedPoll]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPolls(): Poll[] {
|
|
||||||
return yPolls.toArray();
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPoll(pollId: string): Poll | undefined {
|
|
||||||
return yPolls.toArray().find(p => p.id === pollId);
|
|
||||||
}
|
|
||||||
@@ -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>,
|
|
||||||
);
|
|
||||||
@@ -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%);
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
content: [
|
|
||||||
"./index.html",
|
|
||||||
"./src/**/*.{js,ts,jsx,tsx}",
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
@@ -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" }]
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"composite": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowSyntheticDefaultImports": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import react from '@vitejs/plugin-react'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
server: {
|
|
||||||
port: 5173,
|
|
||||||
host: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
PORT=3000
|
|
||||||
YJS_WS_PORT=1234
|
|
||||||
NODE_ENV=development
|
|
||||||
CORS_ORIGIN=http://localhost:5173
|
|
||||||
5
server/.gitignore
vendored
5
server/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
node_modules/
|
|
||||||
dist/
|
|
||||||
.env
|
|
||||||
*.log
|
|
||||||
.DS_Store
|
|
||||||
2102
server/package-lock.json
generated
2102
server/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,30 +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": {
|
|
||||||
"express": "^4.18.2",
|
|
||||||
"ws": "^8.14.2",
|
|
||||||
"y-websocket": "^1.5.0",
|
|
||||||
"yjs": "^13.6.8",
|
|
||||||
"cors": "^2.8.5",
|
|
||||||
"dotenv": "^16.3.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/express": "^4.17.20",
|
|
||||||
"@types/ws": "^8.5.8",
|
|
||||||
"@types/cors": "^2.8.15",
|
|
||||||
"@types/node": "^20.9.0",
|
|
||||||
"tsx": "^4.6.2",
|
|
||||||
"typescript": "^5.2.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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 || 3000;
|
|
||||||
|
|
||||||
app.use(cors({
|
|
||||||
origin: process.env.CORS_ORIGIN || 'http://localhost:5173',
|
|
||||||
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');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
import { WebSocketServer, WebSocket } from 'ws';
|
|
||||||
import http from 'http';
|
|
||||||
import { SignalingMessage } from './types/poll.types';
|
|
||||||
import { logger } from './utils/logger';
|
|
||||||
|
|
||||||
interface Client {
|
|
||||||
id: string;
|
|
||||||
ws: WebSocket;
|
|
||||||
roomId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createSignalingServer(server: http.Server) {
|
|
||||||
const wss = new WebSocketServer({
|
|
||||||
server,
|
|
||||||
path: '/signal'
|
|
||||||
});
|
|
||||||
|
|
||||||
const clients = new Map<string, Client>();
|
|
||||||
const rooms = new Map<string, Set<string>>();
|
|
||||||
|
|
||||||
wss.on('connection', (ws: WebSocket) => {
|
|
||||||
let clientId: string | null = null;
|
|
||||||
|
|
||||||
ws.on('message', (data: Buffer) => {
|
|
||||||
try {
|
|
||||||
const message: SignalingMessage = JSON.parse(data.toString());
|
|
||||||
|
|
||||||
switch (message.type) {
|
|
||||||
case 'join':
|
|
||||||
clientId = message.from;
|
|
||||||
const roomId = message.roomId || 'default-room';
|
|
||||||
|
|
||||||
clients.set(clientId, { id: clientId, ws, roomId });
|
|
||||||
|
|
||||||
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':
|
|
||||||
handleClientLeave(message.from);
|
|
||||||
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}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.info('Signaling server running at path /signal');
|
|
||||||
|
|
||||||
return wss;
|
|
||||||
}
|
|
||||||
@@ -1,24 +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 SignalingMessage {
|
|
||||||
type: 'offer' | 'answer' | 'ice-candidate' | 'join' | 'leave';
|
|
||||||
from: string;
|
|
||||||
to?: string;
|
|
||||||
data?: any;
|
|
||||||
roomId?: string;
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
export const logger = {
|
|
||||||
info: (message: string, ...args: any[]) => {
|
|
||||||
console.log(`[INFO] ${new Date().toISOString()} - ${message}`, ...args);
|
|
||||||
},
|
|
||||||
error: (message: string, ...args: any[]) => {
|
|
||||||
console.error(`[ERROR] ${new Date().toISOString()} - ${message}`, ...args);
|
|
||||||
},
|
|
||||||
warn: (message: string, ...args: any[]) => {
|
|
||||||
console.warn(`[WARN] ${new Date().toISOString()} - ${message}`, ...args);
|
|
||||||
},
|
|
||||||
debug: (message: string, ...args: any[]) => {
|
|
||||||
if (process.env.NODE_ENV === 'development') {
|
|
||||||
console.debug(`[DEBUG] ${new Date().toISOString()} - ${message}`, ...args);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import { WebSocketServer } from 'ws';
|
|
||||||
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({
|
|
||||||
server,
|
|
||||||
path: '/yjs'
|
|
||||||
});
|
|
||||||
|
|
||||||
wss.on('connection', (ws, req) => {
|
|
||||||
const docName = req.url?.split('?')[1]?.split('=')[1] || 'default-poll';
|
|
||||||
logger.info(`New Yjs connection for document: ${docName}`);
|
|
||||||
|
|
||||||
setupWSConnection(ws, req, { docName });
|
|
||||||
});
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@@ -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"]
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user