BC-7905 - Update documentation on tldraw #42
Draft
Conversation
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
…ure and resources
bischofmax
reviewed
Dec 3, 2024
|
|
||
| 1. User from schulcloud app in CourseBoard deletes whiteboard (tldraw) instance form CardBoard. | ||
| 2. Having drawingName sc-server is removing Representation data in sc-database - BoardNodes collection ( drawingName === BoardNode id) | ||
| 3. Sc-server is calling tldraw-server via tldraw-management rules in tldraw-server-svc to delete all data that has given id). | ||
| 3. Schulcloud-server is calling tldraw-server via tldraw-management rules in tldraw-server-svc to delete all data that has given id. |
There was a problem hiding this comment.
Via tldraw-management rules ergibt irgendwie nicht so richtig Sinn.
bischofmax
reviewed
Dec 3, 2024
| @@ -1,31 +1,25 @@ | |||
| # Technical details | |||
|
|
|||
| ## Backend | |||
| We are using pure Web Sockets implementation to establish connection between client and server. The reason why we used pure websockets is because tldraw-client is using y-websockets from Yjs library, that does not connect with socket.io web sockets. We also have to implement broadcasting mechanism to provide stateless solution. To achive that goal we decided to use Redis. We used ioredis library to connect to our Redis instance. Everytime user make some changes at first it is handled to the server instance that he is connected to an then this change is send to the channel with the name of the board and servers that also operate that board are listening on this channel so they can recive messages from other servers and provide those changes to users that are connected to this pod. We added the same mechanism for awareness channel so every user from every pod can see other users cursours. | |||
| We are using pure Web Sockets implementation to establish connection between client and server. The reason why we used pure websockets is because tldraw-client is using y-websockets from Yjs library, that does not connect with socket.io web sockets. We also have to implement broadcasting mechanism to provide stateless solution. To achive that goal we decided to use Redis. We used ioredis library to connect to our Redis instance. Everytime user make some changes at first it is handled to the server instance that he is connected to an then this change is send to the channel with the name of the board and servers that also operate that board are listening on this channel so they can recive messages from other servers and provide those changes to users that are connected to this pod. We added the same mechanism for awareness channel so every user from every pod can see other users cursors. | |||
There was a problem hiding this comment.
Warum will man generell socket.io benutzen? Warum brauchten wir eine stateless solution? Warum benutzen wir dann doch socket.io? Der Absatz ist nicht verständlich. Dazu Grammatik und die Verwendung von Zeiten.
bischofmax
reviewed
Dec 3, 2024
|
|
||
| Tldraw is deployed as a separate application from schoulcloud-server. On the backend side we have added couple new resources: |
There was a problem hiding this comment.
Jetzt gerade sind die neu aber wenn das jemand in zwei Jahren liest? Und der client hat ja auch nichts mit der backend side zu tun.
bischofmax
reviewed
Dec 3, 2024
| - tldraw.repo.ts - repository used by TldrawService to find and delete boards from database. | ||
| - ws-shared-doc.do.ts - main structure representing tldraw drawing during web socket communication. it holds all the web-socket addresses that are connected to this board, so we can inform all the connected clients about changes. | ||
| - tldraw-drawing.entity.ts - object representing tldraw drawingn entity in database. | ||
| - tldraw-config.controller.ts - controller that exposes tldraw server configuration to be used by the tldraw client. |
There was a problem hiding this comment.
Sollte eigentlich auch vom vue client benutzt werden oder?
Aktuell leider noch so:
const sanitizedUrl = computed(() =>
sanitizeUrl(`/tldraw?parentId=${element.value.id}`)
);
bischofmax
reviewed
Dec 3, 2024
| - redis.service.ts - encapsulates the logic for creating and managing Redis instances, supporting both standalone and sentinel configurations, and integrates seamlessly with the NestJS framework. | ||
| - ioredis.adapter.ts - encapsulates the logic for interacting with Redis, including defining custom commands and subscribing to channels. It leverages the ioredis library and integrates with the application's configuration and logging systems to provide a robust and flexible Redis adapter. | ||
| - api.service.ts - API service for y-redis. | ||
| - ws.service.ts - main service responsible for establishing web socket connection as well as saving data to database. Responsibe for Redis communication. |
There was a problem hiding this comment.
Responsibe for Redis communication. würde ich beim Adapter sagen
bischofmax
reviewed
Dec 3, 2024
| - metrics.service.ts - service resonsible for storing application-level metrics. | ||
|
|
||
| - worker.service.ts - responsible for persisting the current state of changed tldraw documents into the file storage. |
There was a problem hiding this comment.
Gibt es noch ein detailliertere Beschreibung des Workers?
bischofmax
reviewed
Dec 3, 2024
| @@ -70,7 +64,7 @@ This hook is designed to observe changes in the DOM, specifically targeting cert | |||
|
|
|||
| - https://github.com/tldraw/tldraw-v1 - tldraw v1 repo | |||
|
|
|||
| - https://github.com/MaxNoetzold/y-mongodb-provider - code from this package was used to add mongodb as a persistence to tldraw | |||
| - https://github.com/yjs/y-redis - code from this package was used to add y-redis as a persistence to tldraw | |||
There was a problem hiding this comment.
Den Satz verstehe ich nicht
bischofmax
reviewed
Dec 3, 2024
| - TLDRAW_WEBSOCKET_PATH - path for the tldraw websocket connection | ||
| - TLDRAW_WEBSOCKET_URL - URL for the tldraw websocket connection | ||
| - WORKER_MIN_MESSAGE_LIFETIME - minimal lifetime of a message consumed by the worker | ||
| - WORKER_TASK_DEBOUNCE - minimum idle time (in milliseconds) of the pending messages to be claimed |
There was a problem hiding this comment.
idle time of the messages or worker?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The new setup of the tldraw feature needs to be documented.
Links to Tickets or other pull requests
JIRA :
Changes
Datasecurity
Deployment
New Repos, NPM pakages or vendor scripts
Screenshots of UI changes
Approval for review