¿Cómo se inserta “beforeend” con htmx y eventos enviados por el servidor?

16 Jul, 2023 Programación 0

Estoy utilizando htmx 1.6.1 y estoy experimentando con el soporte de eventos enviados por el servidor. Estoy implementando un chat sencillo y cuando un usuario envía un mensaje quiero que este mensaje se envíe a todos los participantes del chat. Por lo tanto, cuando recibo un nuevo mensaje en el servidor, lo convierto en un fragmento HTML y lo envío a cada cliente a través de la conexión SSE. Por ejemplo, cuando la página del chat se carga, devuelve este HTML con todos los mensajes del chat:

<ul hx-sse="connect:/chat" ...="">
 <li>john: Mensaje del chat 1</li>
 <li>jane: Mensaje del chat 2</li>
</ul>

Ahora, si “john” envía otro mensaje, como “hola”, a algún recurso, quiero enviar <li>john: hello</li> a través de SSE a cada cliente, lo que resultaría en este HTML:

<ul hx-sse="connect:/chat" ...="">
 <li>john: Mensaje del chat 1</li>
 <li>jane: Mensaje del chat 2</li>
 <li>john: hola</li>
</ul>

Pero no sé cómo hacer esto. He logrado activar un GET hacia el servidor después de recibir el evento SSE por parte del cliente para obtener nuevamente todo el “ul”, pero esto no es lo que quiero hacer. (Lo que creo) quiero hacer es insertar el contenido del evento SSE en “beforeend” de la etiqueta “ul”, sin hacer una solicitud adicional al servidor.

¿Cómo puedo lograr esto?

davy.ai

July 16, 2023 at 12:37 am

Para lograr esto, puedes usar el atributo hx-trigger proporcionado por htmx en el elemento que desencadena el evento (en este caso, el formulario que envía el mensaje de chat). Establece el valor de hx-trigger a sse y agrega un evento personalizado hx-sse:received al elemento ul que recibirá el nuevo mensaje de chat.

Cuando el cliente recibe el evento SSE, htmx automáticamente desencadenará el evento hx-sse:received en el elemento ul, pasando los datos del evento como propiedad detail del evento. Puedes usar un escuchador de eventos para manejar el evento hx-sse:received e insertar el nuevo mensaje de chat en el elemento ul.

Aquí tienes un ejemplo de implementación:

<form hx-post="/chat">
  <input type="text" name="message">
  <button type="submit" hx-trigger="sse">Enviar</button>
</form>

<ul hx-sse="connect:/chat" hx-sse:received="insertarMensajeChat(event.detail)">
  <li>juan: Mensaje de chat 1</li>
  <li>jane: Mensaje de chat 2</li>
</ul>

<script>
  function insertarMensajeChat(mensaje) {
    var li = document.createElement('li');
    li.textContent = mensaje;
    document.querySelector('ul').appendChild(li);
  }
</script>

En este ejemplo, el atributo hx-post en el formulario especifica el punto final para enviar un mensaje de chat. El atributo hx-trigger="sse" en el botón de envío le indica a htmx que desencadene una solicitud SSE después de enviar el formulario.

El atributo hx-sse en el elemento ul especifica el punto final SSE al que conectarse, y el atributo hx-sse:received especifica el evento personalizado que se desencadena cuando se recibe un evento SSE.

La función insertarMensajeChat es un controlador de eventos para el evento hx-sse:received. Crea un nuevo elemento li que contiene el mensaje de chat recibido en el evento SSE y lo agrega al elemento ul. Esto inserta el nuevo mensaje de chat en el contenido HTML de la página sin realizar una solicitud adicional al servidor.

Answer

davy.ai

July 16, 2023 at 12:37 am
Para lograr esto, puedes usar el atributo hx-trigger proporcionado por htmx en el elemento que desencadena el evento (en este caso, el formulario que envía el mensaje de chat). Establece el valor de hx-trigger a sse y agrega un evento personalizado hx-sse:received al elemento ul que recibirá el nuevo mensaje de chat.

Cuando el cliente recibe el evento SSE, htmx automáticamente desencadenará el evento hx-sse:received en el elemento ul, pasando los datos del evento como propiedad detail del evento. Puedes usar un escuchador de eventos para manejar el evento hx-sse:received e insertar el nuevo mensaje de chat en el elemento ul.

Aquí tienes un ejemplo de implementación:
```
<form hx-post="/chat">
  <input type="text" name="message">
  <button type="submit" hx-trigger="sse">Enviar</button>
</form>

<ul hx-sse="connect:/chat" hx-sse:received="insertarMensajeChat(event.detail)">
  <li>juan: Mensaje de chat 1</li>
  <li>jane: Mensaje de chat 2</li>
</ul>

<script>
  function insertarMensajeChat(mensaje) {
    var li = document.createElement('li');
    li.textContent = mensaje;
    document.querySelector('ul').appendChild(li);
  }
</script>
```
En este ejemplo, el atributo hx-post en el formulario especifica el punto final para enviar un mensaje de chat. El atributo hx-trigger="sse" en el botón de envío le indica a htmx que desencadene una solicitud SSE después de enviar el formulario.

El atributo hx-sse en el elemento ul especifica el punto final SSE al que conectarse, y el atributo hx-sse:received especifica el evento personalizado que se desencadena cuando se recibe un evento SSE.

La función insertarMensajeChat es un controlador de eventos para el evento hx-sse:received. Crea un nuevo elemento li que contiene el mensaje de chat recibido en el evento SSE y lo agrega al elemento ul. Esto inserta el nuevo mensaje de chat en el contenido HTML de la página sin realizar una solicitud adicional al servidor.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo se inserta “beforeend” con htmx y eventos enviados por el servidor?

Answer

davy.ai