El protocolo WebSocket (WS) ofrece la posibilidad de intercambiar datos entre un navegador y un servidor a través de una conexión persistente. Los datos se transmiten a través de él en ambas direcciones en forma de "paquetes" sin romper la conexión y sin peticiones HTTP adicionales.

WebSocket es bueno para servicios de comunicación constante, como salas de chat, juegos en línea, mercados en tiempo real, etc.

Como ejemplo, vamos a crear un backend para un simple chat. Es necesario proporcionar las características básicas:

  1. Envío de mensajes al chat.
  2. Determinación de la autoría del mensaje.
  3. Notificaciones de acciones. Por ejemplo, un nuevo miembro se une al chat, abandona el chat, indicador de escritura (alguien está escribiendo...)

Modelo de base de datos

Empecemos por crear un modelo para la base de datos. Aunque inicialmente no pensemos almacenar los mensajes y el historial de correspondencia en la base de datos, necesitamos un modelo para estructurar el envío de mensajes y notificaciones.

Creemos un modelo genérico chat_event genérico que contenga:

  1. Relación con el usuario. Cualquier mensaje incluye información sobre a qué usuario se refiere.
  2. Type (enum) campo con 4 opciones posibles. Connected y Disconnected - para notificaciones cuando un usuario se conecta o desconecta. Typing - para informar de que el usuario está escribiendo un nuevo mensaje. Message - para un mensaje de texto estándar.
  3. Message (text) - el texto del mensaje.

Configuración del punto final

El siguiente paso de desarrollo es ligeramente diferente del enfoque estándar que es común a otras características de la aplicación. Normalmente, se crea un proceso de negocio y, a continuación, se configura un endpoint para ejecutarlo. En el caso de WebSockets, todo sucede de manera diferente, y el punto de partida es la creación de un endpoint basado en los disparadores de los cuales se crean posteriormente los procesos de negocio.

Necesitamos una sección endpoint. Allí creamos un nuevo endpoint seleccionando la opción adecuada -. WebSocket Endpoint.

Para WebSockets no hay elección de método de petición - siempre es GET. Especifiquemos una URL simple - /chat/ y creemos un grupo para ella con el mismo nombre.

A continuación, necesitamos crear variables que determinarán el formato de intercambio de datos dentro del WebSocket.

  • Client-to-Server. Similar a los parámetros de entrada para procesos de negocio estándar. En nuestro ejemplo, crearemos un mensaje de variable de texto simple (enviaremos mensajes de texto ordinarios al servidor).
  • Server-to-Client. Aquí las variables se crean para mensajes de servidor, enviando datos desde el servidor al usuario. Nótese que esto no es lo mismo que una respuesta a una petición del usuario. Y aunque puede ser enviado como una reacción a las acciones del usuario, es más a menudo causado por algunos eventos externos. En nuestro ejemplo, el servidor enviará notificaciones de todos los eventos del chat, por lo que estableceremos el modelo chat_event como variable.

Después de crear las variables, puedes proceder a lo principal - crear la lógica del WebSocket. Se basa en disparadores que se activan cuando se recibe un nuevo mensaje en un WebSocket, así como cuando se establece o se desconecta una conexión.

Creando un proceso de negocio

Utilicemos el disparador connect y creemos un proceso de negocio para él. Se lanzará en el momento en que el usuario establezca una conexión con el WebSocket, y su tarea será enviar una notificación sobre esto a todos los usuarios conectados.

Observa que el bloque de inicio incluye dos parámetros User ID y Connection ID. De este modo, no sólo se puede determinar inmediatamente el usuario que ha establecido la conexión, sino también obtener un identificador único para esta conexión. En el futuro, este identificador se puede utilizar, por ejemplo, para enviar mensajes dirigidos o para terminar la conexión por la fuerza.

Сrea todos los pasos necesarios del proceso de negocio:

  1. Make User. Utilicemos el parámetro inicial User ID para crear un modelo de usuario.
  2. Make chat_event. Crear un modelo de notificación de eventos. Lo conectaremos al usuario utilizando el modelo creado en el paso anterior y también seleccionaremos el tipo de evento y estableceremos Type = Connected. No utilizamos el parámetro mensaje ya que, en este caso, no es un mensaje lo que se transmite sino una notificación de conexión.
  3. WSS Connections /chat/. Usando este bloque, obtendremos una lista de todas las conexiones WebSocket activas.
  4. For Each Loop. Usamos el array de conexiones como parámetro del bucle, enviando notificaciones a cada usuario conectado.
  5. Expand WebSocket Connection. Desplegamos la información de la conexión para obtener el Connection ID.
  6. WSS Send /chat/. Utilizamos el Connection ID y el chat_event para enviar la notificación.

Uso de Postman para probar WebSockets

A estas alturas, el WebSocket, aunque no tiene una funcionalidad significativa, ya está operativo y se puede probar en la práctica. Para ello, se puede utilizar cualquier herramienta que permita trabajar con WebSockets. Veamos cómo hacerlo con Postman como ejemplo.

Debe hacer clic en el icono New button y seleccionar WebSocket Request

Necesitas especificar la URL para el WebSocket. Se puede encontrar usando Swagger, donde el WebSocket está en la lista con el resto de los endpoints.

A diferencia de las peticiones estándar, los WebSockets operan usando el protocolo wss por lo que hay que sustituir https por wss. El resultado debería ser una URL similar: wss://qvlxglh-app.apms.io/api/chat/

A continuación, tienes que añadir un token de autenticación a la solicitud, ya que la conexión no puede ser anónima. Necesitas crear una cabecera Authorization con un valor como Bearer lBCiunRWg6BfogDrLml4jrC4iJiWucKo. En lugar de lBCiunRWg6BfogDrLml4jrC4iJiWucKo, debe insertar su propio token, que puede obtenerse como resultado de la autorización (POST /auth/ endpoint).

Si todo se hace correctamente, al pulsar el botón Connect se establecerá una conexión y se recibirá el primer mensaje del lado del servidor, el proceso de negocio para el envío que se creó anteriormente.

Al mismo tiempo, se puede asegurar que la recepción de mensajes desde el servidor se produce no sólo como una reacción a algunas peticiones de nosotros. Las acciones de otros usuarios pueden provocarlos. Para comprobarlo, puede establecer una conexión en otra pestaña utilizando el token de autenticación de otro usuario. Un mensaje del servidor notificando esto será enviado a todas las pestañas con una conexión activa.

Proceso de negocio para la mensajería

Ahora puedes continuar desarrollando las capacidades del WebSocket y crear un proceso de negocio para mensajería. Por cierto, ahora puedes enviar mensajes, pero sin crear primero la lógica, esto no tiene sentido, el mensaje no conducirá a ninguna reacción. Por lo tanto, volvamos a la configuración del endpoint y creemos un proceso de negocio para el receive disparador.

En muchos aspectos, será similar al proceso de negocio anterior. Cuando se reciba un mensaje, será necesario generar un chat_event y enviar notificaciones al respecto a todos los participantes del chat. La diferencia es que será necesario añadir el propio mensaje a chat_event, y no será necesario incluir al autor del mensaje en la lista de correo.

Los mismos bloques se utilizan en la primera parte del proceso de negocio. En el bloque Make chat_event es necesario establecer type = message y adjuntar el propio mensaje desde el bloque de inicio.

En el bucle, hay que comprobar (Equal ) y enviar el mensaje sólo si el ID de conexión del receptor no coincide con el ID de conexión del emisor (If-Else = False).

Puedes publicar el resultado y empezar a probar. Tenga en cuenta que el mensaje en sí está en formato JSON por lo que, al utilizar la variable de mensaje, tendrá este aspecto:

{"message":"Some text here"}

En el ejemplo, puedes ver que recibes una notificación de conexión al chat, envías tu propio mensaje (Hi!), y recibe una respuesta (Glad to see you!)

Esto completa la creación del backend básico para chat usando WebSockets. Puedes empezar a construir el front-end y desarrollar tu propia aplicación de mensajería en tiempo real.

Was this article helpful?

AppMaster.io 101 Curso intensivo

10 Módulos
2 Semanas

¿No sabe por dónde empezar? Ponte en marcha con nuestro curso intensivo para principiantes y explora AppMaster de la A a la Z.

Inicio de curso
Development it’s so easy with AppMaster!

Necesitas más ayuda?

Resuelva cualquier problema con la ayuda de nuestros expertos. Ahorre tiempo y concéntrese en crear sus aplicaciones.

headphones

Soporte de contacto

Cuéntenos su problema y le encontraremos una solución.

message

Chat comunitario

Discutir preguntas con otros usuarios en nuestro chat.

Únete a la Comunidad