Chat: Interfaz web

1Controlador

Solo vamos a ver el controlador que carga la interfaz web.

Los controladores Message y Event, que se comunican con el servidor para enviar y recibir mensajes, se describen en detalle en la siguiente página del tutorial.

Aquí está el código del controlador Homepage, guardado en el archivo controllers/Homepage.php: 

<?php

/** Controlador raíz. */
class Homepage extends \Temma\Web\Controller {
    /** Acción raíz. */
    public function __invoke() {
        $this->_view('homepage.tpl');
    }
}
  • Línea 4: definición del controlador Homepage.
  • Línea 6: definición del método __invoke(), correspondiente a la acción raíz del controlador.
  • Línea 7: el método contiene únicamente la instrucción que define que la plantilla que se debe usar es el archivo homepage.tpl.

2Plantilla

Aquí está el código de la plantilla templates/homepage.tpl, que se carga cuando el usuario accede al servicio: 

<!DOCTYPE html>
<html>
<body>
    {* formulario de envío de mensajes *}
    <input id="from" type="text" placeholder="Nombre" autofocus>
    <input id="text" type="text" placeholder="Mensaje">
    <button onclick="sendMessage()">Enviar</button>

    {* lista de mensajes recibidos *}
    <ul id="liste"></ul>

    {* carga del código javascript *}
    <script src="/chat.js"></script>
</body>
</html>
  • Líneas 5 a 7: formulario para enviar mensajes. El primer campo espera el nombre del usuario, el segundo el texto del mensaje. Al hacer clic en el botón "Enviar", se ejecuta la función Javascript sendMessage(), que envía los datos del formulario al servidor mediante una petición AJAX.
  • Línea 10: esta lista recibirá un elemento adicional cada vez que se reciba un mensaje.
  • Línea 13: se carga el archivo que contiene el código Javascript.

3Código Javascript

Aquí está el código Javascript guardado en el archivo www/chat.js: 

/* *** RECEPCIÓN DE MENSAJES POR SSE *** */
// conexión a la fuente SSE
const evtSource = new EventSource("/event/fetch");
// escucha los eventos enviados en el canal "msg"
evtSource.addEventListener("msg", function(event) {
    // creación del elemento DOM <li>
    const newElement = document.createElement("li");
    // deserialización del evento recibido
    var evtData = JSON.parse(event.data);
    // añade el mensaje a la lista
    newElement.textContent = evtData.from + " : " + evtData.text;
    // añade el elemento a la lista en la página
    document.getElementById("liste").appendChild(newElement);
});

/* *** ENVÍO DE MENSAJES AL SERVIDOR *** */
// función llamada para enviar mensajes al servidor
function sendMessage() {
    // recupera los valores del formulario
    const from = document.getElementById("from").value;
    const text = document.getElementById("text").value;
    // creación del objeto de parámetros POST
    const formData = new FormData();
    formData.append("from", from);
    formData.append("text", text);
    // transmisión de datos por AJAX
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/message/broadcast", true);
    xhr.send(formData);
}

La primera parte del código abre la comunicación SSE para recibir eventos del servidor. La segunda parte es la función que se llama cuando se envía un mensaje.

  • Línea 3: conexión a la fuente de eventos SSE, disponible en la URL /event/fetch.
  • Líneas 5 a 14: código ejecutado cada vez que se recibe un evento SSE en el canal "msg".
    • Línea 7: creación de un nodo <li>, correspondiente al elemento que contendrá el mensaje y que se añadirá a la lista en la página web.
    • Línea 9: deserialización de los datos (recibidos en formato JSON).
    • Línea 11: en el elemento <li> creado anteriormente, escribimos un texto formado por el nombre de quien envía el mensaje, seguido de " : " y después el texto del mensaje recibido.
    • Línea 13: el elemento <li> se añade a la lista en la página web.
  • Líneas 18 a 30: función llamada cuando el usuario hace clic en el botón "Enviar" del formulario.
    • Líneas 20 y 21: recuperación de los datos del formulario.
    • Líneas 23 a 25: creación de un objeto FormData que contiene los datos del formulario.
    • Líneas 27 a 29: transmisión de datos por AJAX a la URL /message/broadcast.