yonote/yjs
24
0
Fork 0
Code Pull Requests 1 Releases Activity

rework provider combination demo

Browse Source
This commit is contained in:
Kevin Jahns 2020-05-18 18:04:04 +02:00
parent 05dde1db01
commit 06048b87ee
1 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
README.md
View File

@ -149,50 +149,46 @@ the API docs.
### Example: Using and combining providers ### Example: Using and combining providers
The most common way to combine providers is probably Any Yjs providers can be combined with each other. So you can sync data over different
to combine some network provider with the local indexeddb provider: network technologies.
In most cases you want to use a networking provider (like y-webrtc or y-webrtc) in combination with a
persistence provider (y-indexeddb in the browser). Persistence allows you to load the document faster and
to sync persist data that is created while offline.
For the sake of this demo we combine two different network providers with a persistence provider.
```js ```js
import * as Y from 'yjs' import * as Y from 'yjs'
import { WebrtcProvider } from 'y-webrtc' import { WebrtcProvider } from 'y-webrtc'
import { WebsocketProvider } from 'y-websocket'
import { IndexeddbPersistence } from 'y-indexeddb' import { IndexeddbPersistence } from 'y-indexeddb'
async function main() { const ydoc = new Y.Doc()
const ydoc = new Y.Doc()
// this allows you to instantly get the (cached) documents data // this allows you to instantly get the (cached) documents data
let idbP = new IndexeddbPersistence('count-demo', ydoc) const indexeddbProvider = new IndexeddbPersistence('count-demo', ydoc)
await idbP.whenSynced idbP.whenSynced.then(() => {
console.log('loaded data from indexed db')
// this will sync between clients in the background, })
// may be replaced by any network provider
let webP = new WebrtcProvider('count-demo', ydoc)
webP.connect()
// array of numbers which produce a sum // Sync clients with the y-webrtc provider.
const yarray = ydoc.getArray('count') const webrtcProvider = new WebrtcProvider('count-demo', ydoc)
// add 1 to the sum // Sync clients with the y-websocket provider
yarray.push([1]) const websocketProvider = new WebsocketProvider('wss://demos.yjs.dev', 'count-demo', ydoc)
// observe changes of the sum // array of numbers which produce a sum
yarray.observe(event => { const yarray = ydoc.getArray('count')
// this will print updates from the network
console.log("new sum: " + yarray.toArray().reduce((a,b)=>(a+b)))
})
// print initial number (the cached one plus one) // observe changes of the sum
let sum = yarray.toArray().reduce((a,b)=>(a+b)) yarray.observe(event => {
console.log(sum) // this will print updates from the network
} console.log("new sum: " + yarray.toArray().reduce((a,b)=>(a+b)))
main() })
```
Example output: // add 1 to the sum
yarray.push([1]) // => "new sum: 1"
```bash
32 # stored sum from indexeddb (with 1 already added to it)
new sum: 38 # delayed new sum fetched from network
``` ```
## API ## API