Inicio rápido: Desarrollar con la extensión Visual Studio Code

Azure Web PubSub ayuda a los desarrolladores a crear aplicaciones web de mensajería en tiempo real utilizando WebSockets y el patrón de publicación-suscripción de forma sencilla.

En este tutorial, creas una aplicación de chat usando Azure Web PubSub con la ayuda de Visual Studio Code.

Prerrequisitos

• Se requiere una cuenta de Azure con una suscripción activa. Si no la tiene, puede crear una cuenta gratis.
• Visual Studio Code, disponible como descarga gratuita.
• Las siguientes extensiones de Visual Studio Code instaladas:
  • La extensión de la cuenta de Azure
  • La extensión Azure Web PubSub

Clonación del proyecto

1. Abra una nueva ventana de Visual Studio Code.

2. Pulsa F1 para abrir la paleta de comandos.

3. Escriba Git: Clone y presione ENTRAR.

4. Escriba la siguiente dirección URL para clonar el proyecto de ejemplo:

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

   Nota:

   En este tutorial se usa un proyecto de JavaScript, pero los pasos son independientes del lenguaje.

5. Seleccione una carpeta en la que clonar el proyecto.

6. Selecciona Abrir -> Abrir carpeta para azure-webpubsub/samples/javascript/chatapp/nativeapi en Visual Studio Code.

Inicio de sesión en Azure

1. Pulsa F1 para abrir la paleta de comandos.

2. Seleccione Azure: Inicie sesión y siga las indicaciones para autenticarse.

3. Una vez que haya iniciado sesión, vuelva a Visual Studio Code.

Crear un servicio Azure Web PubSub

La extensión Azure Web PubSub para Visual Studio Code permite a los usuarios crear, gestionar y utilizar rápidamente Azure Web PubSub Service y sus herramientas para desarrolladores, como Azure Web PubSub Local Tunnel Tool. En este escenario, creas un nuevo recurso de Azure Web PubSub Service y lo configuras para alojar tu aplicación. Tras instalar la extensión Web PubSub, puedes acceder a sus funciones en el panel de control de Azure en Visual Studio Code.

1. Pulsa F1 para abrir la paleta de comandos y ejecuta el comando Azure Web PubSub: Create Web PubSub Service .

2. Escriba los siguientes valores según lo solicite la extensión.

   Pronto	Importancia
   Seleccionar suscripción	Seleccione la suscripción de Azure que quiere usar.
   Selección de un grupo de recursos	Selecciona el grupo de recursos de Azure que quieres usar.
   Introduce un nombre para el servicio	Escribe my-wps.
   Seleccionar una ubicación	Seleccione una región de Azure cercana.
   Seleccione un rango de precios	Selecciona un rango de precios que quieras usar.
   Seleccione un recuento de unidades	Selecciona el número de unidades que quieras usar.

   Se abre el panel registro de actividad de Azure y se muestra el progreso de la implementación. Este proceso puede tardar unos minutos en completarse.

3. Una vez finalizado este proceso, Visual Studio Code muestra una notificación.

Crear un entorno hub

1. Abre el icono de Azure en la barra de actividades en el lado izquierdo de Visual Studio Code.

   Nota:

   Si tu barra de actividad está oculta, no podrás acceder a la extensión. Mostrar la barra de actividad haciendo clic en Ver > apariencia > Mostrar barra de actividad

2. En el árbol de recursos, encuentra el recurso my-wps Azure Web PubSub que creaste y haz clic en él para expandirlo

3. Haz clic derecho en el elemento Configuración del Centro y luego selecciona Crear Configuración del Centro

4. Introduce sample_chat el nombre del hub y crea la configuración del hub. No importa si crear gestores de eventos adicionales o no. Espera a que aparezca la notificación de progreso como finalizada

5. Debajo de la configuración del Hub del objeto, aparecerá un nuevo sample_chat del Hub de subítem. Haz clic derecho en el nuevo elemento y luego elige "Adjuntar túnel local"

6. Aparece una notificación que te recuerda crear un gestor de eventos habilitado para túnel. Haz clic en el botón de Sí . Luego introduce los siguientes valores que indica la extensión

   Pronto	Importancia
   Eventos de usuario seleccionados	Seleccionar todo
   Eventos de Selecciones del Sistema	Seleccionar conectado
   Puerto del servidor de entrada	Entra en escena 8080

7. La extensión crea un nuevo terminal para ejecutar la Herramienta de Túnel Local y aparece una notificación que te recuerda abrir el Portal del Túnel Local. Haz clic en el botón "Sí" o abre "http://localhost:4000" En el navegador web manualmente para ver el portal.

Ejecutar la aplicación servidor

1. Asegúrate de que el directorio de trabajo sea azure-webpubsub/samples/javascript/chatapp/nativeapi

2. Instalar las dependencias de Node.js

   npm install
   

3. Abre el icono de Azure en la barra de actividad y busca el recurso my-wpsAzure Web PubSub. Luego haz clic derecho en el elemento de recurso y selecciona Copiar cadena de conexión. La cadena de conexión se copia a tu portapapeles

4. Ejecuta la aplicación servidor con la cadena de conexión copiada

   node server.js "<connection-string>"
   

5. Abre http://localhost:8080/index.html el navegador para probar tu aplicación de chat.

Sugerencia

¿Tiene problemas? Cuéntanos en GitHub abriendo un problema en el repositorio Azure Web PubSub.