Snabb start: kom igång med sammansatta UI Framework-komponenterQuickstart: Get started with UI Framework Composite Components

Viktigt

Funktioner som beskrivs i det här dokumentet finns för närvarande i privat för hands version.Functionality described on this document is currently in private preview. Privat för hands version innehåller åtkomst till SDK: er och dokumentation för testnings ändamål som ännu inte är tillgängliga offentligt.Private preview includes access to SDKs and documentation for testing purposes that are not yet available publicly. Ansök om att bli en tidig antagande genom att fylla i formuläret för för hands versions åtkomst till Azure Communication Services.Apply to become an early adopter by filling out the form for preview access to Azure Communication Services.

Kom igång med Azure Communication Services genom att använda UI-ramverket för att snabbt integrera kommunikations upplevelser i dina program.Get started with Azure Communication Services by using the UI Framework to quickly integrate communication experiences into your applications. I den här snabb starten får du lära dig hur du integrerar integrerade GRÄNSSNITTs Ramverks komponenter i ditt program för att bygga kommunikations upplevelser.In this quickstart, you'll learn how integrate UI Framework Composite Components into your application to build communication experiences.

FörutsättningarPrerequisites

KonfigureraSetting up

UI-ramverket kräver att en reagerar-miljö ska installeras.UI Framework requires a React environment to be setup. Nu ska vi göra det.Next we will do that. Om du redan har en reagerar-app kan du hoppa över det här avsnittet.If you already have a React App, you can skip this section.

Konfigurera appen reageraSet Up React App

Vi kommer att använda mallen Create-reakta-app för den här snabb starten.We will use the create-react-app template for this quickstart. Mer information finns i: Kom igång med reageraFor more information, see: Get Started with React


npx create-react-app my-app

cd my-app

I slutet av den här processen bör du ha ett fullständigt program i mappen my-app .At the end of this process, you should have a full application inside of the folder my-app. I den här snabb starten kommer vi att ändra filer i src mappen.For this quickstart, we'll be modifying files inside of the src folder.

Installera paketetInstall the package

Använd npm install kommandot för att installera Azure Communication Services som anropar SDK för Java Script.Use the npm install command to install the Azure Communication Services Calling SDK for JavaScript. Flytta den angivna tarball (privat förhands granskning) till katalogen My-app.Move the provided tarball (Private Preview) over to the my-app directory.


//Private Preview install tarball

npm install --save ./{path for tarball}

I det här --save alternativet visas biblioteket som ett beroende i package.jsi filen.The --save option lists the library as a dependency in your package.json file.

Kör skapa reakta appRun Create React App

Låt oss testa installationen av att reagera på appen genom att köra:Let's test the Create React App installation by running:


npm run start 

Objekt modellObject model

Följande klasser och gränssnitt hanterar några av de viktigaste funktionerna i Azure Communication Services UI SDK:The following classes and interfaces handle some of the major features of the Azure Communication Services UI SDK:

NameName BeskrivningDescription
GroupCallGroupCall Sammansatt komponent som återger en grupp som anropar erfarenhet med deltagar galleriet och kontroller.Composite component that renders a group calling experience with participant gallery and controls.
GroupChatGroupChat Sammansatt komponent som återger en grupps Chat-upplevelse med Chat-tråd och-ingångarComposite component that renders a group chat experience with chat thread and input

Initiera grupp anrop och sammansatta grupp Chat-komponenterInitialize Group Call and Group Chat Composite Components

Gå till src mappen i my-app och leta efter filen app.js .Go to the src folder inside of my-app and look for the file app.js. Här ska vi ta bort följande kod för att initiera våra sammansatta komponenter för grupp-chatt och anropa.Here we'll drop the following code to initialize our Composite Components for Group Chat and Calling. Du kan välja vilken som ska användas beroende på vilken typ av kommunikations upplevelse som du skapar.You can choose which one to use depending on the type of communication experience you're building. Om det behövs kan du använda båda samtidigt.If needed, you can use both at the same time. För att initiera komponenterna behöver du en åtkomsttoken som hämtats från Azure Communication Services.To initialize the components, you'll need an access token retrieved from Azure Communication Services. Mer information om hur du hämtar åtkomsttoken finns i: skapa och hantera token för användar åtkomst.For details on how to do get access tokens, see: create and manage user access tokens.

Anteckning

Komponenterna genererar inte åtkomsttoken, grupp-ID eller tråd-ID.The components don't generate access tokens, group IDs, or thread IDs. Dessa element kommer från tjänster som går igenom de rätta stegen för att generera dessa ID: n och skicka dem till klient programmet.These elements come from services that go through the proper steps to generate these IDs and pass them to the client application. Mer information finns i: klient server arkitektur.For more information, see: Client Server Architecture.

Till exempel: gruppen chatt userId sammanfattar att den som är kopplad till den som token används för att initiera den redan är ansluten till den som threadId tillhandahålls.For Example: The Group Chat composite expects that the userId associated to the token being used to initialize it has already been joined to the threadId being provided. Om token inte har anslutits till tråd-ID: t kommer gruppens Chat sammansatt att Miss sen.If the token hasn't been joined to the thread ID, then the Group Chat composite will fail. Mer information om chatt finns i: komma igång med chattFor more information on chat, see: Getting Started with Chat

App.js


import {GroupCall, GroupChat} from "@azure/acs-ui-sdk"

function App(){

    return(<>
        {/* Example styling provided, developers can provide their own styling to position and resize components */}
        <div style={{height: "35rem", width: "50rem", float: "left"}}>
            <GroupCall
                displayName={DISPLAY_NAME} //Required, Display name for the user entering the call
                token={TOKEN} // Required, Azure Communication Services access token retrieved from authentication service
                refreshTokenCallback={CALLBACK} //Optional, Callback to refresh the token in case it expires
                groupId={GROUPID} //Required, Id for group call that will be joined. (GUID)
                onEndCall = { () => {
                    //Optional, Action to be performed when the call ends
                }}
            />
        </div>

        {/*Note: Make sure that the userId associated to the token has been added to the provided threadId*/}
        {/* Example styling provided, developers can provide their own styling to position and resize components */}
        <div style={{height: "35rem", width: "30rem", float: "left"}}>
            <GroupChat 
                displayName={DISPLAY_NAME} //Required, Display name for the user entering the call
                token={TOKEN} // Required, Azure Communication Services access token retrieved from authentication service
                threadId={THREADID} //Required, Id for group chat thread that will be joined.
                endpointUrl={ENDPOINT_URL} //Required, URL for Azure endpoint being used for Azure Communication Services
                onRenderAvatar = { (acsId) => {
                    //Optional, function to override the avatar image on the chat thread. Function receives one parameters for the Azure Communication Services Identity. Must return a React element.
                }}
                refreshToken = { () => {
                    //Optional, function to refresh the access token in case it expires
                }}
                options = {{
                    //Optional, options to define chat behavior
                    sendBoxMaxLength: number | undefined //Optional, Limit the max send box length based on viewport size change.
                }}
            />
        </div>
    </>);
}

export default App;

Kör snabb startRun quickstart

Om du vill köra koden ovan använder du kommandot:To run the code above, use the command:


npm run start 

Om du vill testa funktionerna fullständigt behöver du en andra klient med anropa och chatta för att ansluta till anrops-och chatt-tråden.To fully test the capabilities, you will need a second client with calling and chat functionality to join the call and chat thread. Se vårt exempel på samtals hjälte och chatt-exempel som möjliga alternativ.See our Calling Hero Sample and Chat Hero Sample as potential options.

Rensa resurserClean up resources

Om du vill rensa och ta bort en kommunikations tjänst prenumeration kan du ta bort resursen eller resurs gruppen.If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Om du tar bort resurs gruppen raderas även andra resurser som är kopplade till den.Deleting the resource group also deletes any other resources associated with it. Läs mer om att Rensa resurser.Learn more about cleaning up resources.

Nästa stegNext steps

Mer information finns i följande resurser:For more information, see the following resources: