Tutorial: criar um aplicativo de notificação sem servidor com o Azure Functions e o serviço Azure Web PubSub

Artigo
01/12/2024

O serviço Azure Web PubSub ajuda você a criar aplicativos Web de mensagens em tempo real usando WebSockets. O Azure Functions é uma plataforma sem servidor que permite executar seu código sem gerenciar qualquer infraestrutura. Neste tutorial, você aprenderá a usar o serviço Azure Web PubSub e o Azure Functions para criar um aplicativo sem servidor com mensagens em tempo real em cenários de notificação.

Neste tutorial, você aprenderá como:

Criar um aplicativo de notificação sem servidor
Trabalhar com associações de entrada e saída de função do Web PubSub
Executar as funções de exemplo localmente
Implantar a função no aplicativo de funções do Azure

Pré-requisitos

Um editor de códigos, como o Visual Studio Code
Node.js, versão 18.x ou superior.

Observação

Para obter mais informações sobre as versões compatíveis do Node.js, confira a documentação das versões de runtime do Azure Functions.
Azure Functions Core Tools (V4 ou superior, preferencialmente) para executar aplicativos de função do Azure localmente e implantar no Azure.
A CLI do Azure para gerenciar recursos do Azure.

Caso você não tenha uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.

Entre no portal do Azure em https://portal.azure.com/ com sua conta do Azure.

Criar uma instância do serviço Azure Web PubSub

Seu aplicativo se conectará a uma instância do serviço Web PubSub no Azure.

Selecione no botão Novo localizado no canto superior esquerdo do portal do Azure. Na tela Novo, digite Web PubSub na caixa de pesquisa e pressione ENTER. (Você também pode pesquisar o Azure Web PubSub na categoria Web.)
Selecione Web PubSub nos resultados da pesquisa e escolha Criar.

Insira as configurações a seguir.

Configuração	Valor sugerido	Descrição
Nome do recurso	Nome globalmente exclusivo	O Nome globalmente exclusivo que identifica a nova instância do serviço Azure Web PubSub. Os caracteres válidos são `a-z`, `A-Z`, `0-9` e `-`.
Assinatura	Sua assinatura	A assinatura do Azure na qual essa nova instância do serviço Azure Web PubSub será criada.
Grupo de Recursos	myResourceGroup	Nome do novo grupo de recursos no qual a instância do serviço Azure Web PubSub será criada.
Localidade	Oeste dos EUA	Selecione uma região perto de você.
Tipo de preços	Grátis	Primeiro, você pode experimentar o serviço Azure Web PubSub gratuitamente. Saiba mais detalhes sobre os tipos de preços do serviço Azure Web PubSub
Contagem de unidades	-	A contagem de unidades especifica quantas conexões a instância do serviço Azure Web PubSub pode aceitar. Cada unidade dá suporte a, no máximo, 1.000 conexões simultâneas. Só é configurável na camada Standard.

Screenshot of creating the Azure Web PubSub instance in portal.

Selecione Criar para começar a implantar a instância do serviço Azure Web PubSub.

Criar e executar as funções localmente

Verifique se você tem o Azure Functions Core Tools instalado. Agora, crie um diretório vazio para o projeto. Execute o comando neste diretório de trabalho. Use uma das opções fornecidas abaixo.
```
func init --worker-runtime javascript --model V4
```
```
func init --worker-runtime javascript --model V3
```
```
func init --worker-runtime dotnet
```
```
func init --worker-runtime dotnet-isolated
```
```
func init --worker-runtime python --model V1
```
Siga as etapas para instalar Microsoft.Azure.WebJobs.Extensions.WebPubSubo .
Confirme ou atualize host.jsono extensionBundle do para a versão 4.* ou posterior para obter suporte ao Web PubSub. Para atualizar o , abra o host.jsonarquivo no editor e substitua a versão existente extensionBundle para a versão 4.* ou posterior.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Confirme ou atualize host.jsono extensionBundle do para a versão 3.3.0 ou posterior para obter suporte ao Web PubSub. Para atualizar o , abra o host.jsonarquivo no editor e, em seguida, substitua a versão existente extensionBundle para a versão 3.3.0 ou posterior.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.WebPubSub
```
```
dotnet add package Microsoft.Azure.Functions.Worker.Extensions.WebPubSub --prerelease
```
Atualize o host.json do extensionBundle para a versão 3.3.0 ou posterior, para obter suporte ao Web PubSub. Para atualizar o , abra o host.jsonarquivo no editor e, em seguida, substitua a versão existente extensionBundle para a versão 3.3.0 ou posterior.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```

Crie uma função index para ler e hospedar uma página da Web estática para clientes.

func new -n index -t HttpTrigger

Atualize src/functions/index.js e copie os seguintes códigos.

const { app } = require('@azure/functions');
const { readFile } = require('fs/promises');

app.http('index', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (context) => {
        const content = await readFile('index.html', 'utf8', (err, data) => {
            if (err) {
                context.err(err)
                return
            }
        });

        return { 
            status: 200,
            headers: { 
                'Content-Type': 'text/html'
            }, 
            body: content, 
        };
    }
});

Atualize index/function.json e copie os seguintes códigos JSON.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Atualize index/index.js e copie os seguintes códigos.

var fs = require('fs');
var path = require('path');

module.exports = function (context, req) {
    var index = context.executionContext.functionDirectory + '/../index.html';
    context.log("index.html path: " + index);
    fs.readFile(index, 'utf8', function (err, data) {
        if (err) {
            console.log(err);
            context.done(err);
        }
        context.res = {
            status: 200,
            headers: {
                'Content-Type': 'text/html'
            },
            body: data
        };
        context.done();
    });
}

Atualize index.cs e substitua a função Run pelos códigos a seguir.

[FunctionName("index")]
public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest req, ExecutionContext context, ILogger log)
{
    var indexFile = Path.Combine(context.FunctionAppDirectory, "index.html");
    log.LogInformation($"index.html path: {indexFile}.");
    return new ContentResult
    {
        Content = File.ReadAllText(indexFile),
        ContentType = "text/html",
    };
}

Atualize index.cs e substitua a função Run pelos códigos a seguir.

[Function("index")]
public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req, FunctionContext context)
{
    var path = Path.Combine(context.FunctionDefinition.PathToAssembly, "../index.html");
    _logger.LogInformation($"index.html path: {path}.");

    var response = req.CreateResponse();
    response.WriteString(File.ReadAllText(path));
    response.Headers.Add("Content-Type", "text/html");
    return response;
}

Atualize index/function.json e copie os seguintes códigos JSON.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    }
  ]
}

Atualize index/__init__.py e copie os seguintes códigos.

import os

import azure.functions as func

def main(req: func.HttpRequest) -> func.HttpResponse:
    f = open(os.path.dirname(os.path.realpath(__file__)) + '/../index.html')
    return func.HttpResponse(f.read(), mimetype='text/html')

Crie uma função negotiate para ajudar os clientes a obterem a URL de conexão do serviço com o token de acesso.

func new -n negotiate -t HttpTrigger

Atualize src/functions/negotiate.js e copie os seguintes códigos.

const { app, input } = require('@azure/functions');

const connection = input.generic({
    type: 'webPubSubConnection',
    name: 'connection',
    hub: 'notification'
});

app.http('negotiate', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    extraInputs: [connection],
    handler: async (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get('connection')) };
    },
});

Atualize negotiate/function.json e copie os seguintes códigos JSON.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "notification",
      "direction": "in"
    }
  ]
}

Crie uma pasta para negociar e atualizar negotiate/index.js e copiar os seguintes códigos.

module.exports = function (context, req, connection) {
    context.res = { body: connection };
    context.done();
};

Atualize negotiate.cs e substitua a função Run pelos códigos a seguir.

[FunctionName("negotiate")]
public static WebPubSubConnection Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    [WebPubSubConnection(Hub = "notification")] WebPubSubConnection connection,
    ILogger log)
{
    log.LogInformation("Connecting...");

    return connection;
}

Adicione as instruções using no cabeçalho para resolver as dependências necessárias.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Atualize negotiate.cs e substitua a função Run pelos códigos a seguir.

[Function("negotiate")]
public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req,
    [WebPubSubConnectionInput(Hub = "notification")] WebPubSubConnection connectionInfo)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    response.WriteAsJsonAsync(connectionInfo);
    return response;
}

Crie uma pasta negociar e atualizar negotiate/function.json e copiar os seguintes códigos json.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "notification",
      "direction": "in"
    }
  ]
}

Atualize negotiate/__init__.py e copie os seguintes códigos.

import logging

import azure.functions as func


def main(req: func.HttpRequest, connection) -> func.HttpResponse:
    return func.HttpResponse(connection)

Crie uma função notification para a qual gerar notificações com TimerTrigger.

func new -n notification -t TimerTrigger

Atualize src/functions/notification.js e copie os seguintes códigos.

const { app, output } = require('@azure/functions');

const wpsAction = output.generic({
    type: 'webPubSub',
    name: 'action',
    hub: 'notification'
});

app.timer('notification', {
    schedule: "*/10 * * * * *",
    extraOutputs: [wpsAction],
    handler: (myTimer, context) => {
        context.extraOutputs.set(wpsAction, {
            actionName: 'sendToAll',
            data: `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
            dataType: 'text',
        });
    },
});

function getValue(baseNum, floatNum) {
    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
}

Atualize notification/function.json e copie os seguintes códigos JSON.

{
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/10 * * * * *"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "notification",
      "direction": "out"
    }
  ]
}

Atualize notification/index.js e copie os seguintes códigos.

module.exports = function (context, myTimer) {
    context.bindings.actions = {
        "actionName": "sendToAll",
        "data": `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
        "dataType": "text"
    }
    context.done();
};

function getValue(baseNum, floatNum) {
    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
}

Atualize notification.cs e substitua a função Run pelos códigos a seguir.

[FunctionName("notification")]
public static async Task Run([TimerTrigger("*/10 * * * * *")]TimerInfo myTimer, ILogger log,
    [WebPubSub(Hub = "notification")] IAsyncCollector<WebPubSubAction> actions)
{
    await actions.AddAsync(new SendToAllAction
    {
        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),
        DataType = WebPubSubDataType.Text
    });
}

private static string GetValue(double baseNum, double floatNum)
{
    var rng = new Random();
    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);
    return value.ToString("0.000");
}

Adicione as instruções using no cabeçalho para resolver as dependências necessárias.

using System.Threading.Tasks;
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
using Microsoft.Azure.WebPubSub.Common;

Atualize notification.cs e substitua a função Run pelos códigos a seguir.

[Function("notification")]
[WebPubSubOutput(Hub = "notification")]
public SendToAllAction Run([TimerTrigger("*/10 * * * * *")] MyInfo myTimer)
{
    return new SendToAllAction
    {
        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),
        DataType = WebPubSubDataType.Text
    };
}

private static string GetValue(double baseNum, double floatNum)
{
    var rng = new Random();
    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);
    return value.ToString("0.000");
}

Crie uma notificação de pasta e atualize notification/function.json e copie os seguintes códigos json.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/10 * * * * *"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "notification",
      "direction": "out"
    }
  ]
}

Atualize notification/__init__.py e copie os seguintes códigos.

import datetime
import random
import json

import azure.functions as func

def main(myTimer: func.TimerRequest, actions: func.Out[str]) -> None:
    time = datetime.datetime.now().strftime("%A %d-%b-%Y %H:%M:%S")
    actions.set(json.dumps({
        'actionName': 'sendToAll',
        'data': '\x5B DateTime: {0} \x5D Temperature: {1:.3f} \xB0C, Humidity: {2:.3f} \x25'.format(time, 22 + 2 * (random.random() - 0.5), 44 + 4 * (random.random() - 0.5)),
        'dataType': 'text'
    }))

Adicione a página única do cliente index.html na pasta raiz do projeto e copie o conteúdo.

<html>
    <body>
    <h1>Azure Web PubSub Notification</h1>
    <div id="messages"></div>
    <script>
        (async function () {
            let messages = document.querySelector('#messages');
            let res = await fetch(`${window.location.origin}/api/negotiate`);
            let url = await res.json();
            let ws = new WebSocket(url.url);
            ws.onopen = () => console.log('connected');

            ws.onmessage = event => {
                let m = document.createElement('p');
                m.innerText = event.data;
                messages.appendChild(m);
            };
        })();
    </script>
    </body>
</html>

Como o projeto C# compilar arquivos em uma pasta de saída diferente, você precisa atualizar o *.csproj para fazer com que a página de conteúdos o acompanhe.

<ItemGroup>
    <None Update="index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
</ItemGroup>

Como o projeto C# compilar arquivos em uma pasta de saída diferente, você precisa atualizar o *.csproj para fazer com que a página de conteúdos o acompanhe.

<ItemGroup>
    <None Update="index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
</ItemGroup>

Configurar e executar o aplicativo do Azure Functions
- No navegador, abra o portal do Azure e confirme se a instância do serviço Web PubSub implantada anteriormente foi criada com êxito. Navegue até a instância.
- Selecione Chaves e copie a cadeia de conexão.
Execute o comando na pasta de funções para definir a cadeia de conexão do serviço. Substitua <connection-string> pelo seu valor, conforme necessário.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Observação

O TimerTrigger usado no exemplo tem dependência no Armazenamento do Azure, mas você pode usar um emulador de armazenamento local quando a função estiver sendo executada localmente. Se ocorrer algum erro como There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid., você precisará baixar e habilitar o Emulador de Armazenamento.

Agora você pode executar a função local com o comando.
```
func start --port 7071
```
E verificando os logs em execução, você pode ir até a página estática do host local acessando: http://localhost:7071/api/index.

Observação

Alguns navegadores são redirecionados automaticamente para https, o que leva à URL incorreta. Sugira o uso de Edge e verifique novamente a URL se a renderização não for bem-sucedida.

Implantar o aplicativo de funções no Azure

Antes de poder implantar o código da função no Azure, você precisa criar três recursos:

Um grupo de recursos, que é um contêiner lógico para recursos relacionados.
Uma conta de armazenamento, que é usada para manter o estado e outras informações sobre suas funções.
Um aplicativo de funções, que fornece o ambiente para a execução do código de função. Um aplicativo de funções é mapeado para seu projeto de função local e permite agrupar funções como uma unidade lógica para facilitar o gerenciamento, a implantação e o compartilhamento de recursos.

Use os comandos a seguir para criar esses itens.

Entrar no Azure:
```
az login
```
Crie um grupo de recursos ou ignore essa etapa reutilizando o do serviço do Azure Web PubSub:
```
az group create -n WebPubSubFunction -l <REGION>
```
Crie uma conta de armazenamento para uso geral no grupo de recursos e na região:
```
az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
```

Criar o aplicativo de funções no Azure:

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

Observação

Verifique a documentação das versões de tempo de execução do Azure Functions para definir o parâmetro --runtime-version para o valor com suporte.

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

Observação

Verifique a documentação das versões de tempo de execução do Azure Functions para definir o parâmetro --runtime-version para o valor com suporte.

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet-isolated --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime python --runtime-version 3.9 --functions-version 4 --name <FUNCIONAPP_NAME> --os-type linux --storage-account <STORAGE_NAME>

Implantar o projeto de funções no Azure:

Depois de criar seu aplicativo de função no Azure, agora você está pronto para implantar seu projeto de funções locais usando o comando func azure functionapp publishing .
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Observação

Aqui estamos implantando as configurações locais local.settings.json junto com o parâmetro de comando --publish-local-settings. Se estiver usando Emulador de Armazenamento do Microsoft Azure, você poderá digitar no para ignorar a substituição desse valor no Azure após a mensagem de prompt: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. Além disso, você pode atualizar as configurações do Aplicativo de Funções no Portal do Azure ->Configurações ->Configuração.
Agora você pode verificar o site no Aplicativo de funções do Azure navegando até a URL: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Limpar recursos

Se você não pretende continuar usando este aplicativo, exclua todos os recursos criados por este documento com as seguintes etapas para não gerar custos:

No portal do Azure, selecione Grupos de recursos na extremidade esquerda, depois selecione o recurso de grupo que você criou. Use a caixa de pesquisa para localizar o grupo de recursos pelo nome.
Na janela que será aberta, selecione o grupo de recursos e escolha Excluir grupo de recursos.
Na nova janela, digite o nome do grupo de recursos a ser excluído e selecione Excluir.

Próximas etapas

Neste início rápido, você aprendeu a executar um aplicativo de chat sem servidor. Agora, você pode começar a criar seu próprio aplicativo.

Tutorial: criar uma sala de chat simples com o Azure Web PubSub

Associações do Azure Web PubSub para o Azure Functions

Explorar mais exemplos do Azure Web PubSub

Compartilhar via

Tutorial: criar um aplicativo de notificação sem servidor com o Azure Functions e o serviço Azure Web PubSub

Pré-requisitos

Criar uma instância do serviço Azure Web PubSub

Criar e executar as funções localmente

Implantar o aplicativo de funções no Azure

Limpar recursos

Próximas etapas

Comentários

Recursos adicionais

Compartilhar via

Tutorial: criar um aplicativo de notificação sem servidor com o Azure Functions e o serviço Azure Web PubSub

Pré-requisitos

Entrar no Azure

Criar uma instância do serviço Azure Web PubSub

Criar e executar as funções localmente

Implantar o aplicativo de funções no Azure

Limpar recursos

Próximas etapas

Comentários

Recursos adicionais