Last active
March 22, 2021 16:26
-
-
Save dmonad/acd89745de1115cf712b35dcacd15cda to your computer and use it in GitHub Desktop.
You can use an existing socket.io connection in Yjs. Works with y-websockets-client >= 8.0.6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <textarea style="width:80%;" rows=40 id="text1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea> | |
| <textarea style="width:80%;" rows=40 id="text2" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea> | |
| <script src="bower_components/yjs/y.js"></script> | |
| <script src="bower_components/y-websockets-client/y-websockets-client.js"></script> | |
| <script src="./index_1.js"></script> | |
| </body> | |
| </html> | |
| ~ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // The y-websockets-client includes a compatible socket.io distribution | |
| // You need to include y-websockets-client before you call the following function: | |
| // E.g. <script src="bower_components/y-websockets-client/y-websockets-client.js"></script> | |
| var io = Y['websockets-client'].io | |
| // You can also use your own implementation (but you need to make sure that it is compatible) | |
| // Create a new connection | |
| var conn = io('https://yjs.dbis.rwth-aachen.de:5076') | |
| Y({ | |
| db: { | |
| name: 'memory' | |
| }, | |
| connector: { | |
| name: 'websockets-client', | |
| room: 'text-example', // you still need to specify the room | |
| socket: conn // use existing connection | |
| }, | |
| sourceDir: '/bower_components', | |
| share: { | |
| text: 'Text' | |
| } | |
| }).then(function (y) { | |
| // bind textarea | |
| y.share.text.bind(document.querySelector('#text1')) | |
| }) | |
| Y({ | |
| db: { | |
| name: 'memory' | |
| }, | |
| connector: { | |
| name: 'websockets-client', | |
| room: 'text-example2', | |
| socket: conn | |
| }, | |
| sourceDir: '/bower_components', | |
| share: { | |
| text: 'Text' | |
| } | |
| }).then(function (y) { | |
| // bind textarea | |
| y.share.text.bind(document.querySelector('#text2')) | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This example focuses on how to use an existing connection that was created by y-websockets-client | |
| Y({ | |
| db: { | |
| name: 'memory' | |
| }, | |
| connector: { | |
| name: 'websockets-client', | |
| room: 'text-example', | |
| }, | |
| sourceDir: '/bower_components', | |
| share: { | |
| text: 'Text' | |
| } | |
| }).then(function (y) { | |
| window.y1 = y | |
| // bind textarea | |
| y.share.text.bind(document.querySelector('#text1')) | |
| // Get the socket connection, | |
| // and create a new instance with it | |
| createAnotherInstance(y.connector.socket) | |
| }) | |
| function createAnotherInstance(existingConnection) { | |
| Y({ | |
| db: { | |
| name: 'memory' | |
| }, | |
| connector: { | |
| name: 'websockets-client', | |
| room: 'text-example2', | |
| socket: existingConnection | |
| }, | |
| sourceDir: '/bower_components', | |
| share: { | |
| text: 'Text' | |
| } | |
| }).then(function (y) { | |
| window.y2 = y | |
| // bind textarea | |
| y.share.text.bind(document.querySelector('#text2')) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment