You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Back a textarea with a hyper-string
for conflict-free p2p replication!
Usage
Let's create two textarea elements on the same page and back each with their
own hyper-string:
$cat>example.jsvarhyperize=require('hyper-textarea')varmemdb=require('memdb')varhstring=require('hyper-string')document.body.innerHTML=''varta=document.createElement('textarea')ta.setAttribute('cols',80)ta.setAttribute('rows',8)document.body.appendChild(ta)varstring=hstring(memdb())hyperize(ta,string)varta2=document.createElement('textarea')ta2.setAttribute('cols',80)ta2.setAttribute('rows',8)document.body.appendChild(ta2)varstring2=hstring(memdb())hyperize(ta2,string2)// perform a single sync between the twovarr1=string.log.createReplicationStream()varr2=string2.log.createReplicationStream()r1.pipe(r2).pipe(r1)^D
Now start up a dev server + browserify/watchify process with
wzrd:
$ wzrd example.js:bundle.js
server started at https://localhost:9967
Take a look! Everything you type in one textarea will be replicated to the
other in realtime.
Peer-to-peer Browser Usage
Let's let two different browsers edit a textarea collaboratively, using
webrtc-swarm to facilitate
browser-to-browser peering:
$cat>p2p-example.jsvarswarm=require('webrtc-swarm')varsignalhub=require('signalhub')varhyperize=require('hyper-textarea')varhstring=require('hyper-string')varmemdb=require('memdb')document.body.innerHTML=''varta=document.createElement('textarea')ta.setAttribute('cols',80)ta.setAttribute('rows',8)document.body.appendChild(ta)varstring=hstring(memdb())hyperize(ta,string)varhub=signalhub('hyper-textarea',['https://signalhub.mafintosh.com'])varsw=swarm(hub)sw.on('peer',function(peer,id){console.log('connected to a new peer:',id)varr=string.log.createReplicationStream()r.pipe(peer).pipe(r)})sw.on('disconnect',function(peer,id){console.log('disconnected from a peer:',id)})^D
Like before, fire up wzrd:
$ wzrd p2p-example.js:bundle.js
server started at https://localhost:9967
Now open two browser tabs pointing at this address. They'll find each other via
signalhub and perform a sync on their contents.
API
varhyperize=require('hyper-textarea')
hyperize(textarea, hstring)
Backs a textarea element textarea with a
hyper-string instance hstring.