I assume you use the websockets-client connector. Here is a short tutorial on how to implement google authentification.
Adapt y-websockets-server:
Y({ connector: { // no auth required for the server checkAuth: function (idToken) { return checkGoogleIdToken(idToken) // using the 'google-id-token-verifier' package } } })
Where Do i have to put that on serverside? I have installed by following commands:
npm install --save y-leveldb -g
npm install -g y-websockets-serverDo I have to checkout the source and modify it by myself?
You could just do ymap.set('user', { userName, base64Image }) or similarly yarray.insert(0, [{ userName, base64Image }])
If you plan to change userName a lot - you could also do
const user = new Y.Map()
user.set('userName', userName)
user.set('base64Image', 'really long string .. ')
ymap.set('user', user)
// change it
ymap.get('user').set('userName', newName)This allows you to save some bandwidth because the base64Image is not overritten when you change userName
- I fixed all my todos and completely reworked the algorithm. You can see performance benchmarks here: https://github.com/dmonad/crdt-benchmarks
- I spend this weekend stabilizing the API and documenting it. I'd appreciate any feedback https://github.com/y-js/yjs/blob/master/README.v13.md
- I released v13.0.0-82 today, and I don't plan to change the API anymore (except the relative position API)
The connector interface was pretty complicated. I dedicated a section to the v13 docs that explains how document updates work: https://github.com/y-js/yjs/blob/master/README.v13.md#document-updates
npm ERR! code E404
npm ERR! 404 Not Found: y-textarea@latest
Right, I haven't published the textarea package. v13 is still lacking good demos. You can try out the https://github.com/y-js/yjs-demos and the prosemirror demo.
No, v13 is not backward compatible.
I haven't tested v13 with webpack. I can't figure out like this why it doesn't work.
Thanks to @NathanaelA pledge on Patreon we just received a wonderful addition:
:sparkles: Monaco support (the editor that powers VS Code) :sparkles:
Live Demo: https://yjs-demos.now.sh/monaco/
Demo Code: https://github.com/y-js/yjs-demos/tree/master/monaco
Binding repository: https://github.com/y-js/y-monaco
@calibr Yes, I broke encoding. These are my final fixes to create a stable API to Yjs https://github.com/y-js/yjs/blob/master/README.v13.md#Document-Updates
Thanks for your feedback @canadaduane :)
You can absolutely do that in both v13 and v12. Shared types are just data types and of course you can nest them. But it may take some time to get used to the concept of shared data types. You should just start and observe the changes as you are doing them. Here is a template to create a file system using Y.Map as the directory and Y.Text as files. This will work in Yjs version 13 (in beta):
const yMap = doc.getMap('my-directory')
const file = new Y.Text()
yMap.set('index.js', file)
new TextareaBinding(file, document.querySelector('textarea'))yMap.set('index.js', file)
I took a month vacation from my daytime job to work on the v13 release. v13 will be released very soon. I'll be hacking and documenting Yjs for the whole month of June. You can contribute by working with me on the website, documentation, testing, additional demos, or Yjs integrations (e.g. to other editors / frameworks). In exchange I'll be available for daily group meetings and answer any questions you have. The background is that I want more people involved in the project. Ping me directly if you are interested.
import React, {Component} from 'react';
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
const doc = Y.Doc()
const provider = new WebsocketProvider('http://localhost:1234', 'roomname')
provider.sync('doc')
const ytext = doc.getText('my resume')
class App extends Component {
render() {
return (<div>test</div>);
}
}
export default App;Thanks @crazypenguinguy I made some mistakes i the documentation. For example the url must be a ws:// or wss:// url. I corrected it. Let me know if something else is unclear.
Here is the fixed code for your demo:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
const doc = new Y.Doc();
//const doc = new Y.Doc()
const provider = new WebsocketProvider("ws://localhost:1234", "roomname", doc);
const ytext = doc.getText("my resume");
class App extends Component {
render() {
return <div>test</div>;
}
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);