Skip to main content

Presence

Overview​

We are introducing a new way to power your ephemeral experiences with Fluid: the new Presence APIs (in beta as of version 2.42.0) that provide session-focused utilities for lightweight data sharing and messaging. Collaborative features typically rely on each user maintaining their own temporary state, which is subsequently shared with others. For example, in applications featuring multiplayer cursors, the cursor position of each user signifies their state. This state can be further utilized for various purposes such as indicating typing activity or displaying a user's current selection. This concept is referred to as presence.

By leveraging this shared state, applications can provide a seamless and interactive collaborative experience, ensuring that users are always aware of each other's actions and selections in real-time.

The key scenarios for which the new Presence APIs are suitable include:

  • User presence
  • Collaborative cursors
  • Notifications

Concepts​

A session is a period of time when one or more clients are connected to a Fluid service. Session data and messages may be exchanged among clients, but will disappear once no clients remain. (More specifically once no clients remain that have acquired the session Presence interface.) Once fully implemented, no client will require container write permissions to use Presence features.

Attendees​

For the lifetime of a session, each client connecting will be established as a unique and stable Attendee. The representation is stable because it will remain the same Attendee instance independent of connection drops and reconnections.

Client IDs maintained by Attendee may be used to associate Attendee with quorum, audience, and service audience members.

Workspaces​

Within Presence data sharing and messaging is broken into workspaces with custom identifiers (workspace addresses). Clients must use the same address within a session to connect with others. Unique addresses enable logical components within a client runtime to remain isolated or work together (without other piping between those components).

There are two types of workspaces: States and Notifications.

States Workspace​

A StatesWorkspace allows sharing of simple data across attendees where each attendee maintains their own data values that others may read, but not change. This is distinct from a Fluid DDS where data values might be manipulated by multiple clients and one ultimate value is derived. Shared, independent values are maintained by State objects that specialize in incrementality and history of values.

Notifications Workspace​

A NotificationsWorkspace is similar to StatesWorkspace, but is dedicated to notification use-cases via NotificationsManager.

State objects​

Latest, LatestRaw​

Latest and LatestRaw (unvalidated data) retain the most recent atomic value each attendee has shared. Use StateFactory.latest to add one to StatesWorkspace.

LatestMap, LatestMapRaw​

LatestMap and LatestMapRaw (unvalidated data) retain the most recent atomic value each attendee has shared under arbitrary keys (mimics Map data structure). Values associated with a key may be set to undefined to represent deletion. Use StateFactory.latestMap to add one to a StatesWorkspace. (LatestMap support is pending.)

NotificationsManager​

Notifications are a special case where no data is retained during a session and all interactions appear as events that are sent and received. Notifications may be mixed into a StatesWorkspace for convenience. NotificationsManager is the only presence object permitted in a NotificationsWorkspace. Use Notifications to add one to a NotificationsWorkspace or StatesWorkspace.

Using Presence​

State object use​

State objects have:

  1. a local property representing local clients state data
  2. an events property to listen for remote and local updates
  3. several get* methods to access other attendees and their data

Latest, LatestRaw use​

Simple assignment of new value (new object) initiates broadcast of new value to other attendees.

function updateMyPosition(positionTracker: Latest<PointXY>, newPosition: PointXY): void {
	positionTracker.local = newPosition;
}

Updates from remote clients can be listened for using events.

function startTrackingOthersPositions(positionTracker: Latest<PointXY>): (() => void) {
	const stop = positionTracker.events.on("remoteUpdated", (update) => {
		const pos = update.value();
		if (pos === undefined) {
			console.warn(`Attendee ${update.attendee.attendeeId} sent invalid position data`);
		} else {
			console.log(`Attendee ${update.attendee.attendeeId} now at (${pos.x}, ${pos.y})`);
		}
	});
	return stop;
}

Accumulated data can be enumerated using getRemotes.

// Logs other attendees' current positions (includes now disconnected attendees)
function logOthersPositions(positionTracker: Latest<PointXY>): void {
	for (const { attendee, value } of positionTracker.getRemotes()) {
		const validated = value();
		const position = validated === undefined ? "<invalid>" : `(${validated.x}, ${validated.y})`;
		console.log(`${attendee.attendeeId} ${position} [${attendee.getConnectionStatus()}]:`);
	}
}

LatestMap, LatestMapRaw use​

A change to the local property automatically initiates a broadcast of updates to other attendees. local is a StateMap that mimics Map though it only supports string | number as property keys.

function updateCounter(counterTracker: LatestMap<number, string>, counterName: string, value: number): void {
	counterTracker.local.set(counterName, value);
}

Updates from remote clients can be listened for using events. "remoteItemUpdated" and "remoteItemRemoved" provide fine-grain updates and "remoteUpdated" (use not shown) notes any change but only provides complete new map.

function startTrackingOthersCounters(counterTracker: LatestMapRaw<number, string>): (() => void) {
	const stopUpdated = counterTracker.events.on("remoteItemUpdated", (update) => {
		console.log(`Attendee ${update.attendee.attendeeId} updated counter ${update.key} to ${update.value}.`);
	});
	const stopRemoved = counterTracker.events.on("remoteItemRemoved", (update) => {
		console.log(`Attendee ${update.attendee.attendeeId} removed counter ${update.key}.`);
	});
	return () => { stopUpdated(); stopRemoved(); };
}

Accumulated data can be enumerated using getRemotes.

// Logs other attendee's current counters (excludes now _disconnected_ attendees)
function logOthersCounters(counterTracker: LatestMap<number, string>): void {
	const counterMap = new Map<string, { attendee: Attendee; value: number }[]>();
	// Collect counters from all remote attendees
	for (const { attendee, items } of counterTracker.getRemotes()) {
		// Only collect from *connected* attendees
		if (attendee.getConnectionStatus() === AttendeeStatus.Connected) {
			// `items` is a simple `ReadonlyMap` of remote data
			for (const [counterName, state] of items.entries()) {
				let entry = counterMap.get(counterName);
				if (!entry) {
					entry = [];
					counterMap.set(counterName, entry);
				}
				const value = state.value();
				// Just skip unrecognized data
				if (value !== undefined) {
					entry.push({ attendee, value });
				}
			}
		}
	}

	for (const [key, items] of counterMap.entries()) {
		console.log(`Counter ${key}:`);
		for (const { attendee, value } of items) {
			console.log(`  ${attendee.attendeeId}: ${value}`);
		}
	}
}

Setup​

To access Presence APIs, use getPresence() with any IFluidContainer.

import { getPresence } from "@fluidframework/presence/beta";

function usePresence(container: IFluidContainer): void {
   const presence = getPresence(container);
}

Schema Definition and Workspace​

import type { Latest, LatestMap, Presence, StatesWorkspaceSchema } from "@fluidframework/presence/beta";
import { StateFactory } from "@fluidframework/presence/beta";

interface PointXY { x: number; y: number }

// Basic custom type guard
function isPointXY(value: unknown): value is PointXY {
	return typeof value === "object" && value !== null && "x" in value && "y" in value &&
		typeof value.x === "number" && typeof value.y === "number";
}

function numberOrUndefined(value: unknown): number | undefined {
	return typeof value === 'number' ? value : undefined;
}

// A Presence workspace schema with two State objects named "position" and "counters".
const PresenceSchemaV1 = {
	// This `Latest<PointXY>` state defaults all values to (0, 0).
	position: StateFactory.latest<PointXY>({
		local: { x: 0, y: 0 },
		validator: (v) => isPointXY(v) ? v : undefined
	}),
	// This `LatestMap<number, string>` state has `string` keys storing `number` values.
	counters: StateFactory.latestMap<number, string>({ validator: numberOrUndefined }),
} as const satisfies StatesWorkspaceSchema;

// Creates our unique workspace with the State objects declared in above schema.
function getOurWorkspace(presence: Presence):
	{
		position: Latest<PointXY>;
		counters: LatestMap<number, string>;
	} {
	return presence.states.getWorkspace("name:PointsAndCountersV1", PresenceSchemaV1).states;
}

Other Capabilities​

Runtime data validation​

The Presence API provides a simple mechanism (fully added in version 2.53.0) to validate that state data received within session from other clients matches the types declared.

When creating State objects using StateFactory.latest or StateFactory.latestMap, it is recommended that a validator function is specified. That function will be called on-demand at runtime to verify data from other clients is valid.

When you provide a validator function, the data in a State object must be accessed via .value() function call instead of a directly accessing .value as a property. This is reflected in the types.

[!IMPORTANT] If no validator function is provided, then the data shared in Presence is assumed to be compatible. This may result in runtime errors if the data does not match the expected type. It is recommended to always provide a validator function to ensure that the data is valid and to prevent runtime errors.

Validator Requirements​

  1. Validator functions take the form function validator(value: unknown): ExpectedType | undefined.
  2. Validator functions may not manipulate the given value.
  3. Validator functions are not expected to throw exceptions.
  4. When malformed data is found, a validator function may either return undefined or create a substitute value.

The result of call to validator is returned as-is to the .value() call that first attempted access to remote data. That result is cached and will be returned to future .value() callers without invoking the validator.

Example Validated Setup​

Custom validators can be convenient for simple types. See Schema Definition and Workspace for example. For more complex types or peace of mind, consider a schema builder / validation package such as TypeBox or Zod.

Example using TypeBox:

import { type Static, Type } from "@sinclair/typebox";
import { TypeCompiler } from '@sinclair/typebox/compiler'

const PointXY = Type.Object({
	x: Type.Number(),
	y: Type.Number(),
});
type PointXY = Static<typeof PointXY>;

const typeCheckPointXY = TypeCompiler.Compile(PointXY);

function validatorPointXY(value: unknown): PointXY | undefined {
	return typeCheckPointXY.Check(value) ? value : undefined;
}

const PresenceSchemaV1 = {
	position: StateFactory.latest({
		local: { x: 0, y: 0 },
		validator: validatorPointXY
	}),
} as const satisfies StatesWorkspaceSchema;

Limitations​

Data Supported​

Only plain old data is supported. If JSON.parse(JSON.stringify(foo)) returns a deeply equal value, then that data is supported. Large data is not recommended and if used may exceed system capacity. A small image could be shared but sharing a URL to an image is recommended.

Compatibility and Versioning​

The schema of workspace address, states and notifications names, and their types will only be consistent when all clients connected to the session are using the same types for a unique value/notification path (workspace address + name within workspace). In other words, don't mix versions or make sure to change identifiers when changing types in a non-compatible way.

For example:

presence.states.getWorkspace("app:v1states", { myState: StateFactory.latest({ local: { x: 0 }}) });

is incompatible with

presence.states.getWorkspace("app:v1states", { myState: StateFactory.latest({ local: { x: "text" }}) });

because "app:v1states"+"myState" have different value type expectations: {x: number} versus {x: string}.

presence.states.getWorkspace("app:v1states", { myState2: StateFactory.latest({ local: { x: true }}) });

would be compatible with both of the prior schemas because "myState2" is a different name. Though in this situation none of the different clients would be able to observe each other.

States Reliability​

The current implementation relies on Fluid Framework's signal infrastructure instead of ops. This has advantages, but comes with some risk of unreliable messaging. The most common known case of unreliable signals occurs during reconnection periods and the current implementation attempts to account for that. Be aware that all clients are not guaranteed to arrive at eventual consistency. Please file a new issue if one is not found under Presence States issues.

Notifications​

Notifications API is partially implemented at alpha support level. All messages are always broadcast even if unicast API is used. Type inferences are not working even with a fully specified initialSubscriptions value provided to Notifications, and the schema type must be specified explicitly.

Notifications are fundamentally unreliable at this time as there are no built-in acknowledgements nor retained state. To prevent the most common loss of notifications, always check for connection before sending.

Throttling / Grouping​

Presence updates are grouped together and throttled to prevent flooding the network with messages when presence values are rapidly updated. This means the presence infrastructure will not immediately broadcast updates but will broadcast them after a configurable delay.

The allowableUpdateLatencyMs property configures how long a local update may be delayed under normal circumstances, enabling grouping with other updates. The default allowableUpdateLatencyMs is 60 milliseconds but may be (1) specified during configuration of a States Workspace or States and/or (2) updated later using the controls member of Workspace or States. The States Workspace configuration is used when States do not have their own setting.

Notifications are never queued; they effectively always have an allowableUpdateLatencyMs of 0. However, they may be grouped with other updates that were already queued.

Note that due to throttling, clients will not receive updates for every intermediate value set by another client. For example, with Latest and LatestMap, the only value sent is the value at the time the outgoing grouped message is sent. Previous values set by the client will not be broadcast or seen by other clients.

Example​

You can configure the grouping and throttling behavior using the allowableUpdateLatencyMs property as in the following example:

// Configure a states workspace
const stateWorkspace = presence.states.getWorkspace(
	"app:v1states",
	{
		// This Latest state has an allowable latency of 100ms.
		position: StateFactory.latest({ local: { x: 0, y: 0 }, settings: { allowableUpdateLatencyMs: 100 }}),
		// This Latest state uses the workspace default.
		count: StateFactory.latest({ local: { num: 0 }}),
	},
	// Specify the default for all state in this workspace to 200ms,
	// overriding the default value of 60ms.
	{ allowableUpdateLatencyMs: 200 },
);

// Temporarily set count updates to send as soon as possible
const countState = stateWorkspace.states.count;
countState.controls.allowableUpdateLatencyMs = 0;
countState.local = { num: 5000 };

// Reset the update latency to the workspace default
countState.controls.allowableUpdateLatencyMs = undefined;