Учебник. Создание бессерверного приложения для уведомления с помощью Функций Azure и службы Azure Web PubSub

Служба Azure Web PubSub помогает создавать веб-приложения для обмена сообщениями в реальном времени с помощью WebSocket. Функции Azure — бессерверная платформа, которая позволяет выполнять код без необходимости управлять какой-либо инфраструктурой. В этом учебнике описано, как использовать службу Azure Web PubSub и Функции Azure для создания бессерверного приложения с возможностью обмена сообщениями в реальном времени в целях уведомления.

В этом руководстве описано следующее:

Создание бессерверного приложения для уведомления
Работа с входными и выходными привязками функции Web PubSub
Локальный запуск примера функций
Развернуть функцию в приложении Azure Function App.

Внимание

Необработанные строки подключения представлены в этой статье только для демонстрационных целей.

Строка подключения содержит сведения об авторизации, требуемые для доступа приложения к службе Azure Web PubSub. Ключ доступа в строке подключения аналогичен паролю привилегированного пользователя для службы. В рабочих средах всегда защищать ключи доступа. Используйте Azure Key Vault для безопасного управления и вращения ключей, а также защиты подключения.WebPubSubServiceClient

Старайтесь не распространять ключи доступа среди других пользователей, жестко программировать их или где-то сохранять в виде обычного текста в открытом доступе для других пользователей. Меняйте свои ключи, если считаете, что они могли быть скомпрометированы.

Предварительные условия

Редактор кода, например Visual Studio Code.
Node.js версии 18.x или более поздней.

Примечание.

Дополнительные сведения о поддерживаемых версиях Node.js см. в документации по версиям среды выполнения Функций Azure.
Функции Azure Core Tools (версии 4 или более поздней версии) для локального запуска приложений-функций Azure и развертывания в Azure.
Azure CLI для управления ресурсами Azure.

Если у вас нет аккаунта Azure, создайте бесплатную учетную запись перед началом.

Войдите на портал Azure по адресу https://portal.azure.com/ с помощью учетной записи Azure.

Создание экземпляра службы Azure Web PubSub

Ваше приложение будет подключаться к экземпляру службы Web PubSub на Azure.

Нажмите кнопку "Создать" в верхнем левом углу портала Azure. На экране "Создание" введите в поле поиска Web PubSub и нажмите клавишу Enter. (Можно также выполнить поиск по Azure Web PubSub в категории Web.)
В результатах поиска выберите Web PubSub и щелкните Создать.

Введите следующие параметры.

Настройка	Предлагаемое значение	Описание
Имя ресурса	Глобально уникальное имя	Глобально уникальное имя, которое идентифицирует ваш новый экземпляр службы Web PubSub. Допустимые символы: `a-z`, `A-Z0-9`и `-`.
Подписка	Ваша подписка	Подписка Azure, в рамках которой создается экземпляр новой службы Web PubSub.
Группа ресурсов	мояГруппаРесурсов	Имя новой группы ресурсов, в которой будет создан экземпляр службы Web PubSub.
Местонахождение	западная часть США	Выберите ближайший географический регион.
Ценовая категория	Бесплатно	Вы можете сначала бесплатно поработать со службой Azure Web PubSub. Ознакомьтесь с ценовыми категориями службы Azure Web PubSub.
Число единиц	-	Число единиц определяет количество подключений, которые поддерживает ваш экземпляр службы Web PubSub. Каждая единица поддерживает не более 1000 одновременных подключений. Это можно настроить только на уровне "Стандартный".

Снимок экрана, где показан процесс создания экземпляра Azure Web PubSub на портале.

Щелкните Создать, чтобы начать развертывание экземпляра службы Web PubSub.

Создание и запуск функций в локальной среде

Убедитесь, что на компьютере установлен набор средств Azure Functions Core Tools. Теперь создайте пустой каталог для проекта. Выполните команду в этом рабочем каталоге. Используйте один из указанных ниже вариантов.
```
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
```
Выполните действия по установке Microsoft.Azure.WebJobs.Extensions.WebPubSub.
Подтвердите или обновите пакет расширений host.json до версии 4.* или новее, чтобы получить поддержку Web PubSub. Чтобы обновить host.jsonфайл, откройте файл в редакторе и замените существующее расширение versionBundle на версию 4.* или более поздней.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Подтвердите или обновите host.jsonрасширениеBundle до версии 3.3.0 или более поздней, чтобы получить поддержку Web PubSub. Для обновления host.jsonфайла откройте файл в редакторе, а затем замените существующее расширение versionBundle на версию 3.3.0 или более поздней.
```
{
    "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
```
Обновите расширение Bundle до версии 3.3.0 или более поздней, чтобы получить поддержку Web PubSub. Для обновления host.jsonфайла откройте файл в редакторе, а затем замените существующее расширение versionBundle на версию 3.3.0 или более поздней.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```

Создайте функцию index для чтения и размещения статической веб-страницы для клиентов.

func new -n index -t HttpTrigger

Обновите файл src/functions/index.js и скопируйте приведенные ниже фрагменты кода.

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, 
        };
    }
});

Обновите файл index/function.json и скопируйте приведенные ниже фрагменты кода JSON.

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

Обновите файл index/index.js и скопируйте приведенные ниже фрагменты кода.

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();
    });
}

Обновите файл index.cs и замените функцию Run приведенными ниже фрагментами кода.

[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",
    };
}

Обновите файл index.cs и замените функцию Run приведенными ниже фрагментами кода.

[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;
}

Обновите файл index/function.json и скопируйте приведенные ниже фрагменты кода JSON.

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

Обновите файл index/__init__.py и скопируйте приведенные ниже фрагменты кода.

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')

Создайте функцию negotiate, чтобы клиенты могли получать URL-адрес подключения службы с помощью маркера доступа.

func new -n negotiate -t HttpTrigger

Обновите файл src/functions/negotiate.js и скопируйте приведенные ниже фрагменты кода.

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')) };
    },
});

Обновите файл negotiate/function.json и скопируйте приведенные ниже фрагменты кода JSON.

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

Создайте папку negotiate и update negotiate/index.js и скопируйте следующие блоки кода.
```
module.exports = function (context, req, connection) {
    context.res = { body: connection };
    context.done();
};
```

Обновите файл negotiate.cs и замените функцию Run приведенными ниже фрагментами кода.

[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;
}

Добавьте using инструкции в заголовок для разрешения необходимых зависимостей.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Обновите файл negotiate.cs и замените функцию Run приведенными ниже фрагментами кода.

[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;
}

Создайте папку negotiate и update negotiate/function.json и скопируйте следующие коды 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"
    }
  ]
}

Обновите файл negotiate/__init__.py и скопируйте приведенные ниже фрагменты кода.

import logging

import azure.functions as func


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

Создайте функцию notification для создания уведомлений с помощью TimerTrigger.

func new -n notification -t TimerTrigger

Обновите файл src/functions/notification.js и скопируйте приведенные ниже фрагменты кода.

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);
}

Обновите файл notification/function.json и скопируйте приведенные ниже фрагменты кода JSON.

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

Обновите файл notification/index.js и скопируйте приведенные ниже фрагменты кода.

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);
}

Обновите файл notification.cs и замените функцию Run приведенными ниже фрагментами кода.

[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");
}

Добавьте using утверждения в заголовке для разрешения необходимых зависимостей.
```
using System.Threading.Tasks;
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
using Microsoft.Azure.WebPubSub.Common;
```

Обновите файл notification.cs и замените функцию Run приведенными ниже фрагментами кода.

[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");
}

Создайте уведомление для папки и обновите notification/function.json, а затем скопируйте следующие коды JSON.

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

Обновите файл notification/__init__.py и скопируйте приведенные ниже фрагменты кода.

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'
    }))

Добавьте одну страницу index.html клиента в корневую папку проекта и скопируйте содержимое.

<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>

Так как проект C# компилирует файлы в другую выходную папку, необходимо обновить *.csproj, чтобы страница содержимого была совместима с новым расположением.

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

Поскольку проект C# компилирует файлы в другую выходную папку, необходимо обновить *.csproj так, чтобы страница содержимого соответствовала этим изменениям.

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

Настройка и запуск приложения-функции Azure

Необработанные строки подключения представлены в этой статье только для демонстрационных целей. В рабочих средах всегда защищать ключи доступа. Используйте Azure Key Vault для безопасного управления и вращения ключей, а также защиты подключения.WebPubSubServiceClient
- В браузере откройте портал Azure и подтвердите, что развернутый ранее экземпляр службы Web PubSub был успешно создан. Перейдите к экземпляру.
- Выберите Ключи и скопируйте строку подключения.
Выполните команду в папке функции, чтобы задать строку подключения к службе. Замените <connection-string> на нужное значение по мере необходимости.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Примечание.

Используемый в примере TimerTrigger зависит от службы Azure Storage, но вы можете использовать локальный эмулятор хранения, когда функция запускается локально. Если вы получили какую-либо ошибку, такую как There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid., вам потребуется скачать и включить Storage Emulator.

Теперь вы можете запустить локальную функцию по команде.
```
func start --port 7071
```
Для проверки журналов выполнения можно посетить статическую страницу локального узла по следующему адресу: http://localhost:7071/api/index.

Примечание.

Некоторые браузеры автоматически перенаправляют на https, что приводит к неправильному URL-адресу. Предложите использовать Edge и дважды проверьте URL, если отрисовка не удалась.

Развертывание приложения-функции в Azure

Прежде чем развернуть код функции в Azure, необходимо создать три ресурса:

группу ресурсов — логический контейнер связанных ресурсов;
учетную запись хранения, которая используется для сохранения состояния и других сведений о функциях;
Приложение-функция, которое предоставляет окружение для выполнения кода вашей функции. Функциональное приложение сопоставляется с вашим локальным проектом функций и позволяет группировать функции в логические единицы, чтобы упростить управление, развертывание и совместное использование ресурсов.

Чтобы создать эти элементы, выполните следующие команды:

Войдите в Azure.
```
az login
```
Создайте группу ресурсов или пропустите этот шаг, повторно используя существующую для службы Azure Web PubSub.
```
az group create -n WebPubSubFunction -l <REGION>
```
В группе ресурсов и регионе создайте учетную запись хранения общего назначения:
```
az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
```

Создайте приложение-функцию в 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>

Примечание.

Проверьте документацию по версиям среды выполнения Функций Azure, чтобы задать параметру --runtime-version поддерживаемое значение.

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>

Примечание.

Проверьте документацию версий среды выполнения Azure Functions, чтобы задать параметру --runtime-version поддерживаемое значение.

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>

Разверните проект функций в Azure:

Теперь после создания приложения-функции в Azure можно развернуть ваш проект локальных функций с помощью команды func azure functionapp publish.
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Примечание.

Здесь мы развертываем локальные параметры local.settings.json вместе с параметром команды --publish-local-settings. Если вы используете эмулятор хранения Microsoft Azure, можно ввести no, чтобы пропустить перезапись этого значения в Azure после появления сообщения с запросом App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. Кроме того, можно обновить параметры приложения-функции на портале Azure ->Settings ->Configuration.
Теперь вы можете проверить сайт из приложения-функции Azure, перейдя по URL-адресу: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Очистка ресурсов

Если вы не собираетесь использовать это приложение дальше, удалите все ресурсы, созданные в ходе работы с этим кратким руководством, чтобы не оплачивать их.

На портале Azure выберите Группа ресурсов слева, а затем созданную группу ресурсов. Используйте поле поиска, чтобы найти группу ресурсов по его имени.
В открывшемся окне выберите группу ресурсов и щелкните Удалить группу ресурсов.
В новом окне введите имя удаляемой группы ресурсов и щелкните Удалить.

Следующие шаги

В этом кратком руководстве вы узнали, как запустить бессерверное приложение чата. Теперь можно приступить к созданию собственного приложения.

Руководство по созданию чат-комнаты с помощью Azure Web PubSub

Привязки Azure Web PubSub для Функций Azure

Изучите другие примеры Azure Web PubSub

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-02-12