page_type | description | products | languages | |||
---|---|---|---|---|---|---|
sample |
This sample demonstrates how to use the Microsoft Graph JavaScript SDK and the Microsoft Graph Toolkit to add Teams Chat to your app. |
|
|
This sample demonstrates how to use the Microsoft Graph JavaScript SDK to work with Team's from Angular single-page applications.
This sample doesn't follow Microsoft guidelines on polling (https://learn.microsoft.com/en-us/graph/api/resources/teams-api-overview?view=graph-rest-1.0#polling-requirements)
In high load scenarios, the client may be throttled polling for new Messages for a specific Chat. Delta queries aren't available for Chats (only Channels), so a (Subscription)[https://learn.microsoft.com/en-us/graph/teams-change-notification-in-microsoft-teams-overview] for change notifications and server-side webhook is necessary to get real-time updates.
This could be implemented varios ways.
- Use Serverless SignalR with Azure Functions to relay message updates in real-time using websockets. An example of this can be found in the Graph Notification Broker repository below.
- Use the Graph Notification Broker
- Incorporate the Microsoft Graph Toolkit Chat Component once it's out of Private Preview.
For more information about Graph API limits with Teams resources see:
- Microsoft Teams service throttling limits
- Set up notifications for changes in resource data
- Change notifications for Microsoft Teams resources
- Get change notifications for messages in Teams channels and chats using Microsoft Graph
To run the completed project in this folder, you need the following:
- Node.js installed on your development machine. If you do not have Node.js, visit the previous link for download options. (Note: This tutorial was written with Node version 16.4.2. The steps in this guide may work with other versions, but that has not been tested.)
- Angular CLI installed on your development machine.
- Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.
If you don't have a Microsoft account, there are a couple of options to get a free account:
- You can sign up for a new personal Microsoft account.
- You can sign up for the Microsoft 365 Developer Program to get a free Teams subscription.
-
Open a browser and navigate to the Azure Active Directory admin center. Login using a personal account (aka: Microsoft Account) or Work or School Account.
-
Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage
-
Select New registration. On the Register an application page, set the values as follows.
- Set Name to
Angular Graph Sample
. - Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
- Under Redirect URI, set the first drop-down to
Single-page application (SPA)
and set the value tohttp://localhost:4200
.
- Set Name to
-
Choose Register. On the Angular Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.
-
Rename the
environment.example.ts
file toenvironment.ts
. -
Edit the
environment.ts
file and make the following changes. -
Replace
<client-id>
with the Application Id you got from the App Registration Portal. -
Replace
<tenant-id>
with your provided Tenant Id. -
In your command-line interface (CLI), navigate to this directory and run the following command to install requirements.
npm install
-
Run the following command in your CLI to start the application.
npm start
-
Open a browser and browse to
http://localhost:4200
.
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 CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.