Cómo construir un sistema de comentarios en tiempo real

 

 

 

  • Deploy Fast. Deploy Smart
  • Design Patterns For AI Interfaces, with Vitaly Friedman

  • Índice
    1. Lecturas adicionales sobre SmashingMag:
    2. ¿Por qué deberíamos preocuparnos por la Web en tiempo real?
      1. Datos de redes sociales
      2. Mayores expectativas de los usuarios
      3. WebSockets
      4. ¿Cómo se utilizan las tecnologías en tiempo real?
    3. Creación de un sistema genérico de comentarios de blogs
      1. Comenzar desde una plantilla
      2. HTML
      3. Comentarios
      4. Formulario de comentarios CSS
      5. Manejo del envío de comentarios
      6. Mostrar los comentarios con la publicación del blog
    4. Mejora progresiva con jQuery
      1. Capture el envío del formulario de comentarios
      2. PUBLICAR el comentario con AJAX
      3. Actualización dinámica de la interfaz de usuario con el comentario
      4. Detectar y responder a la solicitud AJAX
    5. Obteniendo tiempo real, ¡por fin!
      1. ¿Qué es el empujador?
      2. Regístrese en Pusher y obtenga sus credenciales API
      3. JavaScript en tiempo real
      4. Envío de eventos en tiempo real utilizando el Creador de eventos
      5. PHP en tiempo real

    La Web se ha vuelto cada vez más interactiva a lo largo de los años. Esta tendencia continuará con la próxima generación de aplicaciones impulsadas por la Web en tiempo real .

     

    Agregar funcionalidad en tiempo real a una aplicación puede dar como resultado una experiencia de usuario más interactiva y atractiva. Sin embargo, configurar y mantener los componentes en tiempo real del lado del servidor puede ser una distracción no deseada. Pero no te preocupes, hay una solución.

    Los servicios web y las API alojados en la nube han venido al rescate de muchos desarrolladores en los últimos años, y la funcionalidad en tiempo real no es diferente. El objetivo de Pusher , por ejemplo, es permitirle concentrarse en crear sus aplicaciones web en tiempo real ofreciendo una API alojada que hace que sea rápido y fácil agregar funcionalidad escalable en tiempo real a aplicaciones web y móviles.

    Lecturas adicionales sobre SmashingMag:

    • Mejore la experiencia del usuario con funciones en tiempo real
    • Datos en tiempo real y una web más personalizada
    • Creación de un tablero retrospectivo en tiempo real con video chat
    • ¿Dónde se han ido todos los comentarios?

    En este tutorial, mostraré cómo convertir un sistema básico de comentarios de blog en una experiencia atractiva en tiempo real en la que verá un comentario realizado en una ventana del navegador aparecer "mágicamente" en una segunda ventana.

    ¿Por qué deberíamos preocuparnos por la Web en tiempo real?

    Aunque la Web en tiempo real es una frase popular relativamente reciente, las tecnologías Web en tiempo real existen desde hace más de 10 años. Fueron utilizados principalmente por empresas que crean software destinado al sector de servicios financieros o en aplicaciones de chat web. Estas soluciones iniciales se clasificaron como "trucos". En 2006, a estas soluciones se les dio un término general llamado Comet , pero incluso con un nombre definido, las soluciones todavía se consideraban hacks. Entonces, ¿qué ha cambiado?

    En mi opinión, hay una serie de factores que han llevado a las tecnologías Web en tiempo real a la vanguardia del desarrollo de aplicaciones Web.

    Datos de redes sociales

    Las redes sociales, y específicamente Twitter, han significado que cada vez haya más datos disponibles al instante. Atrás quedaron los días en los que teníamos que esperar una eternidad para que Google encontrara nuestros datos (publicaciones de blog, actualizaciones de estado, imágenes). Ahora existen plataformas que no sólo hacen que nuestros datos sean detectables instantáneamente, sino que también los entregan instantáneamente a quienes han declarado su interés. Esta idea de Publicar/Suscribir es fundamental para la Web en tiempo real, especialmente cuando se crean aplicaciones Web.

    Mayores expectativas de los usuarios

    A medida que más usuarios pasaron a utilizar aplicaciones como Twitter y Facebook, y las experiencias de usuario que ofrecen, cambió su percepción de lo que se puede esperar de una aplicación web. Aunque las aplicaciones se habían vuelto más dinámicas gracias al uso de JavaScript, las experiencias rara vez eran verdaderamente interactivas. Facebook, con su muro en tiempo real (y luego otras funciones en tiempo real) y Twitter con su interfaz de usuario centrada en el flujo de actividad y su enfoque en la conversación, demostraron cómo las aplicaciones web pueden ser muy atractivas.

    WebSockets

    Anteriormente dije que las soluciones anteriores que permitían a los servidores enviar datos instantáneamente a los navegadores web se consideraban "trucos". Pero esto no eliminó el hecho de que existía el requisito de poder hacer esto de forma estandarizada y en todos los navegadores. Nuestras oraciones finalmente han sido respondidas con HTML5 WebSockets. WebSockets representa una API y un protocolo estandarizados que permiten la comunicación bidireccional entre el servidor y el cliente (navegador web) en tiempo real a través de una única conexión. Las soluciones más antiguas sólo podían lograr una comunicación bidireccional utilizando dos conexiones, por lo que el hecho de que los WebSockets utilicen una única conexión es realmente un gran problema. Puede suponer un enorme ahorro de recursos para el servidor y el cliente, siendo este último especialmente importante para los dispositivos móviles donde la energía de la batería es extremadamente valiosa.

     

    ¿Cómo se utilizan las tecnologías en tiempo real?

    Las tecnologías web en tiempo real están haciendo posible crear todo tipo de funcionalidades atractivas, lo que conduce a mejores experiencias de usuario. A continuación se muestran algunos casos de uso comunes:

    • Estadísticas en tiempo real : la tecnología se utilizó por primera vez en finanzas para mostrar información bursátil, por lo que no sorprende que ahora se utilice más que nunca. También es muy beneficioso para los deportes, las apuestas y la analítica.
    • Notificaciones : cuando algo que le interesa a un usuario está disponible o cambia.
    • Flujos de actividad : flujos de actividad de amigos o proyectos. Esto se ve comúnmente en aplicaciones como Twitter, Facebook, Trello, Quora y muchas más.
    • Chat : la tecnología web 101 o en tiempo real, pero sigue siendo una función muy valiosa. Ayuda a brindar una interacción instantánea entre amigos, compañeros de trabajo, clientes y servicio al cliente, etc.
    • Colaboración : Google Docs ofrece este tipo de funcionalidad dentro de sus documentos, hojas de cálculo y aplicaciones de dibujo, y veremos casos de uso similares en muchas más aplicaciones.
    • Juegos multijugador : la capacidad de ofrecer instantáneamente movimientos de jugador, cambios de estado del juego y actualizaciones de puntuación es claramente importante para los juegos multijugador.

    En el resto de este tutorial, cubriré la creación de un sistema básico de comentarios de blog, cómo mejorarlo progresivamente usando jQuery y, finalmente, también lo mejoraré progresivamente usando el servicio web en tiempo real para el que trabajo, Pusher, que demostrará no lo fácil que puede ser utilizar la tecnología web en tiempo real, pero también el valor y el mayor compromiso que un factor de tiempo real puede aportar.

    Creación de un sistema genérico de comentarios de blogs

    Comenzar desde una plantilla

    Quiero centrarme en agregar comentarios en tiempo real a una publicación de blog, así que comencemos desde una plantilla .

    Esta plantilla reutiliza el diseño HTML5 definido en la publicación sobre Codificación de un diseño HTML 5 desde cero y la estructura de archivos con la que comenzaremos es la siguiente (con algunas adiciones de las que no debemos preocuparnos por el momento):

    • css (directorio)
      • formularios-globales.css
      • principal.css
      • restablecer.css
    • imágenes (directorio)
    • index.php

    HTML

    La plantilla HTML, que se encuentra en index.php , se cambió del artículo Diseño HTML5 para centrarse en que el contenido sea una publicación de blog con comentarios. Puede ver la fuente HTML aquí .

    Los principales elementos a tener en cuenta son:

    • section- el contenido de la publicación del blog
    • section- donde deben aparecer los comentarios. Aquí es donde se realizará la mayor parte de nuestro trabajo.

    Comentarios

    Ahora que tenemos el HTML implementado para nuestra publicación de blog y para mostrar los comentarios, también necesitamos una forma para que nuestros lectores envíen comentarios, así que agreguemos un elemento formpara recopilar y enviar los detalles de los comentarios a post_comment.php . Agregaremos esto al final de la sectionsección envuelto en un archivo div.

     

    div h3Leave a Comment/h3 form action="post_comment.php" method="post" label for="comment_author"Your name/label input type="text" name="comment_author" value="" tabindex="1" required="required" label for="email"Your email;/label input type="email" name="email" value="" tabindex="2" required="required" label for="comment"Your message/label textarea name="comment" rows="10" tabindex="4" required="required"/textarea -- comment_post_ID value hard-coded as 1 -- input type="hidden" name="comment_post_ID" value="1" / input name="submit" type="submit" value="Submit comment" / /form/div

    Formulario de comentarios CSS

    Apliquemos algo de CSS para que las cosas se vean un poco mejor agregando lo siguiente a main.css :

    #respond { margin-top: 40px;}#respond input[type='text'],#respond input[type='email'],#respond textarea { margin-bottom: 10px; display: block; width: 100%; border: 1px solid rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; line-height: 1.4em;}

    Una vez que la estructura HTML, el formulario de comentarios y el CSS están en su lugar, nuestro sistema de blogs ha comenzado a verse un poco más presentable.

    Manejo del envío de comentarios

    El siguiente paso es escribir el controlador de envío del formulario PHP que acepta la solicitud y almacena el comentario, post_comment.php . Debes crear este archivo en la raíz de tu aplicación.

    Como dije antes, quiero centrarme en la funcionalidad en tiempo real, por lo que existe una clase dentro de la plantilla que ha descargado que encapsula algunas de las funciones estándar de persistencia y verificación de datos. Esta clase está definida en Persistence.php (puede ver el código fuente aquí ), no tiene calidad de producción de ninguna manera y maneja:

    • Validación básica
    • Higienización básica de datos
    • Persistencia muy simple usando un usuario $_SESSION. Esto significa que un comentario guardado por un usuario no estará disponible para otro usuario.

    Esto también significa que no necesitamos perder tiempo configurando una base de datos y todo lo que conlleva y hace que post_comment.php sea muy simple y limpio. Si quisiera utilizar esta funcionalidad en un entorno de producción, necesitaría reescribir el contenido de Persistence.php . Aquí está el código para post_comment.php .

    ?phprequire('Persistence.php');$db = new Persistence();if( $db-add_comment($_POST) ) { header( 'Location: index.php' );}else { header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );}?

    El código anterior hace lo siguiente:

    1. Incluye la clase Persistence.php que se encarga de guardar y recuperar comentarios.
    2. Crea una nueva instancia del Persistenceobjeto y la asigna a la variable $db.
    3. Intenta agregar el comentario al archivo $db. Si el comentario se agrega correctamente, se redirige a la publicación del blog. Si falla, también se produce la redirección, pero se agrega algún texto de error a un parámetro de consulta de error .

    Mostrar los comentarios con la publicación del blog

    Lo último que debemos hacer para tener nuestro sistema genérico de comentarios de blogs en funcionamiento es actualizar la página del blog, index.php , para recuperar y mostrar los comentarios del Persistenceobjeto.

     

    • Dado que este no es un sistema de blogs real, codificaremos el $comment_post_IDvalor para que sea 1.
    • Incluya la clase Persistence.php y obtenga los comentarios de ella. Los comentarios se asocian con una publicación de blog mediante un archivo $comment_post_ID.
    ?phprequire('Persistence.php');$comment_post_ID = 1;$db = new Persistence();$comments = $db-get_comments($comment_post_ID);$has_comments = (count($comments) 0);?

    Como ahora tenemos $comment_post_IDacceso a través de PHP, debemos actualizar el HTML del formulario de comentarios para usar este valor. Blog sobre Supervivencia

    input type="hidden" name="comment_post_ID" value="?php echo($comment_post_ID); ?" /

    Ahora tenemos todos los comentarios relacionados con la publicación del blog a la que hace referencia la $commentsvariable que necesitamos para mostrarlos en la página. Para hacer esto, necesitamos actualizar PHP en index.php para iterarlos y crear el HTML requerido.

    ol liBe the first to add a comment./li ?php foreach ($comments as $comment) { ? liarticle footer abbr ?php echo( date('d F Y', strtotime($comment['date']) ) ); ? /abbr address By a href="#"?php echo($comment['comment_author']); ?/a /address /footer div p?php echo($comment['comment']); ?/p /div /article/li ?php } ?/ol

    Notarás que si el valor de $has_commentses verdadero, se aplica una clase CSS adicional a la lista ordenada llamada has-comments . Esto es para que podamos ocultar el elemento de la lista con el mensaje "Sé el primero en agregar un comentario" cuando los comentarios se muestran usando CSS:

    #posts-list.has-comments li.no-comments { display: none;}

    Ahora que todo esto está implementado, tenemos un sistema funcional de comentarios de blog. Si desea comenzar a escribir su código desde este sistema de comentarios de blog de funcionamiento básico, también puede descargar el código completado hasta aquí .

    Mejora progresiva con jQuery

    El primer paso para hacer que nuestro sistema de comentarios de blog se parezca menos a una página web y más a una aplicación es detener la recarga de la página cuando un usuario envía un comentario. Podemos hacer esto enviando los comentarios al servidor mediante una solicitud AJAX. Dado que jQuery es probablemente el estándar de facto para la funcionalidad JavaScript entre navegadores, lo usaremos aquí. Aunque estoy usando jQuery aquí, también me gustaría resaltar que es una buena idea no usar siempre jQuery . En su lugar, analice su escenario y tome una decisión considerada porque hay algunos casos en los que es mejor no hacerlo.

     

    En un intento de intentar conservar la mayor cantidad de secuencias de comandos (PHP y JavaScript) del archivo index.php , crearemos una nueva carpeta para nuestro JavaScript y allí un archivo para nuestra aplicación JavaScript. La ruta a este relleno debe ser js/app.js . Este archivo debe incluirse después de la inclusión de jQuery.

    script src="https://code.jquery.com/jquery-1.7.1.min.js"/scriptscript src="js/app.js"/script

    Capture el envío del formulario de comentarios

    Cuando la página esté lista, vincúlese al submitevento del formulario.

    $(function() { $('#commentform').submit(handleSubmit);});

    Cuando se envía el formulario y handleSubmitse llama a la función, los datos del comentario que queremos enviar al servidor se extraen del formulario. Hay formas más elegantes de obtener los datos del formulario, pero este enfoque muestra claramente de dónde obtenemos los valores y el dataobjeto que estamos creando.

    function handleSubmit() { var form = $(this); var data = { "comment_author": form.find('#comment_author').val(), "email": form.find('#email').val(), "comment": form.find('#comment').val(), "comment_post_ID": form.find('#comment_post_ID').val() }; postComment(data); return false;}function postComment(data) { // send the data to the server}

    PUBLICAR el comentario con AJAX

    Dentro de la postCommentfunción realiza una solicitud POST al servidor pasando los datos que hemos recuperado del formulario. Cuando se realiza la solicitud, se enviará un encabezado HTTP adicional para identificar la solicitud como una solicitud AJAX. Queremos hacer esto para poder devolver una respuesta JSON si es una solicitud AJAX y mantener nuestra funcionalidad básica si no lo es (para obtener más información sobre esto, consulte Eventos AJAX detectados en el servidor ). También definimos dos controladores; postSuccesspara manejar el comentario almacenado exitosamente y postErrorpara manejar cualquier falla.

    function postComment(data) { $.ajax({ type: 'POST', url: 'post_comment.php', data: data, headers: { 'X-Requested-With': 'XMLHttpRequest' }, success: postSuccess, error: postError });}function postSuccess(data, textStatus, jqXHR) { // add comment to UI}function postError(jqXHR, textStatus, errorThrown) { // display error}

    Actualización dinámica de la interfaz de usuario con el comentario

    En este punto, los datos del comentario se envían al servidor y se guardan, pero la respuesta AJAX no proporciona ninguna respuesta significativa. Además, la sección de comentarios no se actualiza para mostrar el comentario recién enviado, por lo que el usuario tendría que actualizar la página para verlo. Comencemos escribiendo el código para actualizar la interfaz de usuario y probar esa funcionalidad.

     

    Si estás pensando “¡Espera un minuto! No tenemos todos los datos que necesitamos del servidor web para mostrar el comentario”, entonces está en lo cierto. Sin embargo, esto no nos impide escribir el código para actualizar la interfaz de usuario y también probar que funciona. Así es cómo:

    function postSuccess(data, textStatus, jqXHR) { $('#commentform').get(0).reset(); displayComment(data);}function displayComment(data) { var commentHtml = createComment(data); var commentEl = $(commentHtml); commentEl.hide(); var postsList = $('#posts-list'); postsList.addClass('has-comments'); postsList.prepend(commentEl); commentEl.slideDown();}function createComment(data) { var html = ’ + 'liarticle' + 'footer' + 'abbr' + parseDisplayDate(data.date) + '/abbr' + 'address' + 'By a href="#"' + data.comment_author + '/a' + '/address' + '/footer' + 'div' + 'p' + data.comment + '/p' + '/div' + '/article/li'; return html;}function parseDisplayDate(date) { date = (date instanceof Date? date : new Date( Date.parse(date) ) ); var display = date.getDate() + ' ' + ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][date.getMonth()] + ' ' + date.getFullYear(); return display;}

    El código anterior hace lo siguiente:

    • Dentro de la postSuccessfunción borramos los valores del formulario y llamamos displayComment.
    • displayCommentPrimero llama a la createCommentfunción para crear el elemento de lista ( li) HTML como archivo String.
    • Luego convertimos el HTML a un objeto jQuery usando $(commentHtml)y ocultamos el elemento.
    • Luego, el elemento de la lista de comentarios se antepone a la lista ordenada de comentarios ( ol). A la lista también se le ha agregado una clase llamada has-comments para que podamos ocultar el primer elemento de la lista que contiene la declaración "Sé el primero en comentar".
    • Finalmente, hacemos un llamado commentEl.slideDown()para que el comentario se muestre en lo que se está convirtiendo en la forma estándar de "aquí hay un elemento nuevo".

    La funcionalidad ya está implementada pero queremos probarla. Esto puede lograrse de dos formas:

    • Es displayCommentuna función global, por lo que podemos llamarla directamente usando la consola JavaScript del navegador.
    • Podemos vincularnos a un evento en la página que desencadena una actualización falsa que llama a la displayCommentfunción.

    Vayamos con lo último y vinculemos la tecla "u" que se libera al vincularnos al keyupevento. Cuando sea así, crearemos un dataobjeto falso que contiene toda la información necesaria para crear un nuevo comentario y lo pasaremos a la displayCommentfunción. Ese comentario se mostrará en la interfaz de usuario.

    Presione la tecla "u" varias veces y vea aparecer los comentarios.

    $(function() { $(document).keyup(function(e) { e = e || window.event; if(e.keyCode === 85){ displayComment({ "id": "comment_1", "comment_post_ID": 1, "date":"Tue, 21 Feb 2012 18:33:03 +0000", "comment": "The realtime Web rocks!", "comment_author": "Phil Leggetter" }); } });});

    ¡Excelente! Ahora sabemos que nuestra displayCommentfunción funciona exactamente como esperamos. Recuerde eliminar la función de prueba antes de publicarla o realmente confundirá a su usuario cada vez que presione "u" .

     

    Detectar y responder a la solicitud AJAX

    Todo lo que queda por hacer es actualizar el archivo post_comment.php para detectar la llamada AJAX y devolver información sobre el comentario recién creado.

    La detección de la solicitud AJAX se realiza comprobando el X-Requested-Withencabezado:

    $ajax = ($_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');

    Una vez que sabemos que la solicitud es una solicitud AJAX, podemos actualizar el código para responder con un código de estado apropiado y los datos que representan el comentario. También debemos asegurarnos de que se mantenga la funcionalidad original. El código post_comment.php ahora tiene el siguiente aspecto:

    ?phprequire('Persistence.php');$ajax = ($_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');$db = new Persistence();$added = $db-add_comment($_POST);if($ajax) { sendAjaxResponse($added);}else { sendStandardResponse($added);}function sendAjaxResponse($added) { header("Content-Type: application/x-javascript"); if($added) { header( 'Status: 201' ); echo( json_encode($added) ); } else { header( 'Status: 400' ); }}function sendStandardResponse($added) { if($added) { header( 'Location: index.php' ); } else { header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' ); }}?

    Los puntos clave del código anterior son:

    • La $db-add_comment($_POST)llamada devuelve los datos del comentario agregado que se asigna a la $addedvariable.
    • Al establecer la respuesta Content-Type en "application/json", le decimos a jQuery que convierta la cadena devuelta en un objeto JavaScript. Para obtener más información sobre cómo llamar a servicios web JSON, consulte Guía para principiantes sobre clientes API JSON basados ​​en jQuery .
    • El código de estado 201 indica una llamada exitosa y también que la llamada creó un recurso (el comentario).

    El sistema de comentarios del blog ahora funciona de una manera mucho más dinámica, mostrando instantáneamente al usuario que su comentario ha sido publicado sin necesidad de actualizar la página. Además, la forma en que hemos agregado la funcionalidad basada en JavaScript a la página significa que si JavaScript está deshabilitado o un archivo JavaScript no se carga, el sistema recurrirá a la funcionalidad estándar que implementamos por primera vez.

    Obteniendo tiempo real, ¡por fin!

    Como ocurre con cualquier tutorial “desde cero”, puede llevar un poco de tiempo llegar a la parte realmente interesante, pero finalmente estamos aquí. Sin embargo, todo el trabajo que hemos realizado ha valido la pena . Debido a que hemos mejorado progresivamente nuestro sistema de comentarios, conectar Pusher a él será realmente fácil.

     

    ¿Qué es el empujador?

    Al comienzo del tutorial dijimos que usaríamos Pusher para agregar la funcionalidad en tiempo real a la aplicación. ¿Pero qué es Pusher?

    Pusher es un servicio alojado para agregar rápida y fácilmente funciones en tiempo real a aplicaciones web y móviles. Ofrece una API RESTful que hace que sea realmente fácil publicar eventos desde cualquier aplicación que pueda realizar una solicitud HTTP y una API WebSocket para comunicación bidireccional en tiempo real. Ni siquiera necesita usar las API directamente, ya que hay servidor (PHP, Ruby, node.js, ASP.NET, Python y más) y cliente (JavaScript, iOS, Android, .NET, ActionScript, Arduino y más). bibliotecas disponibles en una gran cantidad de tecnologías, lo que significa que puede agregar funcionalidad en tiempo real a una aplicación en cuestión de minutos. ¡Estoy seguro de que se sorprenderá de lo fácil que es!

    Regístrese en Pusher y obtenga sus credenciales API

    Para agregar la funcionalidad en tiempo real impulsada por Pusher a una aplicación web, primero debe registrarse para obtener una cuenta Sandbox gratuita . Después de registrarse, accederá al panel de Pusher, donde verá que se ha creado una aplicación "principal" para usted. También verá que está en la sección "Acceso a API" para esa aplicación, donde puede obtener sus credenciales de API.

    Para facilitar el acceso, cree un archivo pusher_config.phpdefine y las credenciales allí para que podamos consultarlos más adelante:

    ?phpdefine('APP_ID', 'YOUR_APP_ID');define('APP_KEY', 'YOUR_APP_KEY');define('APP_SECRET', 'YOUR_APP_SECRET');?

    En su versión de pusher config.php asegúrese de reemplazar los valores que son "SU" con sus credenciales reales.

    También deberías hacer requireesto en tu archivo index.php . También debemos ponerlo a APP_KEYdisposición del tiempo de ejecución de JavaScript, ya que lo necesitaremos para conectarnos a Pusher.

    ?phprequire('pusher_config.php);?scriptvar APP_KEY = '?php echo(APP_KEY); ?';/script

    JavaScript en tiempo real

    Lo primero que debe hacer al agregar Pusher a una aplicación web es incluir la biblioteca JavaScript de Pusher y conectarse a Pusher. Para conectarse, deberá usar la clave que obtuvo del panel de Pusher. A continuación puede ver todo lo que se necesita para conectar la aplicación front-end a Pusher.

    Incluya la biblioteca Pusher JavaScript después de que app.js incluya:

    script src="https://code.jquery.com/jquery-1.7.1.min.js"/scriptscript src="https://js.pusher.com/1.11/pusher.min.js"/scriptscript src="js/app.js"/script

    Agregue la funcionalidad Pusher a app.js :

    var pusher = new Pusher(APP_KEY);var channel = pusher.subscribe('comments-' + $('#comment_post_ID').val());channel.bind('new_comment', displayComment);

    Probablemente esto parezca demasiado fácil para ser verdad, así que aquí están los detalles sobre lo que hace el código anterior:

    • var pusher = new Pusher(APP_KEY);Crea una nueva instancia de un Pusherobjeto y al hacerlo te conecta a Pusher. La aplicación a utilizar se define por el APP_KEYvalor que usted pasa y que configuramos anteriormente.
    • var channel = pusher.subscribe('comments-' + $('#comment_post_ID').val()); Los canales proporcionan una excelente manera de organizar flujos de datos en tiempo real. Aquí nos suscribimos a los comentarios de la publicación actual del blog, identificados de forma única por el valor del comment_post_IDelemento de entrada del formulario oculto.
    • channel.bind('new_comment', displayComment); Los eventos se utilizan para filtrar aún más los datos y son ideales para vincular actualizaciones con cambios en la interfaz de usuario. En este caso queremos vincularnos a un evento que se activa cada vez que se agrega un nuevo comentario y mostrarlo. Como ya hemos creado la displayCommentfunción, podemos simplemente pasar una referencia a la llamada a bind.

    Envío de eventos en tiempo real utilizando el Creador de eventos

    También podemos probar esta funcionalidad sin escribir ningún código del lado del servidor utilizando Event Creator para su aplicación, que también se puede encontrar en el panel de Pusher. Event Creator le permite publicar eventos en un canal a través de una sencilla interfaz de usuario. En el código anterior podemos ver que queremos publicar un evento llamado "nuevo_comentario" en el canal "comentarios-1" . De la función de prueba anterior también tenemos un ejemplo de los datos de prueba que podemos publicar.

    PHP en tiempo real

    Nuevamente, hemos demostrado que nuestra funcionalidad del lado del cliente funciona sin tener que escribir ningún código del lado del servidor. Ahora agreguemos el código PHP que necesitamos para activar el nuevo evento de comentario tan pronto como se publique un comentario en nuestro sistema de comentarios.

    Pusher ofrece una serie de bibliotecas del lado del servidor que facilitan la publicación de eventos, además de ayudar con funciones como la auten






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo construir un sistema de comentarios en tiempo real

    Cómo construir un sistema de comentarios en tiempo real

    Lecturas adicionales sobre SmashingMag:¿Por qué deberíamos preocuparnos por la Web en tiempo real?Creación de un sistema genérico de comentarios de blogsM

    programar

    es

    https://pseint.es/static/images/programar-como-construir-un-sistema-de-comentarios-en-tiempo-real-796-0.jpg

    2024-05-20

     

    Cómo construir un sistema de comentarios en tiempo real
    Cómo construir un sistema de comentarios en tiempo real

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences