259 lines
15 KiB
TypeScript
259 lines
15 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import UDPHolePunchingDiagram from '@/components/diagrams/UDPHolePunchingDiagram';
|
|
import NATTraversalDiagram from '@/components/diagrams/NATTraversalDiagram';
|
|
import PeerDiscoveryDiagram from '@/components/diagrams/PeerDiscoveryDiagram';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'How P2P Works - Understanding Peer-to-Peer Networking',
|
|
description: 'Learn about peer-to-peer networking, UDP hole-punching, NAT traversal, and how P2NS uses these technologies.',
|
|
keywords: ['P2P networking', 'peer-to-peer', 'UDP hole-punching', 'NAT traversal', 'Hyperswarm', 'DHT', 'Corestore', 'P2P explained'],
|
|
authors: [{ name: 'Raven Scott' }],
|
|
openGraph: {
|
|
title: 'How P2P Works - Understanding Peer-to-Peer Networking',
|
|
description: 'Learn about peer-to-peer networking, UDP hole-punching, NAT traversal, and how P2NS uses these technologies.',
|
|
url: 'https://p2ns.space/learn/p2p',
|
|
siteName: 'P2NS',
|
|
type: 'website',
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: 'How P2P Works - Understanding Peer-to-Peer Networking',
|
|
description: 'Learn about peer-to-peer networking, UDP hole-punching, NAT traversal, and how P2NS uses these technologies.',
|
|
},
|
|
alternates: {
|
|
canonical: 'https://p2ns.space/learn/p2p',
|
|
},
|
|
};
|
|
|
|
export default function P2PPage() {
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Introduction */}
|
|
<section className="py-20 bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
|
Understanding Peer-to-Peer Networking
|
|
</h1>
|
|
<p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed mb-8">
|
|
Peer-to-peer (P2P) networking is a distributed architecture where participants (peers) share resources
|
|
and communicate directly without relying on a central server. P2NS leverages P2P technology to create
|
|
a resilient, decentralized DNS system.
|
|
</p>
|
|
<div className="bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 p-4 rounded">
|
|
<p className="text-sm text-blue-800 dark:text-blue-200">
|
|
<strong>Key Concept:</strong> In a P2P network, each node can act as both a client and a server,
|
|
enabling direct communication and resource sharing between peers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* UDP Hole Punching */}
|
|
<section className="py-20 bg-white dark:bg-gray-900">
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
UDP Hole Punching
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
|
|
UDP hole-punching lets two peers behind NAT establish a direct path. In the Holepunch stack
|
|
(used by Hyperswarm and Holesail), peers coordinate through <strong>HyperDHT</strong>—a distributed
|
|
hash table—not a single central rendezvous server. When both sides use predictable NAT ports,
|
|
most sessions connect directly; symmetric NAT or blocked UDP may fall back to encrypted relays.
|
|
</p>
|
|
|
|
<UDPHolePunchingDiagram />
|
|
|
|
<div className="mt-8 prose prose-lg dark:prose-invert max-w-none">
|
|
<h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">How It Works</h3>
|
|
<ol className="list-decimal pl-6 space-y-3 text-gray-600 dark:text-gray-300">
|
|
<li>
|
|
<strong>Announce on the DHT:</strong> Each peer registers its public endpoints with HyperDHT
|
|
under its cryptographic identity.
|
|
</li>
|
|
<li>
|
|
<strong>Signaling through the DHT:</strong> When Alice wants Bob, the DHT routes a connect
|
|
intent so both sides learn each other's public IP and port.
|
|
</li>
|
|
<li>
|
|
<strong>Simultaneous UDP probes:</strong> Both peers send UDP packets to each other's
|
|
public endpoints at the same time (often via libudx).
|
|
</li>
|
|
<li>
|
|
<strong>NAT creates a "hole":</strong> Outgoing packets open a temporary mapping so
|
|
return traffic from that peer can pass through the firewall.
|
|
</li>
|
|
<li>
|
|
<strong>Direct path or relay:</strong> On success, peers talk directly; if hole-punching fails
|
|
(e.g. symmetric NAT on both sides), Hyperswarm can route through blind relays that only see
|
|
encrypted Noise traffic (~85% of connections succeed with hole punching in typical conditions).
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* NAT Traversal */}
|
|
<section className="py-20 bg-gray-50 dark:bg-gray-800">
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
NAT Traversal
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
|
|
Network Address Translation (NAT) is used by routers to share a single public IP address among multiple
|
|
devices. NAT traversal techniques allow P2P connections to work through these devices.
|
|
</p>
|
|
|
|
<NATTraversalDiagram />
|
|
|
|
<div className="mt-8 grid md:grid-cols-2 gap-6">
|
|
<div className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Types of NAT</h3>
|
|
<ul className="space-y-2 text-gray-600 dark:text-gray-300">
|
|
<li><strong>Open NAT:</strong> Predictable mapping—hole punching usually works.</li>
|
|
<li><strong>Consistent NAT:</strong> Same external port per internal port—still punchable with coordination.</li>
|
|
<li><strong>Random / symmetric NAT:</strong> Unpredictable external ports—often needs a relay fallback.</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">CGNAT Challenges</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-3">
|
|
Carrier-Grade NAT (CGNAT) adds an additional layer of NAT, making traversal even more complex.
|
|
P2NS uses Holesail, which is specifically designed to handle these challenging scenarios.
|
|
</p>
|
|
<p className="text-gray-600 dark:text-gray-300">
|
|
Holesail implements advanced techniques including:
|
|
</p>
|
|
<ul className="list-disc pl-6 mt-2 text-gray-600 dark:text-gray-300">
|
|
<li>Multiple simultaneous connection attempts</li>
|
|
<li>Protocol-specific optimizations</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Peer Discovery */}
|
|
<section className="py-20 bg-white dark:bg-gray-900">
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Peer Discovery with Hyperswarm
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
|
|
Hyperswarm is a high-level API on top of <strong>HyperDHT</strong> (Kademlia-style DHT). Peers
|
|
announce and discover each other by 32-byte topics without a central directory server.
|
|
</p>
|
|
|
|
<PeerDiscoveryDiagram />
|
|
|
|
<div className="mt-8 prose prose-lg dark:prose-invert max-w-none">
|
|
<h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">How Hyperswarm Works</h3>
|
|
<div className="space-y-4 text-gray-600 dark:text-gray-300">
|
|
<p>
|
|
<strong>Topic-based discovery:</strong> P2NS hashes <code className="bg-gray-800 dark:bg-gray-700 text-gray-100 dark:text-gray-200 px-1.5 py-0.5 rounded">TOPIC_SEED</code> (default <code className="bg-gray-800 dark:bg-gray-700 text-gray-100 dark:text-gray-200 px-1.5 py-0.5 rounded">p2ns-dns</code>) with SHA-256 to form a 32-byte topic. Every node interested in the network joins that topic.
|
|
</p>
|
|
<p>
|
|
<strong>DHT lookup:</strong> HyperDHT returns peers that have announced on the topic. DHT results are candidates only—each connection still completes a Noise XX handshake so the remote party must prove key ownership.
|
|
</p>
|
|
<p>
|
|
<strong>Connection establishment:</strong> Hyperswarm coordinates UDP hole punching (and relay fallback when needed), then runs encrypted streams for Core RPC and plugin traffic.
|
|
</p>
|
|
<p>
|
|
<strong>Automatic Reconnection:</strong> Hyperswarm automatically handles peer churn, reconnecting
|
|
when peers go offline and come back online.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Holepunch stack */}
|
|
<section className="py-20 bg-gray-50 dark:bg-gray-800">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
The Holepunch Connection Stack
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 mb-6">
|
|
P2NS uses the Holepunch stack in layers: raw UDP paths, then encryption, then application protocols.
|
|
</p>
|
|
<ol className="list-decimal pl-6 space-y-2 text-gray-600 dark:text-gray-300">
|
|
<li><strong>libudx</strong> — reliable UDP between peers after hole punching</li>
|
|
<li><strong>Secret Stream (Noise XX)</strong> — mutual authentication and XChaCha20-Poly1305 encryption</li>
|
|
<li><strong>Protomux / protomux-rpc</strong> — multiplexed channels for core invites, consensus, and plugins</li>
|
|
<li><strong>Hypercore / Corestore</strong> — append-only, Merkle-verified logs for DNS state</li>
|
|
</ol>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
|
|
Domain tunnels use <strong>Holesail</strong> (separate hashes on the DHT) for reaching services behind NAT; the P2NS swarm topic is only for DNS peer sync.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Corestore & Autopass */}
|
|
<section className="py-20 bg-white dark:bg-gray-900">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Decentralized Storage & Security
|
|
</h2>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Corestore</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-3">
|
|
Corestore manages Hypercore append-only logs. Each block is Merkle-linked and signed with Ed25519,
|
|
so peers verify data by proof—not by trusting who delivered it. P2NS stores domain claims and votes in this replicated log.
|
|
</p>
|
|
<ul className="list-disc pl-6 space-y-1 text-gray-600 dark:text-gray-300">
|
|
<li>Immutable append-only history</li>
|
|
<li>Sparse replication of blocks</li>
|
|
<li>Automatic sync across peers</li>
|
|
<li>Domain conflicts resolved by peer voting (not Autobase)</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Autopass</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-3">
|
|
Autopass manages secure writer additions to the Corestore. It ensures only authorized peers can
|
|
write to the ledger, preventing spam and attacks.
|
|
</p>
|
|
<ul className="list-disc pl-6 space-y-1 text-gray-600 dark:text-gray-300">
|
|
<li>Invitation-based access control</li>
|
|
<li>Master nodes issue invites</li>
|
|
<li>Cryptographic verification</li>
|
|
<li>Prevents unauthorized writes</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Glossary */}
|
|
<section className="py-20 bg-white dark:bg-gray-900">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
|
|
Glossary
|
|
</h2>
|
|
<dl className="space-y-6">
|
|
{[
|
|
{ term: 'NAT (Network Address Translation)', definition: 'A method of remapping IP addresses, allowing multiple devices to share a single public IP address.' },
|
|
{ term: 'CGNAT (Carrier-Grade NAT)', definition: 'A large-scale NAT implementation used by ISPs to conserve IPv4 addresses, adding complexity to P2P connections.' },
|
|
{ term: 'UDP Hole Punching', definition: 'A technique that allows two peers behind NAT devices to establish a direct connection by coordinating simultaneous UDP probes, usually signaled over HyperDHT.' },
|
|
{ term: 'HyperDHT', definition: 'The Kademlia DHT used by Hyperswarm for peer announcements, lookups, and hole-punch coordination—distributed, not a single rendezvous server.' },
|
|
{ term: 'DHT (Distributed Hash Table)', definition: 'A decentralized key-value store that allows peers to find each other without a central directory.' },
|
|
{ term: 'Peer Discovery', definition: 'The process of finding other peers in a P2P network, typically using DHT topics (as P2NS does on Hyperswarm).' },
|
|
{ term: 'Consensus', definition: 'In P2NS, agreement on domain ownership through voting on claims in the shared Corestore log (distinct from Autobase-style multi-writer ordering).' },
|
|
].map((item) => (
|
|
<div key={item.term} className="border-l-4 border-blue-500 pl-4">
|
|
<dt className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
|
{item.term}
|
|
</dt>
|
|
<dd className="text-gray-600 dark:text-gray-300">
|
|
{item.definition}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|