Get Rich Quick with P2P Crypto Currency $$$$$$$$$

Slide 1

Slide 1 text

Get Rich Quick with P2P Crypo Currency $$$$$$$$$

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Let's make an virtual internet money ICO token crypto currency thingy

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

P2P on the Web

Slide 7

Slide 7 text

Once upon a time...

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Resilient

Slide 12

Slide 12 text

No Middlemen

Slide 13

Slide 13 text

Diverse

Slide 14

Slide 14 text

People Powered

Slide 15

Slide 15 text

Resilient No Middlemen Diverse People Powered

Slide 16

Slide 16 text

P2P Peer To Peer

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Resilient?

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No Middlemen?

Slide 22

Slide 22 text

Peer 㲗 Company 㲗 Peer

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Diverse?

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

People Powered?

Slide 27

Slide 27 text

Client 㲗 Server

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

twitch.tv / ferossity

Slide 34

Slide 34 text

P2P

Slide 35

Slide 35 text

P2P for cost reduction » Communication Skype, Hangouts » Music Spotify » OS Windows Update » Game Updates Blizzard, EVE Online » Content Delivery Network PeerCDN, Peer5

Slide 36

Slide 36 text

P2P for resilience » File sharing BitTorrent, WebTorrent » Currency Bitcoin » Computation Ethereum » Web Tor, I2P, Freenet » Storage IPFS, Tahoe

Slide 37

Slide 37 text

Web ≠ P2P

Slide 38

Slide 38 text

Domains DNS URLs

Slide 39

Slide 39 text

Web RTC Real Time Communications

Slide 40

Slide 40 text

WebRTC in 2017 » Approaching 100% browser support1 1 Edge has no Data Channel support

Slide 41

Slide 41 text

Data Channel Hidden gem in WebRTC

Slide 42

Slide 42 text

Client 㲗 Server

Slide 43

Slide 43 text

Client 㲗 Client

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Demos!!

Slide 46

Slide 46 text

Download files with WebTorrent const WebTorrent = require('webtorrent') const client = new WebTorrent() client.add('magnet:...', function (torrent) { const file = torrent.files[0] // Display the file. Supports video, audio, images, etc. file.appendTo('body') })

Slide 47

Slide 47 text

Let's build a community ﬁle drop site

Slide 48

Slide 48 text

Share files with WebTorrent const WebTorrent = require('webtorrent') const dragDrop = require('drag-drop') const client = new WebTorrent() dragDrop('body', function (files) { client.seed(files, function (torrent) { console.log(torrent.magnetURI) }) })

Slide 49

Slide 49 text

How do peers discover which torrents are available?

Slide 50

Slide 50 text

Signal Hub const signalhub = require('signalhub') const hub = signalhub('demo', ['http://localhost:8080']) // Broadcast to a channel hub.broadcast(channel, data) // Subscribe to a channel hub.subscribe(channel).on('data', function (message) { console.log(message) })

Slide 51

Slide 51 text

const client = new WebTorrent() dragDrop('body', function (files) { client.seed(files[0], function (torrent) { hub.broadcast('torrent', torrent.magnetURI) torrent.files[0].appendTo('body') }) }) hub.subscribe('torrent').on('data', function (torrentId) { client.add(torrentId, function (torrent) { torrent.files[0].appendTo('body') }) })

Slide 52

Slide 52 text

nordicjs.fun

Slide 53

Slide 53 text

Let's build a chat app

Slide 54

Slide 54 text

TCP connect "connect to 127.0.0.1" ✅ connected!

Slide 55

Slide 55 text

WebRTC handshake "i want to connect" "use this webrtc offer to contact me" ⏱ wait for a webrtc answer... "thanks for the webrtc answer!" ✅ connected!

Slide 56

Slide 56 text

Simple Peer const Peer = require('simple-peer') const peer = new Peer() peer.on('signal', function (data) { sendToRemotePeer(data) // Send via any transport }) // Call this whern remote peer sends data function receiveFromRemotePeer (data) { peer.signal(data) }

Slide 57

Slide 57 text

Simple Peer, Pt. 2 // Once the connection is established, say hello! peer.on('connect', function () { peer.send('Hello!') }) // Listen for data from remote peer peer.on('data', function (data) { console.log(data) })

Slide 58

Slide 58 text

const randombytes = require('randombytes') const localPeerId = randombytes(8).toString('hex') hub.broadcast('hello', localPeerId) hub.subscribe('hello').on('data', function (peerId) { const peer = new Peer() peer.on('signal', function (signal) { hub.broadcast(peerId, signal) }) }) hub.subscribe(localPeerId, function (signal) { const peer = new Peer() peer.signal(signal) })

Slide 59

Slide 59 text

const store = { messages: [], peers: [] } peer.on('data', function (message) { store.messages.push(message) update() }) function sendAll (text) { const message = { from: localPeerId, text: text } store.peers.map(function (peer) { if (peer.connected) peer.send(message) }) store.messages.push(message) update() }

Slide 60

Slide 60 text

nordicjs.fun

Slide 61

Slide 61 text

How performant is WebRTC data channel?

Slide 62

Slide 62 text

Let's build a real-time game!

Slide 63

Slide 63 text

window.addEventListener('keydown', function (event) { if (event.key === 'ArrowUp') store.keys.up = true else if (event.key === 'ArrowDown') store.keys.down = true else if (event.key === 'ArrowLeft') store.keys.left = true else if (event.key === 'ArrowRight') store.keys.right = true else return event.preventDefault() }) window.addEventListener('keyup', function (event) { if (event.key === 'ArrowUp') store.keys.up = false else if (event.key === 'ArrowDown') store.keys.down = false else if (event.key === 'ArrowLeft') store.keys.left = false else if (event.key === 'ArrowRight') store.keys.right = false else return event.preventDefault() })

Slide 64

Slide 64 text

peer.on('data', function (data) { if (data.x) peer.x = data.x if (data.y) peer.y = data.y if (data.vx) peer.vx = data.vx if (data.vy) peer.vy = data.vy }) setInterval(function () { sendAll(store.playerPosition) // { x: 0, y: 0, vx: 0, vy: 0 } }, 100) function sendAll (position) { store.peers.map(function (peer) { if (peer.connected) peer.send(position) }) }

Slide 65

Slide 65 text

function tick () { if (store.keys.up) store.player.vy -= K_ACCEL if (store.keys.down) store.player.vy += K_ACCEL if (store.keys.left) store.player.vx -= K_ACCEL if (store.keys.right) store.player.vx += K_ACCEL store.player.x += store.player.vx store.player.y += store.player.vy store.peers.forEach(function (peer) { peer.x += peer.vx peer.y += peer.vy }) update() }

Slide 66

Slide 66 text

nordicjs.fun

Slide 67

Slide 67 text

P2P Challenges » Topologies are complex » Trust is harder » Architecture is more complicated » Fewer frameworks & less starter code

Slide 68

Slide 68 text

P2P Advantages » Cool ✨ » Reduce costs for hosting » Ofﬂine support automatically (often) Also: » Privacy by design (often) » User controls their data » Safe against user-hostile changes

Slide 69

Slide 69 text

Solutions? » See work by @maﬁntosh, @taravancil, @pfrazee, @diasdavid, @dominic, @andrestaltz » Beaker Browser

Slide 70

Slide 70 text

Thanks! @feross