From fa09ebfd829c28c1f1a92ec9381709f6903c67b1 Mon Sep 17 00:00:00 2001 From: Moritz Hedtke <13287984+mohe2015@users.noreply.github.com> Date: Mon, 27 Apr 2020 22:31:26 +0200 Subject: [PATCH 1/4] Add example of combining providers to README.md --- README.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/README.md b/README.md index f31d1905..3d6b8cfe 100644 --- a/README.md +++ b/README.md @@ -137,6 +137,50 @@ Now you understand how types are defined on a shared document. Next you can jump to the [demo repository](https://github.com/yjs/yjs-demos) or continue reading the API docs. +### Example: Using and combining providers + +The most common way to combine providers is probably to combine some network provider with the local indexeddb provider: +```typescript +import * as Y from 'yjs' +import { WebrtcProvider } from 'y-webrtc' +import { IndexeddbPersistence } from 'y-indexeddb' + +async function main() { + const ydoc = new Y.Doc() + + // this allows you to instantly get the (cached) documents data + let idbP = new IndexeddbPersistence('count-demo', ydoc) + await idbP.whenSynced + + // 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 + const yarray = ydoc.getArray('count') + + // add 1 to the sum + yarray.push([1]) + + // observe changes of the sum + yarray.observe(event => { + // 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) + let sum = yarray.toArray().reduce((a,b)=>(a+b)) + console.log(sum) +} +main() + +``` +Example output: +```bash +32 # stored sum from indexeddb (with 1 already added to it) +new sum: 38 # delayed new sum fetched from network +``` + ## API ```js From 68b44189563e9694a0991ba6b40cd0a8dbf1da59 Mon Sep 17 00:00:00 2001 From: Moritz Hedtke <13287984+mohe2015@users.noreply.github.com> Date: Mon, 27 Apr 2020 22:35:37 +0200 Subject: [PATCH 2/4] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3d6b8cfe..3638ca49 100644 --- a/README.md +++ b/README.md @@ -140,7 +140,8 @@ the API docs. ### Example: Using and combining providers The most common way to combine providers is probably to combine some network provider with the local indexeddb provider: -```typescript + +```js import * as Y from 'yjs' import { WebrtcProvider } from 'y-webrtc' import { IndexeddbPersistence } from 'y-indexeddb' @@ -173,9 +174,10 @@ async function main() { console.log(sum) } main() - ``` + Example output: + ```bash 32 # stored sum from indexeddb (with 1 already added to it) new sum: 38 # delayed new sum fetched from network From 8221db795abd677f248193ff197a3dacf2853806 Mon Sep 17 00:00:00 2001 From: Moritz Hedtke <13287984+mohe2015@users.noreply.github.com> Date: Mon, 27 Apr 2020 22:39:09 +0200 Subject: [PATCH 3/4] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3638ca49..5ba62dcf 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,8 @@ the API docs. ### Example: Using and combining providers -The most common way to combine providers is probably to combine some network provider with the local indexeddb provider: +The most common way to combine providers is probably +to combine some network provider with the local indexeddb provider: ```js import * as Y from 'yjs' @@ -153,7 +154,8 @@ async function main() { let idbP = new IndexeddbPersistence('count-demo', ydoc) await idbP.whenSynced - // this will sync between clients in the background, may be replaced by any network provider + // this will sync between clients in the background, + // may be replaced by any network provider let webP = new WebrtcProvider('count-demo', ydoc) webP.connect() From 06048b87ee9a69041bc6ed0fd157cab5acada8c9 Mon Sep 17 00:00:00 2001 From: Kevin Jahns Date: Mon, 18 May 2020 18:04:04 +0200 Subject: [PATCH 4/4] rework provider combination demo --- README.md | 60 ++++++++++++++++++++++++++----------------------------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 116cd1d4..b99dd1d8 100644 --- a/README.md +++ b/README.md @@ -149,50 +149,46 @@ the API docs. ### Example: Using and combining providers -The most common way to combine providers is probably -to combine some network provider with the local indexeddb provider: +Any Yjs providers can be combined with each other. So you can sync data over different +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 import * as Y from 'yjs' import { WebrtcProvider } from 'y-webrtc' +import { WebsocketProvider } from 'y-websocket' 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 - let idbP = new IndexeddbPersistence('count-demo', ydoc) - await idbP.whenSynced - - // this will sync between clients in the background, - // may be replaced by any network provider - let webP = new WebrtcProvider('count-demo', ydoc) - webP.connect() +// this allows you to instantly get the (cached) documents data +const indexeddbProvider = new IndexeddbPersistence('count-demo', ydoc) + idbP.whenSynced.then(() => { + console.log('loaded data from indexed db') +}) - // array of numbers which produce a sum - const yarray = ydoc.getArray('count') +// Sync clients with the y-webrtc provider. +const webrtcProvider = new WebrtcProvider('count-demo', ydoc) - // add 1 to the sum - yarray.push([1]) +// Sync clients with the y-websocket provider +const websocketProvider = new WebsocketProvider('wss://demos.yjs.dev', 'count-demo', ydoc) - // observe changes of the sum - yarray.observe(event => { - // this will print updates from the network - console.log("new sum: " + yarray.toArray().reduce((a,b)=>(a+b))) - }) +// array of numbers which produce a sum +const yarray = ydoc.getArray('count') - // print initial number (the cached one plus one) - let sum = yarray.toArray().reduce((a,b)=>(a+b)) - console.log(sum) -} -main() -``` +// observe changes of the sum +yarray.observe(event => { + // this will print updates from the network + console.log("new sum: " + yarray.toArray().reduce((a,b)=>(a+b))) +}) -Example output: - -```bash -32 # stored sum from indexeddb (with 1 already added to it) -new sum: 38 # delayed new sum fetched from network +// add 1 to the sum +yarray.push([1]) // => "new sum: 1" ``` ## API