教學課程：使用 Azure Web PubSub 服務和 Azure Static Web Apps 建立無伺服器聊天應用程式

Azure Web PubSub 可協助您使用 WebSocket 建置即時傳訊 Web 應用程式。 Azure Static Web Apps 可協助您從程式碼存放庫中，自動建置完整堆疊 Web 應用程式，並部署至 Azure。 在本教學課程中，您會了解如何一起使用 Web PubSub 和 Static Web Apps 來建置即時聊天室應用程式。

更具體來說，您會了解如何：

  • 建置無伺服器聊天應用程式
  • 使用 Web PubSub 函式輸入與輸出繫結
  • 使用靜態 Web 應用程式

重要

原始 連接字串 只會出現在本文中，以供示範之用。

連接字串 包含你的應用程式存取 Azure Web PubSub 服務所需的授權資訊。 連接字串 中的存取鍵就像是你服務的根密碼。 在生產環境中，請一律保護您的存取金鑰。 使用 Azure 金鑰保存庫，安全地管理和輪替密鑰，並使用保護連線WebPubSubServiceClient。

避免將存取金鑰散發給其他使用者、寫入程式碼，或將其以純文字儲存在他人可以存取的位置。 如果您認為金鑰可能已遭盜用，請輪替金鑰。

概觀

顯示 Azure Web PubSub 如何與 Azure Static Web Apps 搭配運作的圖表。

GitHub 或 Azure Repos 提供 Static Web Apps 的原始程式碼控制。 Azure 會監視您選取的存放庫分支，而且每次來源存放庫有程式碼變更時，Web 應用程式的新組建會自動執行並部署至 Azure。 持續傳遞是由 GitHub Actions 和 Azure Pipelines 提供。 Static Web Apps 會偵測新的組建，並將其呈現給端點使用者。

本教學課程所提供的範例聊天室應用程式具有下列工作流程。

  1. 當使用者登入應用程式時，會觸發 Azure Functions login API 來產生 Web PubSub 服務用戶端連線 URL。
  2. 當用戶端初始化 Web PubSub 的連線要求時，該服務會傳送系統 connect 事件來觸發 Functions connect API，用以驗證使用者。
  3. 當用戶端將訊息傳送至 Azure Web PubSub 服務時，服務會以使用者 message 事件回應，並觸發 Functions message API 來廣播，訊息會傳送至所有連線的用戶端。
  4. 當 Azure Web PubSub 中的事件以預先定義的參數{event}（即 https://$STATIC_WEB_APP/api/{event}）進行設定時，會定期觸發 Functionsvalidate API，以用於 CloudEvents Abuse Protection。

注意

當 Azure Web PubSub 服務設定這兩個事件時，會觸發 Functions API connect 和 message。

必要條件

建立 Web PubSub 資源

  1. 使用下列命令來登入 Azure CLI。

    az login

  2. 建立資源群組。

    az group create \
  --name my-awps-swa-group \
  --location "eastus2"

  3. 建立 Web PubSub 資源。

    az webpubsub create \
  --name my-awps-swa \
  --resource-group my-awps-swa-group \
  --location "eastus2" \
  --sku Free_F1

  4. 取得並保存存取金鑰以供稍後使用。

    原始 連接字串 只會出現在本文中，以供示範之用。 在生產環境中，請一律保護您的存取金鑰。 使用 Azure 金鑰保存庫，安全地管理和輪替密鑰，並使用保護連線WebPubSubServiceClient。

    az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group

    AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>

    以先前步驟中 primaryConnectionString 的值取代預留位置 <YOUR_AWPS_ACCESS_KEY>。

建立存放庫

本文使用 GitHub 範本存放庫，讓您可以輕鬆地開始使用。 此範本包含可部署至 Azure Static Web Apps 的入門應用程式。

  1. 移至 https://github.com/Azure/awps-swa-sample/generate 以建立本教學課程的新存放庫。
  2. 將自己選為 Owner，並將存放庫命名為 my-awps-swa-app。
  3. 您可以根據您的喜好設定建立 [公用] 或 [私人] 存放庫。 這兩者都可以用在本教學中。
  4. 選取 [從範本建立存放庫]。

建立靜態 Web 應用程式

現在既已建立了存放庫，就可以從 Azure CLI 建立靜態 web 應用程式了。

  1. 建立變數來保存您的 GitHub 使用者名稱。

    GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>

    以您的 GitHub 使用者名稱取代預留位置 <YOUR_GITHUB_USER_NAME>。

  2. 從您的存放庫中建立新靜態 web 應用程式。 當您執行此命令時，CLI 會啟動 GitHub 互動式登入。 請遵循訊息來完成授權。

    az staticwebapp create \
    --name my-awps-swa-app \
    --resource-group my-awps-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
    --location "eastus2" \
    --branch main \
    --app-location "src" \
    --api-location "api" \
    --login-with-github

    重要

    傳遞至 --source 參數的 URL 不得包含 .git 尾碼。

  3. 移至 https://github.com/login/device。

  4. 輸入主控台訊息顯示的使用者代碼。

  5. 選取繼續。

  6. 選取 授權 AzureAppServiceCLI。

  7. 設定靜態 Web 應用程式設定。

    az staticwebapp appsettings set \
  -n my-awps-swa-app \
  --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa

檢視網站

部署靜態應用程式有兩個層面: 第一個會建立構成您應用程式的基礎 Azure 資源。 第二個為 GitHub Actions 工作流程，其會建置並發佈應用程式。

在您瀏覽至您的新靜態網站前，部署建置必須先完成執行。

  1. 返回主控台視窗，然後執行下列命令來列出與您應用程式相關聯的 URL。

    az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"

    此命令的輸出會傳回 GitHub 存放庫的 URL。

  2. 複製 存放庫 URL，並將它貼到瀏覽器中。

  3. 選取動作索引標籤。

    此時，Azure 會建立資源以支援靜態 Web 應用程式。 等待執行中工作流程旁邊的圖示變成帶有綠色背景的勾號 ✅。 此作業可能需要幾分鐘才能完成。

    成功圖示出現之後，工作流程就會完成，您可以返回主控台視窗。

  4. 執行下列命令來查詢網站的 URL。

    az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"

    保留此 URL，以便在 Web PubSub 事件處理常式中進行設定。

    STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>

設定 Web PubSub 事件處理常式

您已非常接近完成了。 最後一個步驟是設定 Web PubSub，以便將用戶端要求傳輸至您的函式 API。

  1. 執行下列命令以設定 Web PubSub 服務事件。 它會將存放庫中 api 資料夾下的函式對應至 Web PubSub 事件處理常式。

    az webpubsub hub create \
  -n "my-awps-swa" \
  -g "my-awps-swa-group" \
  --hub-name "sample_swa" \
  --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"

現在您已準備好開始操作您的網站 <YOUR_STATIC_WEB_APP>。 將其複製到瀏覽器，然後選取 [繼續]，開始與您的朋友聊天。

清除資源

如果您不打算繼續使用此應用程式，您可以執行下列命令來刪除資源群組和靜態 Web 應用程式。

az group delete --name my-awps-swa-group

下一步

在本快速入門中，您已了解如何開發和部署無伺服器聊天應用程式。 現在，您可以開始建置自己的應用程式。

盡情享受可遊玩試玩版的樂趣

適用於 Azure Functions 的 Azure Web PubSub 繫結

  • Last updated on