|
| 1 | +--- |
| 2 | +title: 'Quickstart: Build chat app with Azure Function in Socket.IO Serverless Mode' |
| 3 | +description: In this artical, you will familiar with the samples of using Web PubSub for Socket.IO with Azure Function in Serverless Mode. |
| 4 | +keywords: Socket.IO, serverless, azure function, Socket.IO on Azure, multi-node Socket.IO, scaling Socket.IO, socketio, azure socketio |
| 5 | +author: zackliu |
| 6 | +ms.author: chenyl |
| 7 | +ms.date: 09/01/2024 |
| 8 | +ms.service: azure-web-pubsub |
| 9 | +ms.topic: tutorial |
| 10 | +zone_pivot_groups: programming-languages-set-functions |
| 11 | +--- |
| 12 | + |
| 13 | +# Quickstart: Build chat app with Azure Function in Socket.IO Serverless Mode (Preview) |
| 14 | + |
| 15 | +In this artical, you will use samples to familiar with how to build a chat app using Web PubSub for Socket.IO in Serverless Mode with Azure Function online and use Identity based authentication to secure your app. |
| 16 | + |
| 17 | +The project source uses the Bicep to deploy the infrastructure in Azure and Azure Function Core Tools to deploy the code to the Function App. |
| 18 | + |
| 19 | +## Prerequest |
| 20 | + |
| 21 | ++ An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?ref=microsoft.com&utm_source=microsoft.com&utm_medium=docs&utm_campaign=visualstudio). |
| 22 | + |
| 23 | ++ [Azure Functions Core Tools](functions-run-local.md#install-the-azure-functions-core-tools). |
| 24 | + |
| 25 | ++ [.NET 8.0 SDK](https://dotnet.microsoft.com/download) |
| 26 | + |
| 27 | +::: zone pivot="programming-language-typescript" |
| 28 | ++ [Node.js 18](https://nodejs.org/) |
| 29 | +::: zone-end |
| 30 | + |
| 31 | + |
| 32 | +## Get the sample code |
| 33 | + |
| 34 | +::: zone pivot="programming-language-typescript" |
| 35 | +Find the sample code: [Socket.IO Serverless Sample (TS)](https://github.com/Azure/azure-webpubsub/tree/main/sdk/webpubsub-socketio-extension/examples/chat-serverless-typescript) |
| 36 | + |
| 37 | +```bash |
| 38 | +git clone https://github.com/Azure/azure-webpubsub.git |
| 39 | +cd ./sdk/webpubsub-socketio-extension/examples/chat-serverless-typescript |
| 40 | +``` |
| 41 | +::: zone-end |
| 42 | + |
| 43 | +## Deploy infrastructure |
| 44 | + |
| 45 | +The chat samples need to deploy several services in Azure: |
| 46 | + |
| 47 | +- [Azure Function App](../azure-functions/functions-overview.md) |
| 48 | +- [Web PubSub for Socket.IO](./socketio-overview.md) |
| 49 | +- [Managed Identity](/entra/identity/managed-identities-azure-resources/how-manage-user-assigned-managed-identities): Identity for communicating between services |
| 50 | + |
| 51 | +We use [Bicep](../azure-resource-manager/bicep/overview.md) to deploy the infrastructure. The file locates in the `./infra` folder. Deploy it with the az command: |
| 52 | + |
| 53 | +```azcli |
| 54 | +az deployment sub create -n "<deployment-name>" -l "<deployment-location>" --template-file ./infra/main.bicep --parameters environmentName="<env-name>" location="<location>" |
| 55 | +``` |
| 56 | + |
| 57 | +- `<deployment-name>`: The name of the deployment. |
| 58 | +- `<deployment-location>`: The location of the deployment metadata. Note it's not the location where resources deploy to. |
| 59 | +- `<env-name>`: The name will be a part of the resource group name and resource name. |
| 60 | +- `<location>`: The location of the resources. |
| 61 | + |
| 62 | +### Review of the infrastructure |
| 63 | + |
| 64 | +In the infrastructure release, we deploy an Azure Function App in consumption plan as well as the Monitor and Storage Account that required by the Function App. We also deploy a Web PubSub for Socket.IO resource in Serverless Mode. |
| 65 | + |
| 66 | +For the identity based authentication purpose, we deploye a user-assigned managed identity, assign it to both Function App and Socket.IO resource and grant it with some permissions: |
| 67 | + |
| 68 | +- **Storage Blob Data Owner role**: Access storage for Function App |
| 69 | +- **Monitoring Metrics Publisher role**: Access monitor for Function App |
| 70 | +- **Web PubSub Service Owner role**: Access Web PubSub for Socket.IO for Function App |
| 71 | + |
| 72 | +As per [Configure your Azure Functions app to use Microsoft Entra sign-in](../app-service/configure-authentication-provider-aad.md), we create a Service Principal. To avoid using secret for the Service Principal, we use [Federated identity credentials](/graph/api/resources/federatedidentitycredentials-overview). |
| 73 | + |
| 74 | +## Deploy sample to the Function App |
| 75 | + |
| 76 | +We prepared a bash script to deploy the sample code to the Function App: |
| 77 | + |
| 78 | +```bash |
| 79 | +# Deploy the project |
| 80 | +./deploy/deploy.sh "<deployment-name>" |
| 81 | +``` |
| 82 | + |
| 83 | +### Review the deployment detail |
| 84 | + |
| 85 | +We need to do two steps to deploy the sample app. |
| 86 | + |
| 87 | +- Publish code to the Function App (Use Azure Functions Core Tools) |
| 88 | + |
| 89 | + ```bash |
| 90 | + func extensions sync |
| 91 | + npm install |
| 92 | + npm run build |
| 93 | + func azure functionapp publish <function-app-name> |
| 94 | + ``` |
| 95 | + |
| 96 | +- Configure the Web PubSub for Socket.IO to add a hub setting which can send request to the Function App. As per the limitation of Function App's Webhook provider, you need to get an extension key populated by Function. Get more details in [Trigger Binding](./socketio-serverless-function-binding.md#trigger-binding). And as we use identity-based authentication, in the hub settings, you need to assign the target resource, which is the clientId of the Service Principal created before. |
| 97 | + |
| 98 | + ```bash |
| 99 | + code=$(az functionapp keys list -g <resource-group> -n <function-name> --query systemKeys.socketio_extension -o tsv) |
| 100 | + 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>" |
| 101 | + ``` |
| 102 | + |
| 103 | +### Run Sample App |
| 104 | + |
| 105 | +After the code is deployed, visit the website to try the sample: |
| 106 | + |
| 107 | +```bash |
| 108 | +https://<function-endpoint>/api/index |
| 109 | +``` |
| 110 | + |
| 111 | +:::image type="content" source="./media/socketio-serverless-quickstart/chatsample.png" alt-text="Screenshot of the serverless chat app."::: |
| 112 | + |
| 113 | +## Next steps |
| 114 | +Next, you can follow the tutorial to write the app step by step: |
| 115 | + |
| 116 | +> [!div class="nextstepaction"] |
| 117 | +> [Tutorial: Build chat app with Azure Function in Serverless Mode](./socketio-serverless-tutorial.md) |
0 commit comments