fluid-framework

import { SharedTree } from "fluid-framework"; import { TinyliciousClient } from "@fluidframework/tinylicious-client"; import { TreeConfiguration, SchemaFactory } from "@fluidframework/tree"; const client = new TinyliciousClient(); // Define the schema for our collaborative tree const sf = new SchemaFactory("my-app"); class MyTreeNode extends sf.object("MyTreeNode", { message: sf.string, timestamp: sf.number, children: sf.array(sf.reference("MyTreeNode")) }) {} const appSchema = new TreeConfiguration( [MyTreeNode], () => new MyTreeNode({ message: "Hello from Fluid!", timestamp: Date.now(), children: [] }) ); const containerSchema = { initialObjects: { myTree: SharedTree } }; async function startFluidClient() { const containerId = location.hash.substring(1); let container; if (!containerId) { // Create a new container ({ container } = await client.createContainer(containerSchema)); const tree = container.initialObjects.myTree.schematize(appSchema); tree.root.message = "Initial message"; tree.root.timestamp = Date.now(); const newChild = new MyTreeNode({ message: "First child", timestamp: Date.now(), children: [] }); tree.root.children.insertAtStart(newChild); const id = await container.attach(); location.hash = id; console.log("New container created with ID:", id); } else { // Get existing container ({ container } = await client.getContainer(containerId, containerSchema)); console.log("Existing container loaded with ID:", containerId); } const tree = container.initialObjects.myTree.schematize(appSchema); // Event listener for changes tree.events.on("treeChanged", () => { console.log("Tree changed: Current message is ", JSON.stringify(tree.root.message)); console.log("Number of children: ", tree.root.children.length); }); // Update the tree after 5 seconds setTimeout(() => { const newMessage = `Message from client ${Math.random().toFixed(2)}`; tree.root.message = newMessage; const newChild = new MyTreeNode({ message: `Another child ${Math.random().toFixed(2)}`, timestamp: Date.now(), children: [] }); tree.root.children.insertAtEnd(newChild); console.log(`Updated tree message to: ${newMessage}`); }, 5000); } startFluidClient().catch(console.error);