Быстрый старт: разработка с расширением Visual Studio Code

Azure Web PubSub помогает разработчикам легко создавать веб-приложения для обмена сообщениями в реальном времени, используя WebSockets и шаблон publish-subscribe.

В этом уроке вы создаёте чат-приложение с помощью Azure Web PubSub с помощью Visual Studio Code.

Предпосылки

• Для использования требуется учетная запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
• Visual Studio Code, доступный как бесплатная загрузка.
• Установлены следующие расширения Visual Studio Code:
  • Расширение учетной записи Azure
  • Расширение Azure Web PubSub

Клонирование проекта

1. Откройте новое окно Visual Studio Code.

2. Нажмите F1 , чтобы открыть палитру команд.

3. Введите Git: Clone и нажмите Enter.

4. Введите следующий URL-адрес, чтобы клонировать пример проекта:

   https://github.com/Azure/azure-webpubsub.git
   

   Замечание

   В этом руководстве используется проект JavaScript, но шаги не зависят от языка.

5. Выберите папку для клонирования проекта.

6. Выберите «Открыть —> открыть папкуazure-webpubsub/samples/javascript/chatapp/nativeapi» в Visual Studio Code.

Вход в Azure

1. Нажмите F1 , чтобы открыть палитру команд.

2. Выберите Azure: войдите и следуйте инструкциям по проверке подлинности.

3. После входа вернитесь в Visual Studio Code.

Create an Azure Web PubSub Service

Расширение Azure Web PubSub для Visual Studio Code позволяет пользователям быстро создавать, управлять и использовать Azure Web PubSub Service и его инструменты для разработчиков, такие как Azure Web PubSub Local Tunnel Tool. В этом сценарии вы создаёте новый ресурс Azure Web PubSub Service и настраиваете его для размещения вашего приложения. После установки расширения Web PubSub вы сможете получить доступ к его функциям в панели управления Azure в Visual Studio Code.

1. Нажмите F1 , чтобы открыть палитру команд, и выполните команду Azure Web PubSub: Create Web PubSub Service .

2. Введите следующие значения, как показано расширением.

   Подсказка	Ценность
   Выбор подписки	Выберите подписку Azure, которую нужно использовать.
   Выбор группы ресурсов	Выберите группу ресурсов Azure, которую хотите использовать.
   Введите название службы	Введите my-wps.
   Выбор расположения	Выберите регион Azure рядом с вами.
   Выберите ценовой уровень	Выберите ценовой уровень, который вы хотите использовать.
   Выберите подсчёт единиц	Выберите количество единиц, которое хотите использовать.

   Откроется панель журнала действий Azure и отображается ход развертывания. Выполнение этого процесса может занять несколько минут.

3. После завершения этого процесса Visual Studio Code отображает уведомление.

Создайте хаб-сеттинг

1. Откройте значок Azure в панели активности слева в Visual Studio Code.

   Замечание

   Если ваша панель активности скрыта, вы не сможете получить доступ к расширению. Покажите панель активности, нажав на «Посмотреть > внешний вид > » Показать панель активности

2. В дереве ресурсов найдите созданный вами ресурс my-wps Azure Web PubSub и нажмите на него, чтобы развернуть

3. Кликните правой кнопкой мыши по параметрам хаба , затем выберите Создать настройки хаба

4. Введите sample_chat как имя хаба и создайте настройки хаба. Неважно, создавать ли дополнительные обработчики событий или нет. Ждите уведомления о прогрессе, который покажет как завершённый

5. Под элементом Настройки Хаба появится новый подэлемент Хаб sample_chat . Кликните правой кнопкой мыши по новому элементу и выберите «Прикрепить локальный тоннель»

6. Появляется уведомление о создании обработчика событий с поддержкой туннеля. Нажмите кнопку «Да ». Затем введите следующие значения, как указано расширение

   Подсказка	Ценность
   Избранные пользовательские мероприятия	Выберите все
   Избранные системные события	Выберите Connected
   Порт входного сервера	Встречайте 8080

7. Расширение создаёт новый терминал для запуска Инструмента Локального Туннеля, и появляется уведомление об открытии Портала Локального Туннеля. Нажмите кнопку «Да» или откройте «http://localhost:4000" Вручную просматривайте портал в веб-браузере.

Запустить серверное приложение

1. Убедитесь, что рабочий каталог azure-webpubsub/samples/javascript/chatapp/nativeapi

2. Установка зависимостей Node.js

   npm install
   

3. Откройте значок Azure в панели активности и найдите ресурс my-wpsAzure Web PubSub . Затем кликните правой кнопкой мыши по ресурсному элементу и выберите «Скопировать строку соединения». Строка соединения копируется в ваш буфер обмена

4. Запустите серверное приложение с копированной строкой соединения

   node server.js "<connection-string>"
   

5. Откройте http://localhost:8080/index.html браузер, чтобы попробовать чат-приложение.

Подсказка

Есть проблемы? Сообщите нам об этом на GitHub, открыв проблему в Azure Web PubSub репозитории.