Краткое руководство. Создание бессерверного приложения с помощью Функции Azure и Служба SignalR с помощью JavaScript

В этой статье вы используете Служба Azure SignalR, Функции Azure и JavaScript для создания бессерверного приложения для трансляции сообщений клиентам.

Необходимые компоненты

Это краткое руководство предназначено для macOS, Windows или Linux.

Необходимые условия	Description
Подписка Azure	Если у вас нет подписки, создайте бесплатную учетную запись Azure.
Редактор кода	Вам нужен редактор кода, например Visual Studio Code.
Azure Functions Core Tools	Требуется версия 4.0.5611 или более поздняя для запуска Node.js модели программирования версии 4.
LTS Node.js	Ознакомьтесь с поддерживаемыми версиями node.js в руководстве разработчика javaScript Функции Azure.
Azurite	Привязка SignalR требует служба хранилища Azure. При локальной работе функции можно использовать эмулятор локального хранилища.
Azure CLI	При необходимости можно использовать Azure CLI для создания экземпляра Служба Azure SignalR.

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

В этом разделе описано, как создать базовый экземпляр Azure SignalR, используемый для приложения. Следующие действия используют портал Azure для создания нового экземпляра, но также можно использовать Azure CLI. Дополнительные сведения см. в статье az signalr create command in the Служба Azure SignalR CLI Reference.

1. Войдите на портал Azure.
2. Щелкните + Создать ресурс в левом верхнем углу страницы.
3. На странице "Создание ресурса" в текстовом поле служба и Marketplace введите сигнализатор и выберите Служба SignalR из списка.
4. На странице Служба SignalR нажмите кнопку "Создать".
5. На вкладке "Основные сведения" введите необходимые сведения для нового экземпляра Служба SignalR. Введите следующие значения:

Поле	Рекомендуемое значение	Description
Подписка	Выберите свою подписку	Выберите подписку, которую вы хотите использовать для создания нового экземпляра Служба SignalR.
Группа ресурсов	Создайте группу ресурсов с именем SignalRTestResources	Выберите или создайте группу ресурсов для ресурса SignalR. Для этого руководства рекомендуется создать новую группу ресурсов вместо использования существующей группы ресурсов. Чтобы освободить ресурсы после завершения работы с руководством, удалите группу ресурсов. При удалении группы ресурсов также удаляются все ресурсы, принадлежащие группе. Это действие невозможно отменить. Перед удалением группы ресурсов убедитесь, что она не содержит ресурсов, которые вы хотите сохранить. Дополнительные сведения см. в статье Управление ресурсами Azure через портал.
Имя ресурса	testsignalr	Введите уникальное имя для ресурса SignalR. Если testsignalr уже взят в регионе, добавьте цифру или символ, пока имя не будет уникальным. Имя должно быть строкой длиной от 1 до 63 символов и содержать только цифры, буквы и символ -. Имя не может начинаться или заканчиваться символом дефиса, а последовательные символы дефиса недопустимы.
Регион	Выберите регион	Выберите соответствующий регион для нового экземпляра Служба SignalR. Служба Azure SignalR сейчас недоступен во всех регионах. Дополнительные сведения см. в разделе Служба Azure SignalR доступности региона
Ценовая категория	Выберите "Изменить", а затем выберите "Только для разработки и тестирования". Выберите "Выбрать ", чтобы подтвердить выбор ценовой категории.	Служба Azure SignalR имеет три ценовых категории: "Бесплатный", "Стандартный" и "Премиум". Учебники используют уровень "Бесплатный " , если не указано иное в предварительных требованиях. Дополнительные сведения о различиях функций между уровнями и ценами см. в Служба Azure SignalR ценах
Режим службы	Выбор соответствующего режима службы	Используйте Значение по умолчанию при размещении логики Концентратора SignalR в веб-приложениях и использовании службы SignalR в качестве прокси-сервера. Используйте бессерверные технологии, такие как Функции Azure для размещения логики концентратора SignalR. Классический режим предназначен только для обратной совместимости и не рекомендуется использовать. Дополнительные сведения см. в разделе "Режим службы" в Служба Azure SignalR.

Вам не нужно изменять параметры на вкладках "Сеть и теги " для учебников SignalR.

6. Нажмите кнопку "Просмотр и создание " в нижней части вкладки "Основные сведения".
7. На вкладке "Просмотр и создание" просмотрите значения и нажмите кнопку "Создать". Для завершения развертывания потребуется несколько минут.
8. По завершении развертывания нажмите кнопку "Перейти к ресурсу ".
9. На странице ресурсов SignalR выберите "Ключи" в меню слева в разделе Параметры.
10. Скопируйте строку Подключение ion для первичного ключа. Это строка подключения вам потребуется, чтобы настроить приложение позже в этом руководстве.

Проект функции установки

Убедитесь, что на компьютере установлен набор средств Azure Functions Core Tools.

1. Откройте командную строку.
2. Создайте каталог проекта и измените его.
3. Выполните команду Функции Azurefunc init, чтобы инициализировать новый проект.

func init --worker-runtime javascript --language javascript --model V4

Создание функций проекта

После инициализации проекта необходимо создать функции. Для этого проекта требуются три функции:

• index: размещает веб-страницу для клиента.
• negotiate: позволяет клиенту получить маркер доступа.
• broadcast: использует триггер времени для периодического трансляции сообщений для всех клиентов.

При выполнении func new команды из корневого каталога проекта Функции Azure Core Tools создает исходные файлы функций, хранящие их в папке с именем функции. При необходимости вы изменяете файлы, заменяя код по умолчанию кодом приложения.

Создание функции индекса

1. Выполните следующую команду, чтобы создать функцию index .

   func new -n index -t HttpTrigger
   

2. Измените src/functions/httpTrigger.js и замените содержимое следующим кодом json:

   const { app } = require('@azure/functions');
   const fs = require('fs').promises;
   const path = require('path');
   
   app.http('index', {
       methods: ['GET', 'POST'],
       authLevel: 'anonymous',
       handler: async (request, context) => {
   
           try {
   
               context.log(`Http function processed request for url "${request.url}"`);
   
               const filePath = path.join(__dirname,'../content/index.html');
               const html = await fs.readFile(filePath);
   
               return {
                   body: html,
                   headers: {
                       'Content-Type': 'text/html'
                   }
               };
   
           } catch (error) {
               context.log(error);
               return {
                   status: 500,
                   jsonBody: error
               }
           }
       }
   });
   

Создание функции согласования

1. Выполните следующую команду, чтобы создать функцию negotiate .

   func new -n negotiate -t HttpTrigger
   

2. Измените src/functions/negotiate.js и замените содержимое следующим кодом json:

   const { app, input } = require('@azure/functions');
   
   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'serverless',
       connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
   });
   
   app.post('negotiate', {
       authLevel: 'anonymous',
       handler: (request, context) => {
           try {
               return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
           } catch (error) {
               context.log(error);
               return {
                   status: 500,
                   jsonBody: error
               }
           }
       },
       route: 'negotiate',
       extraInputs: [inputSignalR],
   });
   

Создайте широковещательную функцию.

1. Выполните следующую команду, чтобы создать функцию broadcast .

   func new -n broadcast -t TimerTrigger
   

2. Измените src/functions/broadcast.js и замените содержимое следующим кодом:

   const { app, output } = require('@azure/functions');
   const getStars = require('../getStars');
   
   var etag = '';
   var star = 0;
   
   const goingOutToSignalR = output.generic({
       type: 'signalR',
       name: 'signalR',
       hubName: 'serverless',
       connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
   });
   
   app.timer('sendMessasge', {
       schedule: '0 * * * * *',
       extraOutputs: [goingOutToSignalR],
       handler: async (myTimer, context) => {
   
           try {
               const response = await getStars(etag);
   
               if(response.etag === etag){
                   console.log(`Same etag: ${response.etag}, no need to broadcast message`);
                   return;
               }
           
               etag = response.etag;
               const message = `${response.stars}`;
   
               context.extraOutputs.set(goingOutToSignalR,
                   {
                       'target': 'newMessage',
                       'arguments': [message]
                   });
           } catch (error) {
               context.log(error);
           }
   
       }
   });
   

Создание файла index.html

Клиентский интерфейс для этого приложения — это веб-страница. Функция index считывает HTML-содержимое из файла content/index.html .

1. Создайте папку, вызываемую content в корневой папке проекта.

2. Создайте файл content/index.html.

3. Скопируйте следующее содержимое в файл content/index.html и сохраните его:

   <html>
   
   <body>
     <h1>Azure SignalR Serverless Sample</h1>
     <div>Instructions: Goto <a href="https://github.com/Azure/azure-signalr">GitHub repo</a> and star the repository.</div>
     <hr>
     <div>Star count: <div id="messages"></div></div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
     <script>
       let messages = document.querySelector('#messages');
       const apiBaseUrl = window.location.origin;
       console.log(`apiBaseUrl: ${apiBaseUrl}`);
       const connection = new signalR.HubConnectionBuilder()
           .withUrl(apiBaseUrl + '/api')
           .configureLogging(signalR.LogLevel.Information)
           .build();
         connection.on('newMessage', (message) => {
           console.log(`message: ${message}`);
           document.getElementById("messages").innerHTML = message;
         });
   
         connection.start()
           .catch(console.error);
     </script>
   </body>
   
   </html>
   

Настройка служба хранилища Azure

Функции Azure требуется, чтобы учетная запись хранения работала. Выберите один из двух следующих вариантов:

• Запустите бесплатный эмулятор служба хранилища Azure.
• Используйте службу служба хранилища Azure. Это может привести к затратам, если вы продолжаете использовать его.

Локальная эмуляция

1. Запустите эмулятор хранилища Azurite:

   azurite -l azurite -d azurite\debug.log
   

2. Убедитесь, AzureWebJobsStorage что в local.settings.json задано значение UseDevelopmentStorage=true.

Хранилище BLOB-объектов Azure

Обновите проект, чтобы использовать Хранилище BLOB-объектов Azure строка подключения.

func settings add AzureWebJobsStorage "<storage-connection-string>"

Добавление Служба SignalR строка подключения в параметры приложения-функции

Вы почти сделали сейчас. Последним шагом является настройка Служба SignalR строка подключения в параметрах приложения-функции Azure.

1. В портал Azure перейдите в развернутый ранее экземпляр SignalR.

2. Выберите ключи для просмотра строк подключения экземпляра службы SignalR.

   

3. Скопируйте основной строка подключения и выполните команду:

   func settings add AzureSignalRConnectionString "<signalr-connection-string>"
   

Локальное запуск приложения-функции Azure

Запустите приложение-функцию Azure в локальной среде:

func start

После локальной работы функции Azure перейдите в раздел http://localhost:7071/api/index. На странице отображается текущее число звезд для репозитория GitHub Azure/azure-signalr. При отображении или отмене репозитория в GitHub вы увидите обновляемое количество каждые несколько секунд.

Возникли проблемы? См. руководство по устранению неполадок или сообщите о проблеме нам.

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

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

1. На портале Azure выберите Группа ресурсов слева, а затем созданную группу ресурсов. Также можно использовать поле поиска для поиска ресурса по его имени.

2. В открывшемся окне выберите группу ресурсов и щелкните Удалить группу ресурсов.

3. В новом окне введите имя группы ресурсов, которую требуется удалить, и щелкните Удалить.

Пример кода

Вы можете получить весь код, используемый в статье из репозитория GitHub:

• aspnet/AzureSignalR-samples.

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

В этом кратком руководстве вы создали и запустили бессерверное приложение в режиме реального времени в localhost. и как с помощью Службы SignalR настроить двусторонний обмен данными между клиентами и экземпляром Функций Azure.

привязки Служба SignalR для Функции Azure

Двусторонний обмен данными в сценарии с бессерверным приложением

Развертывание Функций Azure с помощью VS Code