Introducción al ejemplo de elementos principales de un chat grupal

  • Artículo
  • 4 minutos para leer

Importante

Este ejemplo está disponible en GitHub.

El ejemplo de elementos principales de un chat grupal de Azure Communication Services muestra cómo se puede usar el SDK web de chat de Communication Services para crear una experiencia de llamada grupal.

En esta guía de inicio rápido de ejemplo, veremos cómo funciona el ejemplo antes de ejecutarlo en la máquina local. A continuación, implementaremos el ejemplo en Azure con sus propios recursos de Azure Communication Services.

Información general

El ejemplo tiene una aplicación del lado cliente y una aplicación del lado servidor. La aplicación del lado cliente es una aplicación web React/Redux que usa el marco de interfaz de usuario Fluent de Microsoft. Esta aplicación envía solicitudes a una aplicación del lado servidor de ASP.NET Core que ayuda a la aplicación del lado cliente a conectarse a Azure.

El ejemplo tendrá una apariencia similar a la siguiente:

Captura de pantalla que muestra la página de aterrizaje de la aplicación de ejemplo.

Cuando se presiona el botón "Start chat", la aplicación web captura un token de acceso de usuario de la aplicación del lado servidor. A continuación, este token se usa para conectar la aplicación cliente con Azure Communication Services. Una vez que se recupera el token, se le pedirá que especifique su nombre y el emoji que le representará en el chat.

Captura de pantalla que muestra la pantalla anterior al chat de la aplicación.

Una vez que configure el nombre para mostrar y el emoji, puede unirse a la sesión de chat. Ahora verá el lienzo de chat principal donde se encuentra la experiencia de chat principal.

Captura de pantalla que muestra la pantalla principal de la aplicación de ejemplo.

Componentes de la pantalla principal de chat:

  • Área de chat principal: Aquí se encuentra la experiencia de chat principal, donde los usuarios pueden enviar y recibir mensajes. Para enviar mensajes, puede usar el área de entrada y presionar Entrar (o usar el botón de envío). Los mensajes de chat recibidos se clasifican por remitente con el nombre y el emoji correctos. Verá dos tipos de notificaciones en el área de chat: 1) notificaciones de escritura cuando un usuario esté escribiendo y 2) notificaciones de envío y lectura para los mensajes.
  • Encabezado: Aquí es donde el usuario verá el título del hilo de chat y los controles para alternar las barras laterales de participantes y de configuración, y un botón Leave para salir de la sesión de chat.
  • Barra lateral: Aquí es donde se muestran los participantes y la información de configuración cuando se alternan con los controles del encabezado. La barra lateral de participantes contiene una lista de participantes en el chat y un vínculo para invitar a los participantes a la sesión de chat. La barra lateral de configuración permite configurar el título del hilo de chat.

A continuación encontrará más información sobre los requisitos previos y los pasos para configurar el ejemplo.

Requisitos previos

Implementación local del servicio y la aplicación cliente

El ejemplo de chat de un solo hilo son esencialmente dos "aplicaciones": una aplicación cliente y otra servidor.

Abra Visual Studio en chat.csproj y ejecútelo en modo de depuración. Esto iniciará el servicio de front-end del chat. Cuando se visite la aplicación de servidor desde el explorador, el tráfico se redirigirá hacia el servicio de front-end de chat implementado localmente.

Para probar el ejemplo localmente, puede abrir varias sesiones del explorador con la dirección URL de su chat para simular un chat multiusuario.

Antes de ejecutar el ejemplo por primera vez

  1. Abra una instancia de PowerShell, Terminal Windows, símbolo del sistema o equivalente y navegue hasta el directorio donde le gustaría clonar el ejemplo.
  2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
  3. Obtenga Connection String de Azure Portal. Para más información sobre las cadenas de conexión, consulte Creación de recursos de Azure Communication Services.
  4. Una vez que obtenga Connection String, agregue la cadena de conexión al archivo Chat/appsettings.json que se encuentra en la carpeta Chat. Escriba la cadena de conexión en la variable: ResourceConnectionString.

Ejecución local

  1. Vaya a la carpeta de chat y abra la solución Chat.csproj en Visual Studio.
  2. Ejecute el proyecto. El explorador se abrirá en localhost:5000.

Solución de problemas

  • La solución no se compila, se producen errores durante la instalación o compilación de NPM.

    Limpieza o recompilación de la solución de C#

Publicación del ejemplo en Azure

  1. Haga clic con el botón derecho en el proyecto Chat y seleccione Publicar.
  2. Cree un nuevo perfil de publicación y seleccione la suscripción a Azure.
  3. Antes de publicar, agregue la cadena de conexión con Edit App Service Settings y rellene ResourceConnectionString como clave y proporcione la cadena de conexión (copiada de appsettings.json) como valor.

Limpieza de recursos

Si quiere limpiar y quitar una suscripción a Communication Services, puede eliminar el recurso o grupo de recursos. Al eliminar el grupo de recursos, también se elimina cualquier otro recurso que esté asociado a él. Obtenga más información sobre la limpieza de recursos.

Pasos siguientes

Descargue el ejemplo de GitHub.

Para más información, consulte los siguientes artículos.

Lecturas adicionales

  • Ejemplos: encuentre más ejemplos en nuestra página de información general de ejemplos.
  • Redux: Administración de estado del lado cliente
  • FluentUI: Biblioteca de interfaz de usuario con tecnología de Microsoft
  • React: Biblioteca para compilar interfaces de usuario
  • ASP.NET Core: Marco para compilar aplicaciones web