共用方式為

開始使用聊天 Hero 範例

  • 發行項

重要

您可在 GitHub 上取得此範例。

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

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

概觀

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

範例如下所示：

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

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

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

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

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

主要聊天畫面的元件：

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

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

必要條件

第一次執行範例之前

  1. 開啟 PowerShell 實例、Windows 終端機、命令提示字元或對等專案，並流覽至您要複製範例的目錄。

  2. 使用下列 CLI 字串複製存放庫：

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

    或使用複製現有 Git 存放庫中所述 的任何方法複製存放庫。

  3. Connection String Endpoint URL使用 Azure CLI 從 Azure 入口網站 或取得 與 。

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

    如需連接字串的詳細資訊，請參閱建立 Azure 通訊服務資源

  4. 取得 之後，Connection String請將 連接字串 新增至 [聊天] 資料夾下找到的伺服器/appsettings.json檔案。 在變數中輸入您的連接字串：ResourceConnectionString。

  5. 取得 之後， Endpoint請將端點字串新增至 Server/appsetting.json 檔案。 在變數中輸入您的端點： EndpointUrl。

  6. identity從 Azure 入口網站 取得 。 選取 Azure 入口網站 中的 [身分識別與使用者存取令牌]。 產生具有 Chat 範圍的使用者。

  7. 取得 identity 字串之後，請將識別字串新增至 Server/appsetting.json 檔案。 在變數中輸入您的識別字串： AdminUserId。 這是將新使用者新增至聊天對話的伺服器使用者。

本機執行

  1. 在 Server/appsettings.json 中設定您的連接字串
  2. 在 Server/appsettings.json 中設定您的端點 URL 字串
  3. 在 Server/appsettings.json 中設定您的 adminUserId 字串
  4. 根目錄的 npm run setup
  5. 根目錄的 npm run start

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

將範例發行至 Azure

  1. 在根目錄下，執行下列命令：
npm run setup
npm run build
npm run package
  1. 使用 Azure 延伸模組並將 Chat/dist 目錄部署至您的應用程式服務

清除資源

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

下一步

從 GitHub 下載範例

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

  • 範例 - 在我們的範例概觀頁面上尋找更多範例。
  • Redux - 用戶端狀態管理
  • FluentUI - Microsoft 支援的 UI 程式庫
  • React - 組建使用者介面的程式庫