761 votos

Un Simple "Votación" código de ejemplo?

Puedo encontrar un montón de información sobre cómo Sondeo Largo obras (Por ejemplo, estay esta), pero no simples ejemplos de cómo implementar esto en el código.

Todo lo que puedo encontrar es cometd, que se basa en el Dojo JS marco, y a un relativamente complejo sistema de servidor..

Básicamente, ¿cómo debo utilizar Apache para servir las peticiones, y ¿cómo iba yo a escribir una secuencia de comandos simple (por ejemplo, en PHP) que iba a "sondear" el servidor para los mensajes nuevos?

El ejemplo no tiene que ser escalable, segura o completa, sólo se necesita a la obra!

502voto

dbr Puntos 66401

Es más simple de lo que yo inicialmente pensaba.. Básicamente, usted tiene una página que no hace nada, hasta que los datos que desea enviar (es decir, llega un nuevo mensaje).

Aquí es un realmente un ejemplo básico, que envía una simple cadena de caracteres después de 2 a 10 segundos. 1 en la 3 posibilidad de devolver un error 404 (mostrar el error de manipulación en los próximos ejemplo de Javascript)

msgsrv.php

<?php
if(rand(1,3) == 1){
    /* Fake an error */
    header("HTTP/1.0 404 Not Found");
    die();
}

/* Send a string after a random number of seconds (2-10) */
sleep(rand(2,10));
echo("Hi! Have a random number: " . rand(1,10));
?>

Nota: Con un sitio real, la ejecución de este regulares de servidor web como Apache rápidamente atar todos los "hilos" y dejar que sea incapaz de responder a otras solicitudes.. Hay formas de evitar esto, pero es recomendable que escriba un "largo encuesta de servidor" en algo parecido a Python trenzado, que no depende de un hilo por cada solicitud. cometD es un popular (que está disponible en varios idiomas), y el Tornado es un nuevo marco hecha específicamente para este tipo de tareas (que fue construido para FriendFeed largo de votación código)... pero como un simple ejemplo, Apache es más que suficiente! Este script se podría fácilmente ser escrito en cualquier lenguaje (yo elegí Apache/PHP, ya que son muy comunes, y se me ocurrió que se ejecuta de forma local)

Luego, en Javascript, solicita el archivo de arriba (msg_srv.php), y esperar una respuesta. Cuando usted consigue uno, de actuar en función de los datos. A continuación, solicita el archivo y volver a esperar, actuar sobre los datos (y repetir)

Lo que sigue es un ejemplo de esta página.. Cuando se carga la página, se envía la solicitud inicial para la msgsrv.php archivo.. Si es que tiene éxito, nos anexar el mensaje a las #messages div, luego, después de 1 segundo que llame a la waitForMsg vuelva a funcionar, lo que desencadena la espera.

El 1 segunda setTimeout() es una realidad básica de la tasa de limitador, funciona bien sin esto, pero si msgsrv.php siempre devuelve al instante (con un error de sintaxis, por ejemplo) - que inundan el navegador y rápidamente se puede congelar. Esto sería mejor hacer la comprobación de si el archivo contiene una válida respuesta en JSON, y/o mantener un total acumulado de solicitudes por minuto/segundo, y la pausa adecuada.

Si los errores de página, que se anexa el error al #messages div, espera 15 segundos y, a continuación, intenta de nuevo (idéntica a como lo espera 1 segundo después de cada mensaje)

Lo bueno de este enfoque es que es muy resistente. Si los clientes conexión a internet, no muere, tiempo de espera, y luego tratar de volver a conectar - esto es inherente en cuanto a la duración de votación funciona, no hay complicado de control de errores es necesario

De todos modos, la long_poller.htm código, utilizando el framework de jQuery:

<html>
<head>
    <title>BargePoller</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
      body{ background:#000;color:#fff;font-size:.9em; }
      .msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
      .old{ background-color:#246499;}
      .new{ background-color:#3B9957;}
    .error{ background-color:#992E36;}
    </style>

    <script type="text/javascript" charset="utf-8">
    function addmsg(type, msg){
        /* Simple helper to add a div.
        type is the name of a CSS class (old/new/error).
        msg is the contents of the div */
        $("#messages").append(
            "<div class='msg "+ type +"'>"+ msg +"</div>"
        );
    }

    function waitForMsg(){
        /* This requests the url "msgsrv.php"
        When it complete (or errors)*/
        $.ajax({
            type: "GET",
            url: "msgsrv.php",

            async: true, /* If set to non-async, browser shows page as "Loading.."*/
            cache: false,
            timeout:50000, /* Timeout in ms */

            success: function(data){ /* called when request to barge.php completes */
                addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
                setTimeout(
                    waitForMsg, /* Request next message */
                    1000 /* ..after 1 seconds */
                );
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", textStatus + " (" + errorThrown + ")");
                setTimeout(
                    waitForMsg, /* Try again after.. */
                    15000); /* milliseconds (15seconds) */
            }
        });
    };

    $(document).ready(function(){
        waitForMsg(); /* Start the inital request */
    });
    </script>
</head>
<body>
    <div id="messages">
        <div class="msg old">
            BargePoll message requester!
        </div>
    </div>
</body>
</html>

41voto

Dustin Puntos 35205

Yo tengo un realmente simple ejemplo de chat como parte de bebidas.

Edit: (ya que todo el mundo es pegar su código aquí)

Este es el basado en JSON de chat multiusuario utilizando long-polling y bebidas. Esta es una demostración de cómo hacer las llamadas, así que por favor ignorar los problemas de XSS. Nadie debe implementar esta sin desinfectar.

Aviso de que el cliente siempre tiene una conexión con el servidor, y tan pronto como alguien envía un mensaje, todo el mundo debería ver aproximadamente al instante.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2008 Dustin Sallings <dustin+html@spy.net> -->
<html lang="en">
  <head>
    <title>slosh chat</title>
    <script type="text/javascript"
      src="http://code.jquery.com/jquery-latest.js"></script>
    <link title="Default" rel="stylesheet" media="screen" href="style.css" />
  </head>

  <body>
    <h1>Welcome to Slosh Chat</h1>

    <div id="messages">
      <div>
        <span class="from">First!:</span>
        <span class="msg">Welcome to chat. Please don't hurt each other.</span>
      </div>
    </div>

    <form method="post" action="#">
      <div>Nick: <input id='from' type="text" name="from"/></div>
      <div>Message:</div>
      <div><textarea id='msg' name="msg"></textarea></div>
      <div><input type="submit" value="Say it" id="submit"/></div>
    </form>

    <script type="text/javascript">
      function gotData(json, st) {
        var msgs=$('#messages');
        $.each(json.res, function(idx, p) {
          var from = p.from[0]
          var msg = p.msg[0]
          msgs.append("<div><span class='from'>" + from + ":</span>" +
            " <span class='msg'>" + msg + "</span></div>");
        });
        // The jQuery wrapped msgs above does not work here.
        var msgs=document.getElementById("messages");
        msgs.scrollTop = msgs.scrollHeight;
      }

      function getNewComments() {
        $.getJSON('/topics/chat.json', gotData);
      }

      $(document).ready(function() {
        $(document).ajaxStop(getNewComments);
        $("form").submit(function() {
          $.post('/topics/chat', $('form').serialize());
          return false;
        });
        getNewComments();
      });
    </script>
  </body>
</html>

31voto

mikemaccana Puntos 7470

Tornado está diseñado para una votación, y que incluye un grupo muy reducido (unos cientos de líneas de Python) chat de la aplicación en /ejemplos/chatdemo , incluyendo el código del servidor y JS código de cliente. Esto funciona así:

  • Uso de los clientes de JS para solicitar una de las actualizaciones desde (número del último mensaje), servidor de URLHandler recibe estos y añade una devolución de llamada para responder al cliente a una cola.

  • Cuando el servidor recibe un mensaje nuevo, el onmessage se dispara el evento, bucles a través de las devoluciones de llamada, y envía los mensajes.

  • En el lado del cliente JS recibe el mensaje, éste se agrega a la página, a continuación, pide actualizaciones desde este nuevo IDENTIFICADOR de mensaje.

24voto

Greg Puntos 132247

Creo que el cliente parece normal asincrónica petición AJAX, pero que se debe esperar de un "largo tiempo" para volver.

A continuación, el servidor se parece a esto.

while (!hasNewData())
    usleep(50);

outputNewData();

Así, la petición AJAX va al servidor, probablemente incluyendo una marca de tiempo de cuando se realizó la última actualización, por lo que su hasNewData() sabe lo que los datos que ya tienes. A continuación, el servidor se encuentra en un bucle de dormir hasta que nuevos datos disponibles. Mientras tanto, su petición AJAX sigue conectado, simplemente colgando a la espera de los datos. Finalmente, cuando los nuevos datos disponibles, el servidor le da a su petición AJAX y cierra la conexión.

16voto

Sean O Puntos 820

Este es un buen 5 minutos screencast sobre cómo hacer largo de votación usando PHP y jQuery: http://screenr.com/SNH

El código es muy similar a la dbr's ejemplo de arriba.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X