4.0 KiB
| toc |
|---|
| menu |
Collaborative editing configuration
The editor is based on the sharedb and json0 protocols to interactively manipulate data
The client (editor) establishes a long connection communication with the server through WebSocket, and every time the editor changes the dom structure, it will be converted to json0 format operation command (ops) and sent to the server and modify the server data. Distribute to each client
Client
In the demo case, an editor has provided a client code that uses the json0 protocol to interact with sharedb through WebSocket and sharedb according to common needs.
//Instantiate the collaborative editing client, you need to pass in the current editor instance
const ot = new OTClient(engine);
// Engine.setValue is no longer needed here. Only need to pass the value to OTClient when connecting. After connecting to the server, if the server does not have the document, it will be created with the default value, otherwise the latest document data of the server will be returned
// Connect to the collaborative server, if the server does not have a document corresponding to the docId, it will be initialized with defaultValue
// url server ws link
// docId The unique identification id of the document
// defaultValue on the server side, if the document corresponding to docId does not exist, a new document will be created with this value
ot.connect(url, docId, defaultValue);
ot.on('ready', (member) => {
console.log('OT Ready');
});
This code has been able to meet the basic editing needs, if you need more functions, you can expand by yourself
Server
ot-server is a network service created with nodejs, and WebSocket.Server is used to handle the client's WebSocket connection
In the demonstration case, only simulated user data is provided. In the production environment, we need the client to transmit the token parameter for identity verification
Use the command
# Development environment
yarn dev
# or
# Formal environment
yarn start
Collaborative data
sharedb will save the operation data of each client and server as a log, and will keep the newly generated document data after each operation. These operations are performed in ot-server
sharedb provides two ways to save these data
- RAM
- Database
In the case that no database is provided by default, sharedb saves these data in memory by default, but these data cannot be persisted and will disappear after restart. It is not recommended to use in a production environment.
If you need to use the memory storage test, ot-server -> client this in the file Delete the {db: mongodb} of the code constructor(backend = new ShareDB({ db: mongodb })), and the corresponding reference and instantiation of mongodb need to be deleted
In the demonstration case, the mongodb database is used to save all data persistence, so we need to install the mongodb database
- You can install the database version that suits your environment from MongoDB official website download
- After the installation is complete, create a database and set the user name, password and other permissions
- Finally, configure the database name, user name, password and other information to config to start normally
ot -server
Windows installation tutorial Windows can download the msi version directly, the installation is relatively easy, the next step is the next step. . .