Začínáme s příkladem skupiny Hero chat

Ukázka konverzace Hero ve skupině komunikačních služeb Azure představuje způsob, jakým se dá web SDK komunikačních služeb použít k sestavení prostředí pro volání skupiny.

V tomto rychlém startu se dozvíte, jak ukázka funguje před spuštěním ukázky na místním počítači. Pak nasadíme ukázku do Azure s využitím vlastních prostředků služby Azure Communication Services.

Přehled

Ukázka obsahuje aplikaci na straně klienta i aplikaci na straně serveru. aplikace na straně klienta je webová aplikace React/Redux, která používá rozhraní Fluent uživatelského rozhraní Microsoft. tato aplikace posílá požadavky na ASP.NET Core aplikace na straně serveru , která pomáhá aplikaci na straně klienta připojit se k Azure.

Ukázka vypadá takto:

Po stisknutí tlačítka Spustit chat načte webová aplikace token přístupu uživatele z aplikace na straně serveru. Tento token se pak použije k připojení klientské aplikace ke komunikačním službám Azure. Po načtení tokenu se zobrazí výzva k zadání vašeho jména a Emoji, která bude představovat chat.

Jakmile nakonfigurujete své zobrazované jméno a Emoji, můžete se připojit k relaci chatu. Teď se zobrazí hlavní plátno pro chat, kde se nachází v základním prostředí chatu.

Součásti hlavní obrazovky chatu:

• Hlavní oblast chatu: Toto je základní prostředí pro chat, kde mohou uživatelé odesílat a přijímat zprávy. Chcete-li odesílat zprávy, můžete použít vstupní oblast a stisknout klávesu ENTER (nebo použít tlačítko Odeslat). Přijaté zprávy chatu jsou zařazeny do kategorie odesílatelem se správným názvem a emoji. V oblasti chatu se zobrazí dva typy oznámení: 1) psaní oznámení, když uživatel zadá a 2) odesílá a čte oznámení pro zprávy.
• Záhlaví: uživateli se zobrazí název konverzačního vlákna a ovládací prvky pro přepnutí účastníků a nastavení a tlačítko opustit k ukončení relace chatu.
• Boční panel: v tomto případě se zobrazí účastníci a informace o nastavení při přepínání pomocí ovládacích prvků v záhlaví. Boční panel účastníci obsahuje seznam účastníků v chatu a odkaz pro pozvání účastníků do relace chatu. Postranní panel nastavení vám umožní nakonfigurovat název vlákna chatu.

Níže najdete další informace o požadavcích a krocích pro nastavení ukázky.

Požadavky

• Vytvořte si účet Azure s aktivním předplatným. Podrobnosti najdete v článku o Vytvoření účtu zdarma.
• Node.js (8.11.2 a vyšší)
• Visual Studio (2017 a novější)
• .NET Core 3,1 (Ujistěte se, že je nainstalována verze, která odpovídá vaší instanci sady Visual studio, 32 vs 64 bitů)
• Vytvořte prostředek služby Azure Communication Services. Podrobnosti najdete v tématu vytvoření prostředku služby Azure Communication Services. Pro tento rychlý Start budete muset zaznamenat připojovací řetězec prostředků.

Místní nasazení klientské aplikace & služby

Ukázka konverzace s jedním vláknem je v podstatě dvě aplikace klienta a serveru.

otevřete Visual Studio na chatu. csproj a spusťte v režimu ladění. tím se spustí front-end služba chatu. Když se serverová aplikace navštíví z prohlížeče, přesměruje provoz směrem do místně nasazené služby front-end chatu.

Ukázku můžete otestovat místně tak, že otevřete několik relací prohlížeče s adresou URL chatu pro simulaci konverzace s více uživateli.

Před prvním spuštěním ukázky

1. otevřete instanci prostředí PowerShell, Terminál Windows, příkazový řádek nebo ekvivalentní a přejděte do adresáře, do kterého chcete ukázku naklonovat.
2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
3. Získat Connection String z Azure Portal. Další informace o připojovacích řetězcích najdete v tématu vytvoření prostředků služby Azure Communication Services .
4. Po získání přidejte do Connection String souboru chat/appSettings. JSON , který se nachází ve složce chat, připojovací řetězec. Zadejte připojovací řetězec do proměnné: ResourceConnectionString .

Místní spuštění

1. Přejít do složky chat a otevřít Chat.csproj řešení v Visual Studio
2. Spusťte projekt. Prohlížeč se otevře v localhost: 5000.

Řešení potíží

• Řešení se nevytvoří, vyvolá chyby během instalace/buildu NPM.

  Vyčistit/znovu sestavit řešení C#

Publikování ukázky do Azure

1. Klikněte pravým tlačítkem na Chat projekt a vyberte publikovat.
2. Vytvořte nový publikační profil a vyberte své předplatné Azure.
3. Před publikováním přidejte připojovací řetězec s a zadejte Edit App Service Settings ResourceConnectionString jako klíč a jako hodnotu zadejte připojovací řetězec (zkopírovaný z appSettings. JSON).

Vyčištění prostředků

Pokud chcete vyčistit a odebrat předplatné služby Communications Services, můžete prostředek nebo skupinu prostředků odstranit. Odstraněním skupiny prostředků se odstraní také všechny další prostředky, které jsou k ní přidružené. Přečtěte si další informace o vyčištění prostředků.

Další kroky

Další informace najdete v následujících článcích:

• Další informace o konceptech chatu
• Seznamte se s naší sadou Chat SDK
• Kontrola ukázky aplikace Contoso med

Další materiály ke čtení

• Ukázky – další ukázky a příklady najdete na stránce s přehledem ukázek.
• Redux – Správa stavu na straně klienta
• FluentUI – knihovna rozhraní založená na Microsoftu
• knihovna React pro sestavování uživatelských rozhraní
• ASP.NET Core – rozhraní pro vytváření webových aplikací