Fluid Framework Core Client Libraries

2.93.0 · active · verified Sun Apr 19

The `fluid-framework` package serves as the primary client-side entry point for building collaborative applications with Fluid Framework. It bundles core Fluid Framework client libraries, including the `IFluidContainer` interface and various Distributed Data Structures (DDSes) like `SharedTree` and the now legacy `SharedMap`. The current stable version is 2.93.0, with minor releases occurring frequently, often including new features and breaking changes. This package abstracts away many individual Fluid package dependencies, simplifying development. While it provides the core collaborative primitives, it requires a separate service client (e.g., `@fluidframework/azure-client` or `@fluidframework/tinylicious-client`) to connect to a Fluid service. Its key differentiators include real-time, low-latency collaboration primitives, robust data modeling with `SharedTree`, and a comprehensive API for managing collaborative sessions.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to create or load a Fluid container, initialize a SharedTree with a defined schema, and interact with its collaborative data, including event listeners for changes.

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);

view raw JSON →