開始使用聊天主圖範例

重要

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

在本機電腦上執行範例之前，本文說明範例如何運作。接著，我們會使用您自己的 Azure 通訊服務資源，將範例部署至 Azure。

概觀

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

範例如下所示：

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

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

顯示應用程式預查畫面的螢幕快照。

設定顯示名稱和表情之後，您就可以加入聊天會話。現在您會看到主要的聊天介面，核心聊天體驗就在此處進行。

螢幕擷取畫面：顯示範例應用程式的主畫面。

主要聊天畫面的元件：

主要聊天區域：用戶可以傳送和接收訊息的核心聊天體驗。若要傳送訊息，您可以使用輸入區域，然後按 Enter 鍵 (或使用 [傳送] 按鈕)。聊天畫面會按寄件人排列已接收的聊天訊息，並顯示發件人的名稱和表情符號。您在聊天區域中看到兩種類型的通知：1）在使用者輸入時輸入通知，以及 2）傳送和讀取訊息的通知。
標頭：使用者在何處看到聊天線程的標題，以及切換參與者和設定側邊欄的控件，以及結束聊天會話的離開按鈕。
側邊列：使用標頭中的控制切換時，參與者和設定資訊會顯示的位置。參與者側邊欄包含聊天中的參與者清單，以及邀請參與者加入聊天工作階段的連結。設定側邊欄可讓您設定聊天對話標題。

完成下列必要條件和步驟來建立範例。

開啟一個 PowerShell 視窗、Windows Terminal、命令提示字元或類似的程序，然後瀏覽至您想要克隆範例的目錄。
使用下列 CLI 字串複製存放庫：

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

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

您可以在本機測試範例，方法是開啟多個瀏覽器工作階段，其中包含聊天的 URL 來模擬多使用者聊天。

在根目錄下，執行下列命令：

npm run setup
npm run build
npm run package

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

如需詳細資訊，請參閱：