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. As Funções do Azure são uma plataforma sem servidor que lhe permite executar código sem ter de gerir 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, irá aprender a:

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

Pré-requisitos

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

Nota

Para obter mais informações sobre as versões suportadas do Node.js, consulte a documentação de versões de tempo de execução do Azure Functions.
Ferramentas Principais do Azure Functions (V4 ou superior) para executar aplicativos do Azure Function localmente e implantar no Azure.
A CLI do Azure para gerenciar recursos do Azure.

Se não tiver uma subscrição do Azure, crie uma conta gratuita do Azure antes de começar.

Inicie sessão no portal do Azure em https://portal.azure.com/ com a sua conta do Azure.

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

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

Selecione o botão Novo, 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 Web categoria.)
Selecione Web PubSub nos resultados da pesquisa e, em seguida, selecione Criar.

Introduza as seguintes definições.

Definição	Valor sugerido	Description
Nome do recurso	Nome globalmente exclusivo	O Nome globalmente exclusivo que identifica sua nova instância de serviço Web PubSub. Os caracteres válidos são `a-z`, , `A-Z0-9`, e `-`.
Subscrição	a sua subscrição	A assinatura do Azure sob a qual essa nova instância de serviço Web PubSub é criada.
Grupo de Recursos	myResourceGroup	Nome para o novo grupo de recursos no qual criar sua instância de serviço Web PubSub.
Localização	E.U.A. Oeste	Escolha uma região perto de si.
Escalão de preço	Gratuito	Primeiro, você pode experimentar o serviço Azure Web PubSub gratuitamente. Saiba mais detalhes sobre os níveis de preços do serviço Azure Web PubSub
Contagem de unidades	-	A contagem de unidades especifica quantas conexões sua instância de serviço Web PubSub pode aceitar. Cada unidade suporta no máximo 1.000 conexões simultâneas. Pode configurar apenas no escalão Standard.

Screenshot of creating the Azure Web PubSub instance in portal.

Selecione Criar para iniciar a implantação da instância do serviço Web PubSub.

Criar e executar as funções localmente

Certifique-se de que tem as Ferramentas Principais do Azure Functions instaladas. 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 os passos para instalar Microsoft.Azure.WebJobs.Extensions.WebPubSubo .
Confirme ou atualize host.jsono extensionBundle para a versão 4.* 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 4.* ou posterior.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Confirme ou atualize host.jsono 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)"
    }
}
```
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.WebPubSub
```
```
dotnet add package Microsoft.Azure.Functions.Worker.Extensions.WebPubSub --prerelease
```
Atualize host.jsono extensionBundle para a versão 3.3.0 ou posterior para obter suporte a 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 para ler e hospedar uma index 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 Run a função pelos seguintes códigos.

[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 Run a função pelos seguintes códigos.

[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 para ajudar os clientes a obter URL de conexão de serviço com token de negotiate 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, negocie e atualize negotiate/index.js e copie os seguintes códigos.

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

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

[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 using instruções no cabeçalho para resolver as dependências necessárias.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

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

[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, negocie e atualize negotiate/function.json e copie 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 notification função para gerar notificações com TimerTriggero .

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 Run a função pelos seguintes códigos.

[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 using instruções 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 Run a função pelos seguintes códigos.

[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 index.html única do cliente 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# compila arquivos para uma pasta de saída diferente, você precisa atualizar o seu *.csproj para fazer com que a página de conteúdo vá com ele.

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

Como o projeto C# compila arquivos para uma pasta de saída diferente, você precisa atualizar o seu *.csproj para fazer com que a página de conteúdo vá com ele.

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

Configurar e executar a aplicação Funções do Azure
- 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ção para definir a cadeia de conexão de serviço. Substitua <connection-string> pelo seu valor conforme necessário.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Nota

TimerTrigger usado no exemplo tem dependência do Armazenamento do Azure, mas você pode usar o emulador de armazenamento local quando a Função estiver sendo executada localmente. Se você tiver 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 ativar o emulador de armazenamento.

Agora você pode executar sua função local por comando.
```
func start --port 7071
```
E verificando os logs em execução, você pode visitar sua página estática do host local visitando: http://localhost:7071/api/index.

Nota

Alguns browers redirecionam automaticamente para https que leva a url errado. Sugira usar Edge e verifique novamente a url se a renderização não for bem-sucedida.

Implantar o aplicativo Function no Azure

Antes de implantar seu código de 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ção, que fornece o ambiente para executar seu código de função. Um aplicativo de função mapeia 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.

Entre no Azure:
```
az login
```
Crie um grupo de recursos ou você pode ignorar reutilizando o do serviço Azure Web PubSub:
```
az group create -n WebPubSubFunction -l <REGION>
```
Crie uma conta de armazenamento de uso geral em seu grupo de recursos e região:
```
az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
```

Crie o aplicativo de função 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>

Nota

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

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>

Nota

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

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>

Implante o projeto de função no Azure:

Depois de criar seu aplicativo de função no Azure, 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
```
Nota

Aqui estamos implantando configurações locais juntamente com o local.settings.json parâmetro --publish-local-settingsde comando. Se você estiver usando o Emulador de Armazenamento do Microsoft Azure, poderá digitar no para ignorar a substituição desse valor no Azure seguindo 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ção no Portal do Azure -Settings ->>Configuration.
Agora você pode verificar seu site no Aplicativo de Função do Azure navegando até URL: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Clean up resources (Limpar recursos)

Se você não vai continuar a usar este aplicativo, exclua todos os recursos criados por este documento com as seguintes etapas para não incorrer em nenhum custo:

No portal do Azure, selecione Grupos de recursos à esquerda e, em seguida, selecione o grupo de recursos que criou. Em vez disso, use a caixa de pesquisa para localizar o grupo de recursos pelo nome.
Na janela que se abre, selecione o grupo de recursos e, em seguida, selecione Eliminar grupo de recursos.
Na nova janela, digite o nome do grupo de recursos a ser excluído e selecione Excluir.

Próximos passos

Neste início rápido, você aprendeu como 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

Explore mais exemplos do Azure Web PubSub

Share 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 de serviço Azure Web PubSub

Criar e executar as funções localmente

Implantar o aplicativo Function no Azure

Clean up resources (Limpar recursos)

Próximos passos

Recursos adicionais

Share via

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

Pré-requisitos

Iniciar sessão no Azure

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

Criar e executar as funções localmente

Implantar o aplicativo Function no Azure

Clean up resources (Limpar recursos)

Próximos passos

Recursos adicionais