Skip to content

Latest commit

 

History

History

presence-tracker

README.md

@fluid-example/presence-tracker

This demo is a work-in-progress

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.

In this example, presence is used to share both mouse position within the application window and the focus state of the application.

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

Getting Started

You can run this example using the following steps:

  1. Enable corepack by running corepack enable.
  2. 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
  3. Run pnpm start from this directory and open http://localhost:8080 in a web browser to see the app running.
  4. If you want to run the app against SharePoint, follow the instructions in webpack-fluid-loader to get auth credentials. Then run pnpm start:spo or pnpm start:spo-df and open http://localhost:8080 like above.

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.

Contribution Guidelines

There are many ways to contribute to Fluid.

Detailed instructions for working in the repo can be found in the Wiki.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact 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. 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.

Still not finding what you're looking for? Please file an issue.

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.

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