update readme

This commit is contained in:
Daniel N
2023-04-04 17:39:38 +02:00
parent 285f1bc2bc
commit e562288f82
2 changed files with 194 additions and 4 deletions

View File

@@ -1,7 +1,58 @@
# Universal Connectivity # Universal Connectivity
This is a chat app demontrating libp2p's super powers in establishing connectivity between multiple runtimes and languages. Realtime highly decentralised chat app.
- Uses the [**GossipSub**](https://docs.libp2p.io/concepts/pubsub/overview/) PubSub protocol for decentralized messaging ![libp2p topology](libp2p-hero.svg)
- The [chat frontend](./packages/frontend) is a Next.js app that uses [**js-libp2p**](https://github.com/libp2p/js-libp2p)
- The [go chat daemon](./go-peer) uses go-libp2p Showcasing [libp2p](https://libp2p.io/)'s superpowers in establishing ubiquitous peer-to-peer connectivity in modern programming languages (Go, Rust, TypeScript) and runtimes (Web, native binary).
On top of this strong foundation, it layers a GossipSub: A Secure PubSub Protocol for Unstructured Decentralised P2P Overlays. By analogy, an event broker with distributed brokering, or a distributed PubSub protocol.
This is the gossip event protocol that powers Filecoin and Post-Merge Ethereum.
Some of the cool and cutting-edge [transport protocols](https://connectivity.libp2p.io/) used by this app are:
- WebTransport
- WebRTC
- QUIC
- TCP
## Packages
| Packge | Description | WebTransport | WebRTC | QUIC | TCP |
| :--------------------------------- | :----------------------------------------------- | ------------ | ------ | ---- | --- |
| [`frontend`](./packages/frontend/) | Next.js based browser UI of the chat app | ✅ | ✅ | ❌ | ❌ |
| [`go-peer`](./go-peer/) | Chat peer implemented in Go | ✅ | ❌ | ✅ | ✅ |
| [`rust-peer`](./rust-peer/) | Chat peer implemented in Rust | ❌ | ✅ | ✅ | ❌ |
| [`node`](./packages/node/) | Chat peer implemented with TypeScript in node.js | ❌ | ❌ | ❌ | ✅ |
✅ - Protocol supported
❌ - Protocol not supported
- Uses the [**GossipSub**](https://docs.libp2p.io/concepts/pubsub/overview/) PubSub protocol for decentralised messaging
## Connecting to a peer
## Getting started frontend and node
The project uses [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces).
### 1. Install dependencies
Run npm install from the root of the repo:
```
npm i
```
### 2. Start dev server
Enter the frontend folder, start the dev server
```
cd packages/frontend
npm run dev
```

139
libp2p-hero.svg Normal file
View File

@@ -0,0 +1,139 @@
<svg width="444" height="511" viewBox="0 0 444 511" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_430_11718)">
<path d="M187.8 352L229.1 470.2" stroke="url(#paint0_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M40.7002 354.6L165.1 348.4" stroke="url(#paint1_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M212 28.4001L48.5 126.3" stroke="url(#paint2_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M237.9 151.2L390.4 138.8" stroke="url(#paint3_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M85.5 127.9L223.9 152.8L216.9 42.7" stroke="url(#paint4_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M220.4 25.3L398.1 124.1" stroke="url(#paint5_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M134.9 232.5L213.1 162.1" stroke="url(#paint6_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M188.3 345.3L298.2 296" stroke="url(#paint7_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M228.6 463.2L307.5 302.1" stroke="url(#paint8_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M144.9 239.5L306.8 278.2" stroke="url(#paint9_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42 331.6L122.5 246.5" stroke="url(#paint10_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M176.7 338.6L134.9 246.5" stroke="url(#paint11_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M329.5 294.7L392.7 340.9" stroke="url(#paint12_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M235.5 166.7L312.2 275.9" stroke="url(#paint13_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M53.7004 156.8L31.9004 325.4" stroke="url(#paint14_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M417.5 150.5L419.8 344" stroke="url(#paint15_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M324.6 275.9L394.2 145.8" stroke="url(#paint16_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M245.6 472.5L395.8 368.8" stroke="url(#paint17_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M128.7 226.3L76.0996 147.4" stroke="url(#paint18_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M213.9 460.9L35.7998 355.6" stroke="url(#paint19_linear_430_11718)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M228.9 152L250.5 140.1V164.4L228.6 176.5C228.6 176.5 228.9 151.5 228.9 152Z" fill="#8F3C96"/>
<path d="M208.1 140L229.8 127.7L250.5 140.1L228.9 152L208.1 140Z" fill="#A159A3"/>
<path d="M208.1 140L228.9 152L228.6 176.5L208.2 164.5L208.1 140Z" fill="#772A87"/>
<path d="M179 346.3L201.2 334.1V359L178.8 371.4C178.7 371.5 179 345.8 179 346.3Z" fill="#138DAE"/>
<path d="M157.6 334L180 321.4L201.2 334.2L179 346.3L157.6 334Z" fill="#34B4D7"/>
<path d="M157.6 334L179 346.3L178.7 371.5L157.8 359.2L157.6 334Z" fill="#219AC5"/>
<path d="M219.1 34.9001L250.2 17.8V52.7001L218.7 70.1C218.8 70.1 219.1 34.1001 219.1 34.9001Z" fill="#BABF33"/>
<path d="M189.2 17.6L220.5 0L250.2 17.8L219.1 34.9L189.2 17.6Z" fill="#C8D92B"/>
<path d="M189.2 17.6001L219.1 34.9001L218.8 70.1001L189.4 52.9001L189.2 17.6001Z" fill="#C2D02E"/>
<path d="M407.299 132.4L438.399 115.3V150.2L406.899 167.6C406.899 167.7 407.299 131.7 407.299 132.4Z" fill="#138DAE"/>
<path d="M377.3 115.2L408.6 97.5L438.3 115.4L407.3 132.4L377.3 115.2Z" fill="#34B4D7"/>
<path d="M377.3 115.2L407.3 132.4L406.9 167.7L377.5 150.4L377.3 115.2Z" fill="#219AC5"/>
<path d="M412.7 356.9L443.8 339.8V374.7L412.3 392.1C412.3 392.2 412.7 356.2 412.7 356.9Z" fill="#8F3C96"/>
<path d="M382.7 339.7L414 322.1L443.8 339.9L412.7 356.9L382.7 339.7Z" fill="#A159A3"/>
<path d="M382.7 339.7L412.7 356.9L412.3 392.2L382.9 374.9L382.7 339.7Z" fill="#772A87"/>
<path d="M29.8996 343.8L60.9996 326.7V361.6L29.5996 379C29.5996 379 29.8996 343 29.8996 343.8Z" fill="#8F3C96"/>
<path d="M0 326.5L31.3 308.9L61 326.7L29.9 343.8L0 326.5Z" fill="#A159A3"/>
<path d="M0 326.5L29.9 343.8L29.6 379L0.2 361.8L0 326.5Z" fill="#772A87"/>
<path d="M225.3 475.4L256.4 458.3V493.2L225 510.6C225 510.6 225.3 474.6 225.3 475.4Z" fill="#BABF33"/>
<path d="M195.4 458.1L226.7 440.5L256.4 458.3L225.3 475.4L195.4 458.1Z" fill="#C8D92B"/>
<path d="M195.4 458.1L225.3 475.4L225 510.6L195.6 493.4L195.4 458.1Z" fill="#C2D02E"/>
<path d="M130.3 235.4L152.4 223.3V248.1L130 260.5C130 260.5 130.3 234.9 130.3 235.4Z" fill="#E9AF20"/>
<path d="M109 223.1L131.2 210.6L152.4 223.3L130.3 235.4L109 223.1Z" fill="#F6DD03"/>
<path d="M109 223.1L130.3 235.4L130 260.5L109.1 248.2L109 223.1Z" fill="#F9BC1E"/>
<path d="M316.5 284.6L338.6 272.5V297.3L316.2 309.7C316.2 309.7 316.5 284 316.5 284.6Z" fill="#F8A120"/>
<path d="M295.2 272.3L317.4 259.8L338.6 272.4L316.5 284.6L295.2 272.3Z" fill="#F6AF1A"/>
<path d="M295.2 272.3L316.5 284.6L316.2 309.7L295.3 297.4L295.2 272.3Z" fill="#F29020"/>
<path d="M55.2008 134L89.8008 115V153.8L54.8008 173.2C54.8008 173.2 55.2008 133.2 55.2008 134Z" fill="#F8A120"/>
<path d="M21.9004 114.8L56.7004 95.2L89.8004 115L55.2004 134L21.9004 114.8Z" fill="#F6AF1A"/>
<path d="M21.9004 114.8L55.2004 134L54.8004 173.2L22.1004 154L21.9004 114.8Z" fill="#F29020"/>
</g>
<defs>
<linearGradient id="paint0_linear_430_11718" x1="186.286" y1="411.1" x2="230.577" y2="411.1" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint1_linear_430_11718" x1="39.1903" y1="351.487" x2="166.577" y2="351.487" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint2_linear_430_11718" x1="129.471" y1="76.0577" x2="131.011" y2="78.632" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint3_linear_430_11718" x1="236.351" y1="145.036" x2="391.867" y2="145.036" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint4_linear_430_11718" x1="84.0016" y1="97.7401" x2="225.415" y2="97.7401" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint5_linear_430_11718" x1="303.32" y1="83.3987" x2="315.145" y2="65.982" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint6_linear_430_11718" x1="133.384" y1="197.294" x2="214.577" y2="197.294" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint7_linear_430_11718" x1="198.226" y1="359.184" x2="288.314" y2="282.124" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint8_linear_430_11718" x1="227.06" y1="382.643" x2="308.978" y2="382.643" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint9_linear_430_11718" x1="143.448" y1="258.842" x2="308.254" y2="258.842" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint10_linear_430_11718" x1="40.4804" y1="289.035" x2="123.996" y2="289.035" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint11_linear_430_11718" x1="133.384" y1="292.519" x2="178.19" y2="292.519" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint12_linear_430_11718" x1="358.02" y1="289.979" x2="364.216" y2="345.545" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint13_linear_430_11718" x1="234.028" y1="221.293" x2="313.673" y2="221.293" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint14_linear_430_11718" x1="30.4163" y1="241.097" x2="55.2358" y2="241.097" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint15_linear_430_11718" x1="415.964" y1="247.229" x2="421.286" y2="247.229" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint16_linear_430_11718" x1="323.06" y1="210.842" x2="395.737" y2="210.842" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint17_linear_430_11718" x1="244.093" y1="420.648" x2="397.286" y2="420.648" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint18_linear_430_11718" x1="102.403" y1="227.826" x2="102.403" y2="145.887" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<linearGradient id="paint19_linear_430_11718" x1="124.819" y1="462.406" x2="124.819" y2="354.116" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8B731"/>
<stop offset="1" stop-color="#F39B35"/>
</linearGradient>
<clipPath id="clip0_430_11718">
<rect width="443.8" height="510.6" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB