開始使用聊天 Hero 範例

重要

Azure 通訊服務群組聊天主圖範例示範如何使用通訊服務聊天Web SDK來建置群組聊天體驗。

在此範例快速入門中，我們會先瞭解範例的運作方式，再於本機計算機上執行範例。然後，我們會使用您自己的 Azure 通訊服務資源，將範例部署至 Azure。

概觀

這個範例同時具有用戶端應用程式和伺服器端應用程式。 用戶端應用程式是使用 Microsoft Fluent UI 架構的 React/Redux Web 應用程式。此應用程式會將要求傳送至Node.js 伺服器端應用程式 ，以協助用戶端應用程式連線至 Azure。

以下是範例的外觀：

顯示範例應用程式登陸頁面的螢幕快照。

當您按 [開始聊天] 時，Web 應用程式會從伺服器端應用程式擷取使用者存取令牌。接著，您可以使用此令牌將用戶端應用程式連線至 Azure 通訊服務。擷取令牌之後，系統會提示您輸入名稱，並選擇 Emoji 來代表您在聊天中。

顯示應用程式聊天前畫面的螢幕快照。

設定顯示名稱和 emoji 之後，您就可以加入聊天工作階段。現在您會看到核心聊天體驗所在的主要聊天畫布。

顯示範例應用程式主畫面的螢幕快照。

主要聊天畫面的元件：

主要聊天區域：用戶可以傳送和接收訊息的核心聊天體驗。若要傳送訊息，您可以使用輸入區域，然後按 Enter 鍵（或使用傳送按鈕）。已接收的聊天訊息會由具有正確名稱和 Emoji 的寄件者組織。您在聊天區域中看到兩種類型的通知：1）在使用者輸入時輸入通知，以及 2）傳送和讀取訊息的通知。
標頭：使用者在何處看到聊天線程的標題，以及切換參與者和設定側邊欄的控件，以及結束聊天會話的離開按鈕。
側邊列：使用標頭中的控件切換時，參與者和設定資訊會顯示在哪裡。參與者側邊列包含聊天中的參與者清單，以及邀請參與者加入聊天會話的連結。設定側邊欄可讓您設定聊天對話標題。

完成下列必要條件和步驟來設定範例。

開啟 PowerShell 實例、Windows 終端機、命令提示字元或對等專案，並流覽至您想要複製範例的目錄。
使用下列 CLI 字串複製存放庫：

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

或使用複製現有 Git 存放庫中所述的任何方法複製存放庫。
Connection String使用 Azure CLI 從 Azure 入口網站或取得與 Endpoint URL 。
```
az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
```
如需連接字串的詳細資訊，請參閱建立 Azure 通訊服務資源
取得之後，Connection String請將連接字串新增至 [聊天] 資料夾下找到的伺服器/appsettings.json檔案。在變數中輸入您的連接字串：ResourceConnectionString。
取得之後， Endpoint請將端點字串新增至 Server/appsetting.json 檔案。在變數中輸入您的端點： EndpointUrl。
identity從 Azure 入口網站取得。在 Azure 入口網站中選取 [身分識別與使用者存取令牌]。產生具有 Chat 範圍的使用者。
取得 identity 字串之後，請將識別字串新增至 Server/appsetting.json 檔案。在變數中輸入您的識別字串： AdminUserId。這是將新使用者新增至聊天對話的伺服器使用者。

您可以使用聊天的 URL 開啟多個瀏覽器會話來模擬多使用者聊天，以在本機測試範例。

npm run setup
npm run build
npm run package

如果您想要清除並移除通訊服務訂用帳戶，您可以刪除資源或資源群組。刪除資源群組也會刪除與其相關聯的任何其他資源。深入瞭解清除資源。

如需詳細資訊，請參閱下列文章：