refactor(presence-tracker): Use presence package

examples/apps/presence-tracker/.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
 	extends: [
 		require.resolve("@fluidframework/eslint-config-fluid/minimal-deprecated"),
 		"prettier",
+		"../../.eslintrc.cjs",
 	],
 	rules: {
 		"@fluid-internal/fluid/no-unchecked-record-access": "warn",

examples/apps/presence-tracker/README.md

@@ -2,11 +2,20 @@
 
 **_This demo is a work-in-progress_**
 
-**Presence Tracker** is an example that demonstrates how transient state of audience members can be tracked among other audience members using signals. It does so using fluid-framework's `FluidContainer`, `IServiceAudience`, and `Signaler`.
+**Presence Tracker** is an example that demonstrates how the @fluidframework/presence package can be used to share data
+that does not require persistence between clients. The presence APIs are especially suited to data like real-time cursor
+positions, mouse pointer positions, and object selection.
 
-This implementation visualizes the Container in a standalone application, rather than using the webpack-fluid-loader environment that most of our examples use. This implementation relies on [Tinylicious](/server/routerlicious/packages/tinylicious), so there are a few extra steps to get started. We bring our own view that we will bind to the data in the container.
+In this example, presence is used to share both mouse position within the application window and the focus state of the
+application.
 
-<!-- AUTO-GENERATED-CONTENT:START (EXAMPLE_APP_README_HEADER:usesTinylicious=TRUE) -->
+This implementation visualizes the Container in a standalone application, rather than using the `webpack-fluid-loader`
+environment that many of our examples use. This implementation relies on
+[Tinylicious](/server/routerlicious/packages/tinylicious) as the Fluid service, so it is invoked in the background
+automatically when running the scripts . We bring our
+own view that we bind to the data in the container.
+
+<!-- AUTO-GENERATED-CONTENT:START (EXAMPLE_APP_README_HEADER:usesTinylicious=FALSE) -->
 
 <!-- prettier-ignore-start -->
 <!-- NOTE: This section is automatically generated using @fluid-tools/markdown-magic. Do not update these generated contents directly. -->
@@ -19,13 +28,26 @@ You can run this example using the following steps:
 1. Run `pnpm install` and `pnpm run build:fast --nolint` from the `FluidFramework` root directory.
     - For an even faster build, you can add the package name to the build command, like this:
       `pnpm run build:fast --nolint @fluid-example/presence-tracker`
-1. In a separate terminal, start a Tinylicious server by following the instructions in [Tinylicious](https://github.com/microsoft/FluidFramework/tree/main/server/routerlicious/packages/tinylicious).
 1. Run `pnpm start` from this directory and open <http://localhost:8080> in a web browser to see the app running.
 
 <!-- prettier-ignore-end -->
 
 <!-- AUTO-GENERATED-CONTENT:END -->
 
+## Tests
+
+The tests in this example require that tinylicious be running. The tests execute against the "real app" running in Webpack's
+dev server; tinylicious is triggered in the background as part of the test invocation.
+
+### Multiple browser clients
+
+The presence APIs do not broadcast state unless multiple clients are connected, so it is necessary to run multiple
+clients to test that the presence data is correctly being exchanged between clients. The tests do this by creating
+multiple puppeteer clients and pointing them to the same URL. This partially works. However, the most crucial test,
+which verifies that changes from one client are reflected on the other, does not yet pass, and is thus skipped. See
+AB#28502 (https://dev.azure.com/fluidframework/internal/_workitems/edit/28502)
+for more details.
+
 <!-- AUTO-GENERATED-CONTENT:START (README_FOOTER) -->
 
 <!-- prettier-ignore-start -->

examples/apps/presence-tracker/jest-puppeteer.config.cjs

@@ -5,7 +5,7 @@
 
 module.exports = {
 	server: {
-		command: `npm run start:client:test -- --no-hot --no-live-reload --port ${process.env["PORT"]}`,
+		command: `npm run start:client -- --no-hot --no-live-reload --port ${process.env["PORT"]}`,
 		port: process.env["PORT"],
 		launchTimeout: 10000,
 		usedPortAction: "error",

examples/apps/presence-tracker/package.json

@@ -2,7 +2,7 @@
 	"name": "@fluid-example/presence-tracker",
 	"version": "2.21.0",
 	"private": true,
-	"description": "Example Data Object that tracks page focus for Audience members using signals.",
+	"description": "Example application that tracks page focus and mouse position using the Fluid Framework presence features.",
 	"homepage": "https://fluidframework.com",
 	"repository": {
 		"type": "git",
@@ -28,11 +28,13 @@
 		"lint": "fluid-build . --task lint",
 		"lint:fix": "fluid-build . --task eslint:fix --task format",
 		"prepack": "npm run webpack",
-		"start": "webpack serve",
-		"start:client:test": "webpack serve --config webpack.test.cjs",
+		"start": "start-server-and-test start:tinylicious 7070 start:client",
+		"start:client": "webpack serve",
+		"start:tinylicious": "tinylicious",
 		"test": "npm run test:jest",
-		"test:jest": "jest --ci",
-		"test:jest:verbose": "cross-env FLUID_TEST_VERBOSE=1 jest --ci --passWithNoTests",
+		"test:jest": "cross-env logger__level=crit start-server-and-test tinylicious 7070 test:jest:run",
+		"test:jest:run": "jest --ci --detectOpenHandles",
+		"test:jest:verbose": "cross-env FLUID_TEST_VERBOSE=1 npm run test:jest:verbose",
 		"tinylicious": "tinylicious",
 		"webpack": "webpack --env production",
 		"webpack:dev": "webpack --env development"
@@ -41,13 +43,14 @@
 		"@fluid-example/example-utils": "workspace:~",
 		"@fluid-experimental/data-objects": "workspace:~",
 		"@fluid-internal/client-utils": "workspace:~",
-		"@fluidframework/azure-client": "workspace:~",
 		"@fluidframework/container-definitions": "workspace:~",
 		"@fluidframework/container-runtime-definitions": "workspace:~",
 		"@fluidframework/core-interfaces": "workspace:~",
 		"@fluidframework/driver-definitions": "workspace:~",
 		"@fluidframework/fluid-static": "workspace:~",
+		"@fluidframework/presence": "workspace:~",
 		"@fluidframework/runtime-utils": "workspace:~",
+		"@fluidframework/tinylicious-client": "workspace:~",
 		"fluid-framework": "workspace:~",
 		"process": "^0.11.10"
 	},
@@ -73,6 +76,7 @@
 		"puppeteer": "^23.6.0",
 		"rimraf": "^4.4.0",
 		"source-map-loader": "^5.0.0",
+		"start-server-and-test": "^2.0.3",
 		"tinylicious": "^5.0.0",
 		"ts-jest": "^29.1.1",
 		"ts-loader": "^9.5.1",

examples/apps/presence-tracker/src/FocusTracker.ts

@@ -3,120 +3,105 @@
  * Licensed under the MIT License.
  */
 
-import { ISignaler } from "@fluid-experimental/data-objects";
 import { TypedEventEmitter } from "@fluid-internal/client-utils";
-import type { IAzureAudience } from "@fluidframework/azure-client";
-import { IContainer } from "@fluidframework/container-definitions/internal";
 import { IEvent } from "@fluidframework/core-interfaces";
-import { IMember } from "fluid-framework";
+import type {
+	IPresence,
+	ISessionClient,
+	LatestValueManager,
+	PresenceStates,
+} from "@fluidframework/presence/alpha";
+import { Latest, SessionClientStatus } from "@fluidframework/presence/alpha";
 
-export interface IFocusTrackerEvents extends IEvent {
-	(event: "focusChanged", listener: () => void): void;
+/**
+ * IFocusState is the data that individual session clients share via presence.
+ */
+export interface IFocusState {
+	readonly hasFocus: boolean;
 }
 
-export interface IFocusSignalPayload {
-	userId: string;
-	focus: boolean;
+/**
+ * Definitions of the events that the FocusTracker raises.
+ */
+export interface IFocusTrackerEvents extends IEvent {
+	/**
+	 * The focusChanged event is emitted any time the FocusTracker detects a change in focus in any client, local or
+	 * remote.
+	 */
+	(event: "focusChanged", listener: (focusState: IFocusState) => void): void;
 }
 
+/**
+ * The FocusTracker class tracks the focus state of all connected sessions using the Fluid Framework presence features.
+ * Focus state is tracked automatically by the class instance. As the focus state of connected sessions change, the
+ * FocusTracker emits a "focusChanged" event
+ */
 export class FocusTracker extends TypedEventEmitter<IFocusTrackerEvents> {
-	private static readonly focusSignalType = "changedFocus";
-	private static readonly focusRequestType = "focusRequest";
-
 	/**
-	 * Local map of focus status for clients
-	 *
-	 * @example
-	 *
-	 * ```typescript
-	 * Map<userId, Map<clientid, hasFocus>>
-	 * ```
+	 * A value manager that tracks the latest focus state of connected session clients.
 	 */
-	private readonly focusMap = new Map<string, Map<string, boolean>>();
-
-	private readonly onFocusSignalFn = (clientId: string, payload: IFocusSignalPayload) => {
-		const userId: string = payload.userId;
-		const hasFocus: boolean = payload.focus;
-
-		let clientIdMap = this.focusMap.get(userId);
-		if (clientIdMap === undefined) {
-			clientIdMap = new Map<string, boolean>();
-			this.focusMap.set(userId, clientIdMap);
-		}
-		clientIdMap.set(clientId, hasFocus);
-		this.emit("focusChanged");
-	};
+	private readonly focus: LatestValueManager<IFocusState>;
 
 	constructor(
-		container: IContainer,
-		public readonly audience: IAzureAudience,
-		private readonly signaler: ISignaler,
+		private readonly presence: IPresence,
+
+		/**
+		 * A states workspace that the FocusTracker will use to share focus states with other session clients.
+		 */
+		// eslint-disable-next-line @typescript-eslint/ban-types -- empty object is the correct typing
+		readonly statesWorkspace: PresenceStates<{}>,
 	) {
 		super();
 
-		this.audience.on("memberRemoved", (clientId: string, member: IMember) => {
-			const focusClientIdMap = this.focusMap.get(member.id);
-			if (focusClientIdMap !== undefined) {
-				focusClientIdMap.delete(clientId);
-				if (focusClientIdMap.size === 0) {
-					this.focusMap.delete(member.id);
-				}
-			}
-			this.emit("focusChanged");
-		});
-
-		this.signaler.on("error", (error) => {
-			this.emit("error", error);
-		});
-		this.signaler.onSignal(
-			FocusTracker.focusSignalType,
-			(clientId: string, local: boolean, payload: IFocusSignalPayload) => {
-				this.onFocusSignalFn(clientId, payload);
-			},
+		// Create a Latest value manager to track the focus state. The value is initialized with current focus state of the
+		// window.
+		statesWorkspace.add(
+			"focus",
+			Latest<IFocusState>({ hasFocus: window.document.hasFocus() }),
 		);
 
-		this.signaler.onSignal(FocusTracker.focusRequestType, () => {
-			this.sendFocusSignal(document.hasFocus());
+		// Save a reference to the value manager for easy access within the FocusTracker.
+		this.focus = statesWorkspace.props.focus;
+
+		// When the focus value manager is updated, the FocusTracker should emit the focusChanged event.
+		this.focus.events.on("updated", ({ client, value }) => {
+			this.emit("focusChanged", this.focus.local);
 		});
+
+		// Listen to the local focus and blur events. On each event, update the local focus state in the value manager, then
+		// emit the focusChanged event with the local data.
 		window.addEventListener("focus", () => {
-			this.sendFocusSignal(true);
+			this.focus.local = {
+				hasFocus: true,
+			};
+			this.emit("focusChanged", this.focus.local);
 		});
 		window.addEventListener("blur", () => {
-			this.sendFocusSignal(false);
-		});
-		container.on("connected", () => {
-			this.signaler.submitSignal(FocusTracker.focusRequestType);
+			this.focus.local = {
+				hasFocus: false,
+			};
+			this.emit("focusChanged", this.focus.local);
 		});
-		this.signaler.submitSignal(FocusTracker.focusRequestType);
 	}
 
 	/**
-	 * Alert all connected clients that there has been a change to a client's focus
+	 * A map of session clients to focus status.
 	 */
-	private sendFocusSignal(hasFocus: boolean) {
-		this.signaler.submitSignal(FocusTracker.focusSignalType, {
-			userId: this.audience.getMyself()?.id,
-			focus: hasFocus,
-		});
-	}
+	public getFocusPresences(): Map<ISessionClient, boolean> {
+		const statuses: Map<ISessionClient, boolean> = new Map();
 
-	public getFocusPresences(): Map<string, boolean> {
-		const statuses: Map<string, boolean> = new Map<string, boolean>();
-		this.audience.getMembers().forEach((member, userId) => {
-			member.connections.forEach((connection) => {
-				const focus = this.getFocusPresenceForUser(userId, connection.id);
-				if (focus !== undefined) {
-					statuses.set(member.name, focus);
-				}
-			});
-		});
-		return statuses;
-	}
+		// Include the local client in the map because this is used to render a
+		// dashboard of all connected clients.
+		const currentClient = this.presence.getMyself();
+		statuses.set(currentClient, this.focus.local.hasFocus);
 
-	/**
-	 * Returns focus status of specified client
-	 */
-	public getFocusPresenceForUser(userId: string, clientId: string): boolean | undefined {
-		return this.focusMap.get(userId)?.get(clientId);
+		for (const { client, value } of this.focus.clientValues()) {
+			if (client.getConnectionStatus() === SessionClientStatus.Connected) {
+				const { hasFocus } = value;
+				statuses.set(client, hasFocus);
+			}
+		}
+
+		return statuses;
 	}
 }