開始使用聊天 Hero 範例
Azure 通訊服務 群組聊天主圖範例示範如何使用通訊服務聊天Web SDK來建置群組聊天體驗。
在此範例快速入門中，我們會先瞭解範例的運作方式，再於本機計算機上執行範例。 然後，我們會使用您自己的 Azure 通訊服務 資源，將範例部署至 Azure。
概觀
這個範例同時具有用戶端應用程式和伺服器端應用程式。 用戶端應用程式是使用 Microsoft Fluent UI 架構的 React/Redux Web 應用程式。 此應用程式會將要求傳送至Node.js 伺服器端應用程式 ，以協助用戶端應用程式連線至 Azure。
以下是範例的外觀：
當您按 [開始聊天] 時，Web 應用程式會從伺服器端應用程式擷取使用者存取令牌。 接著，您可以使用此令牌將用戶端應用程式連線至 Azure 通訊服務。 擷取令牌之後，系統會提示您輸入名稱，並選擇 Emoji 來代表您在聊天中。
設定顯示名稱和 emoji 之後，您就可以加入聊天工作階段。 現在您會看到核心聊天體驗所在的主要聊天畫布。
主要聊天畫面的元件：
- 主要聊天區域：用戶可以傳送和接收訊息的核心聊天體驗。 若要傳送訊息，您可以使用輸入區域，然後按 Enter 鍵（或使用傳送按鈕）。 已接收的聊天訊息會由具有正確名稱和 Emoji 的寄件者組織。 您在聊天區域中看到兩種類型的通知：1） 在使用者輸入時輸入通知，以及 2） 傳送和讀取訊息的通知。
- 標頭：使用者在何處看到聊天線程的標題，以及切換參與者和設定側邊欄的控件，以及結束聊天會話的離開按鈕。
- 側邊列：使用標頭中的控件切換時，參與者和設定資訊會顯示在哪裡。 參與者側邊列包含聊天中的參與者清單，以及邀請參與者加入聊天會話的連結。 設定側邊欄可讓您設定聊天對話標題。
完成下列必要條件和步驟來設定範例。
必要條件
- Visual Studio Code （穩定組建） 。
- Node.js （16.14.2 和更新版本） 。
- 建立具有作用中訂用帳戶的 Azure 帳戶。 如需詳細資訊，請參閱 免費建立帳戶。
- 建立 Azure 通訊服務資源。 如需詳細資訊，請參閱 建立 Azure 通訊資源。 記錄您的資源 連接字串 本快速入門。
第一次執行範例之前
開啟 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。 這是將新使用者新增至聊天對話的伺服器使用者。
本機執行
- 在中設定您的 連接字串
Server/appsettings.json - 在中設定端點 URL 字串
Server/appsettings.json - 在 中設定 adminUserId 字串
Server/appsettings.json npm run setup從根目錄npm run start從根目錄
您可以使用聊天的 URL 開啟多個瀏覽器會話來模擬多使用者聊天，以在本機測試範例。
將範例發佈至 Azure
- 在根目錄下，執行下列命令：
npm run setup
npm run build
npm run package
- 使用 Azure 擴充功能並將 Chat/dist 目錄部署至您的應用程式服務
清除資源
如果您想要清除並移除通訊服務訂用帳戶，您可以刪除資源或資源群組。 刪除資源群組也會刪除與其相關聯的任何其他資源。 深入瞭解清除 資源。
下一步
如需詳細資訊，請參閱下列文章：