4

Estoy haciendo un pequeño sistema de conteo y suma de puntajes, y en la parte del administrador quiero mostrar en tiempo real los puntajes de cada juez. Por ejemplo un juez puede asignar 3 puntajes entre un rango desde 1.0 hasta 10.0, mostrando al administrador una tabla como:

Juez      | Puntaje 1 | Puntaje 2 | Puntaje 3 |  Total
          |           |           |           |
Juez 1    | 6.8       | 7.5       | 8.0       |  22.3
          |           |           |           |
Juez 2    | 7.2       | 8.1       | 9.1       |  24.4
          |           |           |           |
Juez 3    | 8.4       | 7.7       | 7.0       |  23.1
          |           |           |           |
Juez 4    | 4.7       | 8.2       | 8.5       |  21.4

La idea es que cada vez que se cambie un puntaje se muestre ese puntaje en tiempo real, algo como un visor central.

Cada juez accede desde un computador diferente, entonces para mostrar en tiempo real los puntajes al administrador me surgieron algunas ideas como:

  1. Utilizar websockets para tener una comunicación bidireccional cada vez que se modifiquen los puntajes de cada juez, y cuando hayan finalizado la asignación de puntajes estos se guarden en la base de datos.
  2. Utilizar ajax para guardar los puntajes en la base de datos directamente en cada cambio que se haga a los inputs de los puntajes (onchange()), luego retornarlos a la pagina del administrador refrescando la misma cada cierto tiempo a través de javascript (setTimeout()).

Entonces mi pregunta es:

¿Cuál de esas soluciones es óptima?

¿Existiría otra forma hacerlo?

1
  • Personalmente creo que usar websockets es la solución óptima. Te recomiendo que le eches una mirada a Ratchet
    – Marcos
    Commented el 8 dic. 2016 a las 12:19

3 respuestas 3

6

La verdad es que utilizar AJAX o WebSockets va a depender de cada caso. Su funcionalidad y propósito no son los mismos, aunque se pueden solapar y se pueden utilizar para realizar tareas similares en algunos casos.

En el ejemplo que planteas, parece que lo óptimo sería usar WebSockets. Con los WebSockets vas a mantener una línea abierta con el servidor que te permitirá realizar una comunicación bidireccional (los jueces enviar información, y el servidor devolver los datos actualizados).

En cambio, si utilizaras AJAX te encontrarías con al menos este par de problemas:

  • Estarías haciendo múltiples llamadas AJAX innecesarias. Incluso si ningún juez cambia datos, los clientes seguirán haciendo llamadas periódicas pidiendo datos nuevos, recibiendo los mismos datos de vuelta, generando tráfico y uso de datos innecesario tanto en el servidor como en el cliente. Ojo: los WebSockets también usarían ancho de banda para mantener la conexión viva, aunque de una manera diferente.
  • El sistema no sería en tiempo real en sí. Realmente habría un lag o retardo desde que se cambian los datos hasta que se actualizan en el cliente, y no me refiero al tiempo de transporte en la red, me refiero al tiempo que pasa entre cada setInterval() o setTimeout(). Puede no ser importante en tu caso particular, pero en aplicaciones críticas, es tiempo que se pierde.

Nota: como bien indica rnd en su comentario, WebHooks son para comunicaciones servidor-servidor y entonces no servirían para este caso particular.

Si quieres alternativas y otras formas de hacerlo, quizás podrías plantearte usar WebHooks, aunque la verdad es que no la he usado nunca y no sé como funcionará (o si se podría usar en este caso no se puede usar, ver nota arriba).

La idea de los WebHooks (espero explicarme bien) es tener una URL configurada a la que se enviará una solicitud HTTP cada vez que se ejecute una acción específica (por ejemplo: hacer un commit, escribir un comentario, etc). Entonces cada vez que se ejecute una acción en la página original, se realizará una operación en otra página.

Aunque, como he dicho antes, no sé si te serviría en este caso particular porque parece algo más estático y puede que necesitase la recarga de la página de destino para ver los cambios.

3
  • Excelente respuesta, si estaba pensando en el tiempo de respuesta de ajax a traves de setInterval() y las múltiples llamadas innecesarias, aunque el sistema no es critico. Yo tambien pienso que lla mejor alternativa es WebSockets, creo que usaré esa alternativa, gracias :) Commented el 8 dic. 2016 a las 14:37
  • 1
    Segun lo entiendo, Los webhooks no son aplicables (bidireccionalmente) en arquitectura cliente-servidor por que el cliente esta protegido por un tercero de conexiones externas. En cambio son perfectos para server - server (aka. M2M) por que las condiciones de red son bien conocidas. Commented el 8 dic. 2016 a las 14:48
  • @rnd Gracias por el comentario. Actualice la respuesta acorde a lo que dices
    – Alvaro Montoro
    Commented el 8 dic. 2016 a las 15:06
1

Buenas, ya que usas tablas te recomiendo que hagas un Grid y uses la librería Kendo. Haz un controlador en php que te haga las consultas la BD y manéjalas con formato JSON y con ajax puedes actualizar sólo el llamado DataSource que es lo que hace las peticiones Ajax y luego rellena el Grid.

Es sencillo de utilizar y muy rápido, lo he usado en el trabajo para recibir participantes de diferentes tipos de carreras con los tiempos a tiempo real, pulsaciones y demás información...

Te dejo un ejemplo de uso:

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
    </script>
</div>

Tienes un controlador php dónde recibes la información de la base de datos y la tratas, al final devuelves un JSON, el datasource llama éste controlador, lee la información y pagina la información para que se envíe más rápidamente.

Luego en el Grid montamos las columnas, ponemos el título que llevará esa columna y abajo el nombre de la variable del campo JSON que contiene la información para mostrar, finalmente el dataSource lo envolvemos en un setInterval() que lo que hará es hacer-le hacer otra petición cada vez al controlador php.

Este sería su uso básico.

2
  • Pregunta... Esto como dices es de forma en tiempo real... pero como funciona? cual es su metodología principal?
    – cignius
    Commented el 8 dic. 2016 a las 13:35
  • Genial gracias por la librería, no sabia que existía :). Commented el 8 dic. 2016 a las 14:38
1

Como ya te han comentado, WebSockets es, de las soluciones por ti propuestas, la más eficiente.

No obstante, ese protocolo se lleva mal con proxys, cortafuegos y similares; si tienes algo de eso en la red, puedes tener problemas.

Existe una tercera solución, de hecho la mas utilizada hasta hace relativamente poco: long polling.

Mediante esta técnica, realizas solicitudes AJAX desde Javascript, pero el servidor no responde al momento, sino que espera cierta cantidad de tiempo antes de responder.

Desde JavaScript, su uso es mediante un simple bucle infinito de llamadas AJAX, pero has de estar preparado para recibir una respuesta sin cambios, ante la que respondes con una nueva petición.

Desde el servidor, cada cierto tiempo, envías una respuesta "sin cambios", salvo que haya algún cambio, en cuyo caso mandas los datos pertinentes, y continuas con el bucle.

NO sobrecargas el servidor con peticiones, puesto que este deja pasar un tiempo entre cada respuesta (salvo que haya datos que enviar), y, como se basa en HTTP normal, no tiene problemas con proxys ni historias.

Hay diversas librerías disponibles para diversos lenguajes (no indicas cual usas), y, de todas formas, es simple de implementar a pelo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.