Edit

Real-time collaboration with Azure and Microsoft 365

Microsoft Entra ID
Microsoft Graph
Azure App Service
Microsoft 365

Solution ideas

This article is a solution idea. If you'd like us to expand the content with more information, such as potential use cases, alternative services, implementation considerations, or pricing guidance, let us know by providing GitHub feedback.

This solution shows how you can use libraries and Azure services to meet custom collaboration requirements. In addition to real-time collaboration, this solution supports user presence status. Users can work together in the custom app to collect ideas, see when new ideas are added, modified, or deleted in real time, and avoid data conflicts during collaboration sessions.

Architecture

Diagram that shows an architecture for real-time collaboration.

Download a PowerPoint file of this architecture.

Dataflow

  • An application uses the Login component of the Microsoft Graph Toolkit to enable a user to sign in. The Login component uses the MSAL provider to validate the user’s credentials against Microsoft Entra ID.
  • After the user signs in, the client web app uses Fluid Framework to connect to Fluid Relay and creates a collaboration session.
  • More users sign in and participate in the collaboration session. Fluid Framework merges the data sent and received in each client to ensure that it's synchronized for all users. The total order broadcast algorithm and eventual consistency are used to ensure this synchronization.
  • As users continue to collaborate, Fluid Relay automatically stores the collaboration data.
  • As new users join the collaboration session, each user's client retrieves previously stored data and ensures that the user is synchronized with other users in the session.

Components

  • Fluid Framework is a collection of client libraries for distributing and synchronizing shared state. These libraries allow multiple clients to simultaneously create and operate on shared data structures by using coding patterns similar to those used to work with local data.
  • Fluid Relay is a managed service of Fluid Framework. It helps developers build real-time collaborative experiences and replicate state across connected JavaScript clients in real time.
  • Microsoft Entra ID is the Microsoft cloud-based identity and access management service that helps your employees sign in and access resources.
  • Microsoft Graph Toolkit is a collection of reusable, framework-agnostic components and authentication providers for accessing and working with Microsoft Graph.
  • Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

Scenario details

Collaboration is critical to business efficiency and productivity. Tools like Microsoft Teams provide a great way to collaborate via chat, audio, and video. Word, Excel, and PowerPoint online make it easy to collaborate on various types of documents and spreadsheets with colleagues and customers around the world.

You can use Azure services to add real-time collaborative functionality to custom applications just as you do with off-the-shelf solutions. This solution shows how you can use libraries and Azure services to meet custom collaboration requirements. In addition to real-time collaboration, this solution supports user presence status. Users can work together in the custom app to collect ideas, see when new ideas are added, modified, or deleted in real time, and avoid data conflicts during collaboration sessions.

To meet these requirements, the solution uses Fluid Framework and Azure Fluid Relay. It authenticates users against Microsoft Entra ID by using the Login component of the Microsoft Graph Toolkit and the Microsoft Authentication Library (MSAL) provider.

Potential use cases

This solution applies to companies that build custom application solutions that require:

  • Secure application access.
  • Real-time data collaboration among multiple users.
  • Built-in collaboration data-storage capabilities.

Deploy this scenario

Get a code sample that demonstrates this scenario.

Contributors

This article is maintained by Microsoft. It was originally written by the following contributors.

Principal author:

Next steps

For more information about the technologies used in this solution, see these articles: