共用方式為

快速入門：在 Socket.IO 無伺服器模式中使用 Azure 函式建置聊天應用程式 （預覽）

在本文中，您將瞭解如何使用 Web PubSub 建置聊天應用程式，以搭配 Azure Functions 在無伺服器模式中 Socket.IO。 本教學課程將引導您在在線工作時使用身分識別型驗證來保護應用程式。

專案來源會使用 Bicep 在 Azure 上部署基礎結構，以及 Azure Functions Core Tools 將程式碼部署至函式應用程式。

必要條件

取得範例程式碼

尋找範例程式代碼： Socket.IO 無伺服器範例 （TS）

git clone https://github.com/Azure/azure-webpubsub.git
cd ./sdk/webpubsub-socketio-extension/examples/chat-serverless-typescript

部署基礎結構

聊天範例需要在 Azure 中部署數個服務：

我們使用 Bicep 來部署基礎結構。 檔案位於 ./infra 資料夾中。 使用 az 命令加以部署：

az deployment sub create -n "<deployment-name>" -l "<deployment-location>" --template-file ./infra/main.bicep --parameters environmentName="<env-name>" location="<location>"
  • <deployment-name>：部署的名稱。
  • <deployment-location>：部署元數據的位置。 請注意，這不是資源部署所在的位置。
  • <env-name>：名稱是資源組名和資源名稱的一部分。
  • <location>：資源的位置。

檢閱基礎結構

在基礎結構版本中，我們會在取用方案中部署 Azure 函式應用程式，以及函式應用程式所需的監視和記憶體帳戶。 我們也在無伺服器模式中為 Socket.IO 資源部署 Web PubSub。

基於身分識別的驗證目的，我們會部署使用者指派的受控識別、將它指派給函式應用程式和 Socket.IO 資源，並授與一些許可權：

  • 記憶體 Blob 資料擁有者角色：存取函式應用程式的記憶體
  • 監視計量發行者角色：函式應用程式的存取監視器
  • Web PubSub 服務擁有者角色：存取函式應用程式的 Socket.IO Web PubSub

根據設定 您的 Azure Functions 應用程式以使用 Microsoft Entra 登入，我們會建立服務主體。 為了避免使用服務主體的秘密，我們會使用 同盟身分識別認證。

將範例部署至函式應用程式

我們已準備bash文稿，以將範例程式代碼部署至函式應用程式：

# Deploy the project
./deploy/deploy.sh "<deployment-name>"

檢閱部署詳細數據

我們需要執行兩個步驟來部署範例應用程式。

  • 將程式代碼發佈至函式應用程式 （使用 Azure Functions Core Tools）

    func extensions sync
npm install
npm run build
func azure functionapp publish <function-app-name>

  • 設定 Socket.IO 的 Web PubSub，以新增可將要求傳送至函式應用程式的中樞設定。 根據函式應用程式的 Webhook 提供者限制，您需要取得函式所填入的延伸模組密鑰。 在觸發程式系結中取得更多詳細數據。 當我們使用身分識別型驗證時，在中樞設定中，您必須指派目標資源，這是之前所建立服務主體的 clientId。

    code=$(az functionapp keys list -g <resource-group> -n <function-name> --query systemKeys.socketio_extension -o tsv)
az webpubsub hub create -n <socketio-name> -g <resource-group> --hub-name "hub" --event-handler url-template="https://${<function-name>}.azurewebsites.net/runtime/webhooks/socketio?code=${code}" user-event-pattern="*" auth-type="ManagedIdentity" auth-resource="<service-principal-client-id>"

執行範例應用程式

部署程式代碼之後，請造訪網站以嘗試範例：

https://<function-endpoint>/api/index

無伺服器聊天應用程式的螢幕快照。

下一步

接下來，您可以依照教學課程逐步撰寫應用程式：

教學課程：在無伺服器模式中使用 Azure 函式建置聊天應用程式

  • Last updated on