npm package: @fluidframework/presence
Description: A component for lightweight data sharing within a single session
Author: Microsoft and contributors
Latest version: 2.92.0

# @fluidframework/presence

A set of session-focused utilities for lightweight data sharing and messaging.

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 the no clients remain. (More specifically once no clients remain that have acquired the session `IPresence` interface.) Once fully implemented, no client will require container write permissions to use Presence features.
<!-- AUTO-GENERATED-CONTENT:START (LIBRARY_README_HEADER) -->

<!-- prettier-ignore-start -->
<!-- NOTE: This section is automatically generated using @fluid-tools/markdown-magic. Do not update these generated contents directly. -->

## Using Fluid Framework libraries

When taking a dependency on a Fluid Framework library's public APIs, we recommend using a `^` (caret) version range, such as `^1.3.4`.
While Fluid Framework libraries may use different ranges with interdependencies between other Fluid Framework libraries,
library consumers should always prefer `^`.

If using any of Fluid Framework's unstable APIs (for example, its `beta` APIs), we recommend using a more constrained version range, such as `~`.

## Installation

To get started, install the package by running the following command:

```bash
npm i @fluidframework/presence
```

## Importing from this package

This package leverages [package.json exports](https://nodejs.org/api/packages.html#exports) to separate its APIs by support level.
For more information on the related support guarantees, see [API Support Levels](https://fluidframework.com/docs/build/releases-and-apitags/#api-support-levels).

To access the `public` ([SemVer](https://semver.org/)) APIs, import via `@fluidframework/presence` like normal.

To access the `beta` APIs, import via `@fluidframework/presence/beta`.

To access the `alpha` APIs, import via `@fluidframework/presence/alpha`.

## API Documentation

API documentation for **@fluidframework/presence** is available at <https://fluidframework.com/docs/apis/presence>.

<!-- prettier-ignore-end -->

<!-- AUTO-GENERATED-CONTENT:END -->

<!-- AUTO-GENERATED-CONTENT:START (INCLUDE:path=../../../docs/docs/build/presence.mdx&start=19) -->

<!-- prettier-ignore-start -->
<!-- NOTE: This section is automatically generated by embedding the referenced file contents. Do not update these generated contents directly. -->

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
1. an `events` property to listen for remote and local updates
1. 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.

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

Updates from remote clients can be listened for using `events`.

```typescript
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`.

```typescript
// 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](../api/presence/statemap-interface.md) that mimics `Map` though it only supports `string | number` as property keys.

```typescript
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.

```typescript
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`.

```typescript
// 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`.

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

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

#### Schema Definition and Workspace

```typescript
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`.
1. Validator functions may not manipulate the given value.
1. Validator functions are not expected to throw exceptions.
1. 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](#schema-definition-and-workspace) for example.
For more complex types or peace of mind, consider a schema builder / validation package such as [TypeBox](https://github.com/sinclairzx81/typebox) or [Zod](https://zod.dev/).

Example using TypeBox:
```typescript
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:

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

is incompatible with

```typescript
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}`.

```typescript
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](https://github.com/microsoft/FluidFramework/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=Presence:%20States:%20) if one is not found under [Presence States issues](https://github.com/microsoft/FluidFramework/issues?q=is%3Aissue+%22Presence%3A+States%3A%22).

### 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](#states-workspace) or [States](#state-objects) and/or (2) updated later using the `controls` member of Workspace or States. The [States Workspace](#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:

```ts
// 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;
```

<!-- prettier-ignore-end -->

<!-- AUTO-GENERATED-CONTENT:END -->

<!-- AUTO-GENERATED-CONTENT:START (README_FOOTER) -->

<!-- prettier-ignore-start -->
<!-- NOTE: This section is automatically generated using @fluid-tools/markdown-magic. Do not update these generated contents directly. -->

## Minimum Client Requirements

These are the platform requirements for the current version of Fluid Framework Client Packages.
These requirements err on the side of being too strict since within a major version they can be relaxed over time, but not made stricter.
For Long Term Support (LTS) versions this can require supporting these platforms for several years.

It is likely that other configurations will work, but they are not supported: if they stop working, we do not consider that a bug.
If you would benefit from support for something not listed here, file an issue and the product team will evaluate your request.
When making such a request please include if the configuration already works (and thus the request is just that it becomes officially supported), or if changes are required to get it working.

### Supported Runtimes

-   NodeJs ^20.10.0 except that we will drop support for it [when NodeJs 20 loses its upstream support on 2026-04-30](https://github.com/nodejs/release#release-schedule), and will support a newer LTS version of NodeJS (22) at least 1 year before 20 is end-of-life. This same policy applies to NodeJS 22 when it is end of life (2027-04-30).
    -   Running Fluid in a Node.js environment with the `--no-experimental-fetch` flag is not supported.
-   Modern browsers supporting the es2022 standard library: in response to asks we can add explicit support for using babel to polyfill to target specific standards or runtimes (meaning we can avoid/remove use of things that don't polyfill robustly, but otherwise target modern standards).

### Supported Tools

-   TypeScript 5.4:
    -   All [`strict`](https://www.typescriptlang.org/tsconfig) options are supported.
    -   [`strictNullChecks`](https://www.typescriptlang.org/tsconfig) is required.
    -   [Configuration options deprecated in 5.0](https://github.com/microsoft/TypeScript/issues/51909) are not supported.
    -   `exactOptionalPropertyTypes` is currently not fully supported.
        If used, narrowing members of Fluid Framework types types using `in`, `Reflect.has`, `Object.hasOwn` or `Object.prototype.hasOwnProperty` should be avoided as they may incorrectly exclude `undefined` from the possible values in some cases.
-   [webpack](https://webpack.js.org/) 5
    -   We are not intending to be prescriptive about what bundler to use.
        Other bundlers which can handle ES Modules should work, but webpack is the only one we actively test.

### Module Resolution

[`Node16`, `NodeNext`, or `Bundler`](https://www.typescriptlang.org/tsconfig#moduleResolution) resolution should be used with TypeScript compilerOptions to follow the [Node.js v12+ ESM Resolution and Loading algorithm](https://nodejs.github.io/nodejs.dev/en/api/v20/esm/#resolution-and-loading-algorithm).
Node10 resolution is not supported as it does not support Fluid Framework's API structuring pattern that is used to distinguish stable APIs from those that are in development.

### Module Formats

-   ES Modules:
    ES Modules are the preferred way to consume our client packages (including in NodeJs) and consuming our client packages from ES Modules is fully supported.
-   CommonJs:
    Consuming our client packages as CommonJs is supported only in NodeJS and only for the cases listed below.
    This is done to accommodate some workflows without good ES Module support.
    If you have a workflow you would like included in this list, file an issue.
    Once this list of workflows motivating CommonJS support is empty, we may drop support for CommonJS one year after notice of the change is posted here.

    -   Testing with Jest (which lacks [stable ESM support](https://jestjs.io/docs/ecmascript-modules) due to [unstable APIs in NodeJs](https://github.com/nodejs/node/issues/37648))

## Contribution Guidelines

There are many ways to [contribute](https://github.com/microsoft/FluidFramework/blob/main/CONTRIBUTING.md) to Fluid.

-   Participate in Q&A in our [GitHub Discussions](https://github.com/microsoft/FluidFramework/discussions).
-   [Submit bugs](https://github.com/microsoft/FluidFramework/issues) and help us verify fixes as they are checked in.
-   Review the [source code changes](https://github.com/microsoft/FluidFramework/pulls).
-   [Contribute bug fixes](https://github.com/microsoft/FluidFramework/blob/main/CONTRIBUTING.md).

Detailed instructions for working in the repo can be found in the [Wiki](https://github.com/microsoft/FluidFramework/wiki).

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.
Use of these trademarks or logos must follow Microsoft’s [Trademark & Brand Guidelines](https://www.microsoft.com/trademarks).
Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

## Help

Not finding what you're looking for in this README? Check out [fluidframework.com](https://fluidframework.com/docs/).

Still not finding what you're looking for? Please [file an issue](https://github.com/microsoft/FluidFramework/wiki/Submitting-Bugs-and-Feature-Requests).

Thank you!

## Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.

Use of these trademarks or logos must follow Microsoft's [Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

<!-- prettier-ignore-end -->

<!-- AUTO-GENERATED-CONTENT:END -->