homefinance blog
La interacción en vivo con los usuarios en su sitio es una excelente manera de agregar nuevas características que son cautivadoras para sus visitantes. Sin embargo, para estar realmente en vivo, el servidor debe coincidir con el navegador o el cliente. Afortunadamente, hay una nueva forma de hacer esto usando WebSockes, un protocolo que permite esa conexión directa. Puede usar estas interacciones instantáneas con fines administrativos, como para mostrar cuántos visitantes ve su sitio actualmente y en qué página son. Tradicionalmente, un cliente se comunica con el servidor al obtener o impulsarlo, pero ¿qué sucede si el servidor podría presionar sin un cliente? Un ejemplo a este respecto es el chat en vivo. Escriba y usuarios en el otro extremo vea lo que escribe automáticamente, sin tener que actualizar la página. Escribí un artículo en mi blog sobre cómo crear un chat en vivo usando Firebase y API REST WordPress.
Al usar WebSockes, los datos deben ser relevantes para el cliente actualmente en su sitio. En lugar de crear otro complemento de chat de texto, crearemos un rastreador en vivo para su sitio web. Utilizará la tecnología WebSoCout para localizar automáticamente a los usuarios a medida que navegan a su sitio. Así es como debe verse el producto final:
A medida que los usuarios ingresan, salga y muévase a su sitio, esta tabla se actualizará automáticamente sin tener que actualizar la página o hacer llamadas AJAX. El uso de tecnologías existentes son algunas tecnologías que pueden hacer esto sin usar ningún código complejo. Echemos un vistazo a dos ejemplos:
Actualización de la página: las plantillas PHP normales también analizan HTML desde el servidor y devuélvalo al navegador. Si actualmente tuviéramos todos los datos de los usuarios en el sitio, puede ver la tabla, pero para obtener una actualización, debe actualizar la página. Similar a cómo no verá el cambio en el front-end de su sitio hasta que presione actualizar al editar contenido en WordPress. Podría usar JavaScript para forzar una actualización durante un tiempo determinado, pero eso se volvería molesto. AJAX: la otra forma de administrar esto es usar AJAX. Establezca un intervalo para tomar los datos en el servidor y actualizar la tabla. Pero, ¿y si nada ha cambiado? ¿Por qué debería molestarse con esa solicitud de AJAX? ¿Qué sucede si pudiera actualizar los datos solo cuando los datos han cambiado? Esto se hace fácilmente con Firebase y Angularjs. A medida que los datos cambian en Firebase, la tabla de información del usuario se actualizará automáticamente. PAS 1: Configurar Firebase Freebase La cuenta es una base de datos en línea: es prácticamente un objeto JSON al que puede acceder y actualizar fácilmente. Tiene varios usos, pero lo uso para CodeCavalry, por lo que los usuarios pueden interactuar instantáneamente entre sí. Firebase es fácil de usar: solo tiene que crear una cuenta gratuita y luego crear una aplicación. Crearé una aplicación llamada RoyLivecontent.
Deberá copiar la URL de la aplicación para usarla más tarde, la mía es: http://roylivecontent.firebaseio.com. Una vez que la aplicación está configurada, debería poder abrirla y ver los datos. Su pantalla debería verse así: ahora su aplicación Firebase está lista para la operación.
Paso 2: Cree el complemento básico independientemente de si usa una Boilerplate para construir o comenzar desde cero Cuando cree un complemento, necesitará algunas cosas:
Un directorio de plantilla en el que almacenará archivos HTML
Pon los guiones en la cola
Escrituras públicas – “wp_enqueue_script”.
Biblioteca Firebase JS
Disponible a través de CDN – //cdn.firebase.com/js/client/2.0.4/firebase.js
JS Plugin Public File (activos/public/js/wp_livtracker.js)
Scripts de administración – “Admin_enqueue_scripts”.
angular
Firebat
Incendio angular
Archivo de administración del complemento JS (activos/admin/js/wp_livtracker.js)
Paso 3 Página de menú Administrador Prefiero hacer primero el administrador: al menos para configurar la página del menú y puedo guardar los datos que necesitará más adelante. La página del menú o la página Submenu tendrán un formulario en el que podamos almacenar y editar la URL Firebase para su aplicación, así como la tabla de usuarios en vivo.
Saltemos sobre la mesa y solo hagamos el formulario. Primero deberá crear una página de submenú (o una página de menú si prefiere un elemento de menú de nivel superior). Elegí crear mi página de submenú en el menú principal “Dashboard” usando add_submen_page () y usando “index.php” para el padre. Titulé mi página “Usuarios de seguimiento en vivo”. En la función de llamada inversa tengo una forma muy simple [php] echo ‘; echo ‘
| ‘; Echou ”; Echou ”; Echou ”; echo ”; Echou ”; [/php]
Observe cómo la acción en el formulario indica directamente a la misma página de administración utilizando la función Admin_url. Esto obliga al usuario a regresar a esta página cuando aparece. También me aseguro de establecer el método en “publicar”. La segunda parte de la gestión de datos en el formulario es guardar y actualizar. He visto algunas formas diferentes de hacer esto, incluida la introducción de la funcionalidad en el mismo viceversa. Prefiero usar la acción admin_init y crear una llamada inversa que verifique los datos de la publicación. Paso 4: Objeto de datos ubicado-Admin: la última pieza del rompecabezas para el administrador es crear un objeto de datos localizado. El objeto localizado ayudará a ingresar los datos en nuestro archivo JavaScript. En el script de administración, cree un objeto de datos localizado utilizando wp_localise_cript y transmitir una matriz. Por defecto, la matriz debe contener “addin_templates”, que será la URL del arado (que definimos con una constante para ayudar a ingresar la cola del script) y la URL de la aplicación Firebase que acaba de crear una forma de rescate. Puede probar actualizado al administrador y ver si tiene un nuevo objeto globalizado a través de su consola. Paso 5: Objeto de datos localizado: bueno público, ahora trabajaremos en el público o en la parte del cliente de las cosas. Comenzaremos con otro objeto localizado, pero esta vez en la devolución de llamada pública wp_enqueue_scripts, para que podamos acceder a este objeto global al visualizar el sitio. Dentro de la función de la función de cola de script público, cree un objeto localizado que tenga los siguientes datos: URL Firebase (opción de sitio)  ID de usuario, nombre de usuario Nombre de la publicación El usuario condicional Si el usuario está autenticado, puede usar wp_get_current_user para devolver al usuario actual. Si lo soy, paso el ID y el nombre de usuario (user_login) a mi objeto localizado. Alternativamente, puedo configurar al usuario en el falso para que pueda evaluar rápidamente a través de boolean si un usuario será útil o no más adelante. La adición de la ubicación geográfica, además de los datos del usuario y la ubicación actual, puede ser importante tener la ubicación geográfica del visitante. Hay muchas API gratuitas y públicas que puede usar para obtener este tipo de datos basados en la dirección IP del usuario. Elegí usar http://www.telize.com/geoip, para cruzar la IP y debería devolver un objeto JSON con la ubicación geográfica. Para introducir esto en nuestro objeto localizado, hacemos un wp_safe_remote_get. Debido a que la API devuelve JSON, tendremos que empacar el cuerpo de la respuesta en una función PHP llamada JSON_Decode, que convertirá su objeto JSON en una matriz PHP. Paso 6 JavaScript Public Part – Envíe datos a Firebase Los pasos 4 y 5 se pueden cambiar, a veces me gusta construir la interfaz de administración primero y usar los datos (que voy al objeto localizado), y a veces me gusta pasar primero a través de todos Cosas públicas, luego para hacer todas las operaciones de administración de código relacionadas. Continuaré con este método por ahora. La primera parte del uso de Firebase es enviar datos al objeto JSON almacenado en Firebase. AngularJS no es necesario enviar datos a Firebase, sino solo su propia biblioteca JavaScript. Lo primero que hacemos en JavaScript es verificar si la variable para la URL Firebase existe, si no, volvemos porque no tiene sentido continuar. Si hay una URL establecida de URL, continuamos configurando y enviando esos datos. Establecer la configuración implícita del usuario para reservar aquí nuestro objeto localizado nos ayudará. En primer lugar, debemos crear algunos valores predeterminados para enviarlos a Firebase. Enviamos user_id a un número aleatorio entre 1,000 y 1,500, y User_Username a 0. Configuración de datos del usuario Una vez que están configurados, comenzamos a ingresar datos reales. Primero verifique si hay un usuario basado en nuestro objeto localizado, si user_id y user_username se establecen en los datos apropiados. En segundo lugar, estableceremos la ubicación geográfica si existe, o la estableceremos en falso si no existe. Finalmente, estableceremos la ubicación actual y el ID de publicación. Los datos se envían a Firebase ahora viene Firebase, que, afortunadamente, tiene algunas funcionalidades maravillosas para manejar todo esto. En primer lugar, lidiemos con la configuración del objeto cuando un usuario está en línea. [Js] var usererRef = new Firebase (livetracker_data.firebase_url + ‘/presencia/’ + user_id); userRef.set ({en línea: true, usuario: boolean (livetacker_data.user), user_id: parsint (user_id), user_username: user_username, ver: current_loc, navegador: $. .browser, ubicación_geo: ubicación_utilizer,}); [/Js] En el código anterior establecemos los datos del usuario, prácticamente el objeto para ese usuario una vez que está en línea. Establecemos en línea en True, podría omitirlo porque es seguro asumir que si los datos están allí, un usuario está en línea, pero esta es siempre una buena verificación. Si no desea eliminar los datos cuando el usuario está desconectado de su sitio, también puede cambiar esto de verdadero a falso, de modo que vea la última página y la ubicación en la que estaba un usuario en particular. Otra cosa que vale la pena enfatizar es que usamos la URL Firebase con /presencia /, de modo que la matriz de usuarios en línea se almacena en una ubicación separada de otros datos que desea. Cuando comencé a usar Firebase, creé una aplicación separada para cada matriz de objeto, pero me di cuenta de que puedes tenerlos todos en una aplicación y cada matriz sería una URL única. ¿Qué sucede si el usuario se desconecta cerrando su sitio o navegando? El código para administrar la desconexión de un usuario también es bastante fácil [js] var amonline = new Firebase (livetracker_data.firebase_url + ‘/.info/connected’); amonline.on (‘valor’, function (snapshot) {if (snapshot.val ()) {userRef.ondisconnect (). remove ();}); [/js] El código elimina al usuario de sus datos como mencioné anteriormente, solo puede cambiar el objeto para que tenga algunos datos sobre su última ubicación en su sitio. Otro ejemplo a este respecto podría almacenar una marca de tiempo para el ” Última conexión “o si cambia los datos del usuario en Firebase en otras acciones, podría verlos” último tiempo activo “. Le recomiendo que haga esto solo para usuarios autenticados, porque una persona anónima (o visitante preconectado) puede obtener dos ID únicas de nuestro generador user_id predeterminado. Firebase ahora recibirá datos cada vez que un usuario se conecta. Para probarlo, inicie sesión en su cuenta de Firebase y vea la aplicación que creó. Visite cualquier página en su sitio y, tan pronto como finalice la carga, debe ver nuevos datos en un objeto de “presencia” en el nivel de raíz que contiene sus datos de usuario. Paso 7 Directiva AngularJS Las directivas Angularjs son una de sus características más fuertes. En términos de WordPress, son similares a un widget. Son una funcionalidad que puede contener su propio alcance, su propio controlador y su propia plantilla. Las directivas se pueden usar una y otra vez en una aplicación más grande para modularizar ciertos aspectos funcionales. A medida que la API REST WordPress alcanza las manos de varios desarrolladores, estas directivas serán útiles para crear elementos de funcionalidad que usen la API como widgets independientes que se pueden colocar en cualquier lugar. Abra el archivo de activos/js/admin/wp_live_tracker.js y comencemos creando un módulo angular, titulamos mi wp_livtracker, angularfire también nos da acceso a una “firebase” angularjs angularjs, por lo que tendrá que inyectarlo en nuestro Aplicación, para que podamos usarlo. Inmediatamente después de definir la aplicación o módulo, crearemos una directiva llamada Livetracker. La forma en que operan las directivas AngularJS es bastante ingeniosa, podemos asignar la directiva de una clase, un atributo HTML, un elemento o todo lo anterior. En nuestro caso, restringiremos: “E”, que significa elemento. Entonces, cada vez que use su código, debe obtener el resultado de esta nueva directiva. [js] angular.module (‘wp_livetracker’, [‘firebase’). directive (‘livetract’, function () {return {restricts: “e”, alcance: {}, controlador: function ($ scope, $ fireBaseObject) {var ref = new Firebase (LiveTacker_data.fireBase_url + ‘/presencia’); $ scope.users_online = $ firebaseObject (ref);  }, TemplateUrl: livetractr_data.admin_template + “/templates/livetracker.html”}; }); [/Js] La Directiva tiene su propio controlador, en el que inyectamos $ alcance y $ FirebaseObject, que se define por Angularfire. Creamos un nuevo objeto Firebase introduciendo nuestra URL. Recuerde incluir /presencia, porque se establecen nuestros datos de usuario en línea. Establezca $ Scope.Online_Users a $ FirebaseObject (ref) y exactamente hay una conexión instantánea entre Firebase y su aplicación AngularJS. Esta es de hecho la parte mágica, porque a medida que los datos de Firebase cambian a medida que los usuarios se conectan, se mueven y desconectan, $ Scope.Online_Users cambiará para reflejar esos cambios. El último bit de la directiva es establecer la plantilla, un archivo HTML. Almacené la mía en una plantilla de plantilla en el complemento. Utilizamos la propiedad del objeto localizado administrado para hacerse cargo de la URL. Paso 8 Plantilla AngularJS porque ingresa al área de administración del sitio, queremos asegurarnos de que se ajuste bien. Usaré una comida para facilitar la vida. [Php]
|
Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.
