Ismerkedés a csevegési főhős mintával

A Azure Communication Services Csoportos csevegés fő képe bemutatja, hogyan használható a Communication Services Chat Web SDK a csoportos csevegési élmény létrehozásához.

Ebben a minta rövid útmutatóban megtudhatja, hogyan működik a minta, mielőtt futtatnánk a mintát a helyi gépen. Ezután a mintát a saját Azure Communication Services erőforrásaival fogjuk üzembe helyezni az Azure-ban.

Áttekintés

A minta ügyféloldali és kiszolgálóoldali alkalmazással is rendelkezik. Az ügyféloldali alkalmazás egy React/Redux webalkalmazás, amely a Microsoft Fluent felhasználói felületi keretrendszerét használja. Ez az alkalmazás kéréseket küld egy Node.js kiszolgálóoldali alkalmazásnak , amely segít az ügyféloldali alkalmazásnak az Azure-hoz való csatlakozásban.

A minta a következőképpen néz ki:

Képernyőkép a mintaalkalmazás kezdőlapjáról.

Amikor lenyomja a "Csevegés indítása" gombot, a webalkalmazás lekéri a felhasználó hozzáférési jogkivonatát a kiszolgálóoldali alkalmazásból. Ez a jogkivonat ezután az ügyfélalkalmazás Azure Communication Services való csatlakoztatására szolgál. A jogkivonat lekérése után a rendszer kérni fogja, hogy adja meg a nevét és az emojiját, amely a csevegésben önt fogja képviselni.

Képernyőkép az alkalmazás csevegés előtti képernyőjét ábrázoló képernyőről.

Miután konfigurálta a megjelenítendő nevet és az emojit, csatlakozhat a csevegési munkamenethez. Most látni fogja a fő csevegési vásznon, ahol az alapvető csevegési élmény él.

Képernyőkép a mintaalkalmazás főképernyőjén.

A fő csevegési képernyő összetevői:

  • Fő csevegési terület: Ez az alapvető csevegési felület, ahol a felhasználók üzeneteket küldhetnek és fogadhatnak. Üzenetek küldéséhez használja a beviteli területet, és nyomja le az Enter billentyűt (vagy használja a Küldés gombot). A fogadott csevegőüzeneteket a feladó a megfelelő névvel és emojival kategorizálja. A csevegőterületen kétféle értesítés jelenik meg: 1) begépelt értesítések a felhasználó gépelésekor, 2) értesítések küldése és olvasása az üzenetekhez.
  • Fejléc: Itt láthatja a felhasználó a csevegési szál címét, valamint a résztvevők és beállítások oldalsávjainak összesítésére szolgáló vezérlőket, valamint egy kilépési gombot a csevegési munkamenetből való kilépéshez.
  • Oldalsáv: Itt jelennek meg a résztvevők és a beállítási információk, amikor a fejléc vezérlőivel váltanak. A résztvevők oldalsávja tartalmazza a csevegés résztvevőinek listáját, valamint egy hivatkozást, amely meghívja a résztvevőket a csevegési munkamenetbe. A beállítások oldalsávja lehetővé teszi a csevegési szál címének konfigurálását.

Az alábbiakban további információkat talál az előfeltételekről és a minta beállításának lépéseiről.

Előfeltételek

A minta első futtatása előtt

  1. Nyisson meg egy PowerShell-példányt, Windows Terminált, parancssort vagy azzal egyenértékűet, és keresse meg azt a könyvtárat, amelybe a mintát klónozni szeretné.

  2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git

  3. Szerezze be az Connection String és Endpoint URL lehetőséget az Azure Portalról vagy az Azure CLI használatával.

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
    

    További információ a kapcsolati sztringekről: Azure Communication Services-erőforrások létrehozása

  4. Miután megkapta a és Endpoint URLa Connection String értéket, adja hozzá mindkét értéket a Chat Hero Minta mappában található Server/appsettings.json fájlhoz. Adja meg a kapcsolati sztring a változóban: ResourceConnectionString és végpont URL-címe a változóban: EndpointUrl.

Helyi futtatás

  1. A kapcsolati sztring beállításaServer/appsettings.json
  2. A végpont URL-sztringjének beállítása a következőben: Server/appsettings.json
  3. A adminUserId sztring beállítása a következőben: Server/appsettings.json
  4. npm run setup a gyökérkönyvtárból
  5. npm run start a gyökérkönyvtárból

A mintát helyileg tesztelheti, ha több böngésző munkamenetet nyit meg a csevegés URL-címével a többfelhasználós csevegés szimulálásához.

A minta közzététele az Azure-ban

  1. A gyökérkönyvtárban futtassa az alábbi parancsokat:
npm run setup
npm run build
npm run package
  1. Használja az Azure-bővítményt, és telepítse a Chat/dist könyvtárat az app service-ben

Az erőforrások eltávolítása

Ha törölni és eltávolítani szeretne egy Communication Services-előfizetést, törölheti az erőforrást vagy az erőforráscsoportot. Az erőforráscsoport törlése a hozzá társított egyéb erőforrásokat is törli. További információ az erőforrások eltávolításáról.

Következő lépések

További információért tekintse át a következő cikkeket:

További információ

  • Minták – További mintákat és példákat találhat a minták áttekintési oldalán.
  • Redux – Ügyféloldali állapotkezelés
  • FluentUI – Microsoft-alapú felhasználói felületi kódtár
  • React – Kódtár felhasználói felületek létrehozására