Curso AJAX

a continuación voy a presentar una tecnología que se llama ajax y que básicamente es el acrónimo de los siguientes la tecnología ajax realmente es a synchronous javascript andrew xml la idea en este caso es trabajar con una tecnología que en un momento dado nos permita realizar peticiones a un servidor de forma asíncrona lo vamos a hacer trabajando con javascript para pasar datos para pasar los datos podemos hacerlo con xml aunque también se pueden utilizar muchísimos otros estándares por tanto veremos que de esta tecnología ajax lo más importante es que como vamos a demostrar es asíncrona y luego por otra parte veremos que usa mayormente javascript así que a continuación lo que voy a hacer es lo siguiente 1 el javascript puro es difícil desde el punto de vista de que no hay un solo estándar de javascript o mejor dicho técnicamente sí que hay un estándar de javascript pero finalmente lo que ocurre es que microsoft lleva su propio estándar con lo cual digamos que cuando trabajamos con ella expiró hay que trabajar con dos a la vez entonces para esto para evitar esto lo que recomiendo es abstraer con una capa por encima que consiste en usar una librería como en este caso jquery así que lo que voy a hacer en este caso es que voy a crear por aquí una carpeta vamos a vamos a orar por aquí vamos a crear por aquí en http voy a crear una carpeta llamada ajax y dentro de la carpeta ajax lo que voy a hacer es crear dos subcarpetas una carpeta llamada cliente y otra carpeta llamada servidor el cliente es lo que se va a cargar contra el cliente y el servidor es lo que va a recibir las peticiones que vamos a hacer de forma asíncrona la única funcionalidad que podemos obtener de ajax no es hacer peticiones a un servidor podemos hacer más cosas pero sí que es la más común así que a continuación voy a crear un nuevo archivo lo voy a guardar dentro de 72 dentro de ajax dentro de cliente y vamos a verlo y voy a decir que index.hr m bien en este caso lo que puedo hacer en un momento dado es pedirle algo al servidor y que el servidor me devuelva el dato por ejemplo si este archivo fueron archivo index php pues me podría conectar al servidor y le podría decir dame algo y el servidor me lo daría pero qué ocurre una vez que la página se ha cargado pues que una vez que la página descargado teóricamente ya no puedo pedirle nada al servidor hasta la próxima carga y hay ocasiones en las cuales volver a cargar la página cada equis tiempo pues ese incómodo así que a continuación voy a hacer lo siguiente a continuación voy a escribir un body bien y voy a hacer lo siguiente como digo voy a crear un libro llamado contenedor y un script dentro del cual en primer lugar vamos a cargar la librería jquery así que src eso para lo que sea me voy a sacar un navegador me voy a jquery puntocom me descargo la última versión que haya estable de jquery y vamos a descargar por ejemplo la 30 así que hacemos así me la guardo en este caso con comando s o controles e me voy a ht docs me voy a ajax me voy a cliente y lo voy a dejar en esa carpeta ya continuación lo que voy a hacer es cargarlo dentro del sol así que de esta forma estamos cargando ya abrí abril vamp estamos cargando ya la librería tal cual y vamos a comprobar si es cierto y para comprobar si es cierto yo siempre recomiendo realizar la siguiente acción vamos a poner estas pantallas por aquí yo siempre recomiendo realizar la siguiente acción que consiste en poner localhost barra ajax barra cliente y aquí voy a poner dólar documento es decir selecciona el documento y sobre el documento pongo una función un método ready que quiere decir cuando el documento esté preparado cuando el documento haya acabado de cargar así que pongo función y digo cuando el documento esté acabado de cargar llamo a una función anónima de javascript y entonces hago lo siguiente le digo que con soles puntos o por ejemplo puedo poner con tenedor punto texto si estás viendo esto es que jquery ha cargado correctamente entonces guardo recargo y si estás viendo esto es que jquery ha cargado correctamente aparte de que siempre recomiendo pulsar el botón derecho inspeccionar y sacar la consola vamos a poner la consola a derecha ahora cuando salga vamos a poner la consola perdón abajo quería decir para asegurarnos que en la consola pues no hay ningún error y esto quiere decir que jquery ha cargado correctamente y por tanto ya podemos empezar a proceder bien ahora a continuación lo que voy a hacer es que voy a crear un nuevo script y voy a decirle al sistema que no lo voy a guardar como dentro de hd box dentro de ajax dentro del servidor en este caso y lo voy a guardar como index php realmente podría tener cualquier nombre así que vengo por aquí vengo por aquí y por ejemplo por aquí voy a decir eco veit faith y punto guión punto voy a copiar y esto lo que va a hacer es decirme la hora el mes el día ahora ahora si el minuto y el segundo es decir si yo vengo por aquí y cargo servidor vemos cómo aparece una cadena que me dice el año el mes el día la hora el minuto y el segundo la cuestión con todo esto está en que vemos que esto se ha cargado una vez pero señora quiero volver a obtener la hora actualizada pues tendría que volver a recargar y entonces al recargar veo como al recargar la página entera veo cómo va apareciendo la hora del minuto el segundo y todo actualizado la idea es la siguiente ahora me voy a index html voy a crear un botón y voy a poner dime la hora el botón va a tener el id dime la hora con esto por tanto lo que voy a hacer a continuación es decir lo siguiente voy a decir que cuando el documento esté preparado y cuándo a ver cuando sobre dime la hora haga clic pongo otra función anónima adentro lo que va a ocurrir en ese caso es que dentro del contenedor dentro de él con tenedor voy a poner un texto qué va a decir hola así que me voy a al cliente le digo le doy a dime la hora y entonces me dice hola es decir el texto que estamos viendo en la pantalla vemos como solo aparece en el caso de que yo haya pulsado el botón bien pues a continuación voy a ver una de las formas más sencillas de trabajar con ajax que consiste en utilizar el método load hay varios métodos ajax dentro de la librería jquery el más sencillo de ellos es trabajar con el método logro así que a continuación voy a decir que voy a cargar bajo una carpeta me voy a servidor y cargo el archivo index php entonces con esto si ahora recargo lo que ocurre es que en lugar de estar lanzando un mensaje estático por pantalla lo que estoy haciendo es cargar dinámicamente un archivo php que en este caso está en el mismo servidor y esto quiere decir por tanto que si ahora le doy a dime la hora aparece la hora correcta pero si ahora a continuación le vuelvo a dar dime la hora dime la hora dime la hora dime la hora vemos como lo que aparece lo que ocurre es que sin necesidad de recargar la página cada vez que yo pulso este botón de forma asíncrona esta es la cuestión es decir de forma asíncrona quiere decir sin tener que recargar toda la página recargando solo un trocito de la página utilizando javascript de ahí lo de la ave asíncrona la j de javascript estoy realizando una petición al servidor y estoy devolviendo en un trocito de la pantalla y como digo sin tener que recargar la pantalla estoy devolviendo el contenido de en formato php ahora a continuación voy a hacer una pequeña función de reloj una pequeña función de bucle entonces función bucle y voy a crear un temporizador temporizador como una variable global y le digo que el temporizador es igual a set time out y quiero ejecutar bucle en un segundo lo quiero ejecutar cada segundo porque con más frecuencia pues tampoco tiene ningún sentido aunque podría hacerlo vale pero tampoco tiene ningún sentido vamos a hablar de eso ahora a continuación entonces ahora a continuación como digo voy a hacer un poquito de espacio aquí bien lo que voy a hacer es decirle que quiero cargar en el contenedor el archivo ajax quiero clear time out temporizador y lo que quiere continuación es decirle que temporizador otra vez el set clay es decir quiero hacer una función que se llame a sí misma cada segundo esto técnicamente ya no hace falta esto lo puedo borrar así que a continuación como podemos ver lo que hemos tratarse un poco preparatorio para esto que estamos haciendo ahora a continuación si todo va bien lo que va a hacer es que la función ready va a lanzar el temporizador y el temporizador se va a lanzar a sí mismo digamos cada minuto así que guardo recargo y si todo va bien ahora vamos a ver que cada segundo el sistema lo que está haciendo es llamar al servidor y recuperar la información bueno una de las cosas que debemos tener en cuenta al ejecutar esto cada cada segundo es que o al ejecutar esto con cierta periodicidad es que al final hay un consumo de ancho de banda es decir hay al final hay un consumo de tráfico de red con esto qué es lo que quiero decir bueno yo para empezar cada segundo estoy haciendo una petición al servidor con lo cual hay que tener en cuenta que cada segundo el servidor va a tener que procesar mediante php una petición y esto evidentemente va a suponer una cierta carga en el ser por eso para empezar pero además eso ahora luego nos preocuparemos desde punto de vista del servidor que también nos va a preocupar pero desde el punto de vista del cliente lo más importante es que desde punto de vista del cliente esto va a generar un consumo de red un tráfico de red vamos a ir a network por ejemplo vamos a grabar bueno y en este caso estamos viendo que cada equis milisegundos vemos que estamos transfiriendo algo de información de cada 1000 milisegundos estamos transfiriendo un pequeño paquete de información entonces voy a recargar un momento y vemos 22 25 29 es decir estamos viendo que cada segundo estamos transfiriendo prácticamente 400 bytes entonces no hay ningún problema por esto vemos como pues ahora mismo otras 15 segundos de ejecución hemos transferido 8 kilobytes a perdón kilobytes novedades sí sí correcto correcto estamos haciendo 400 bytes vale entonces la cuestión es la siguiente si ahora vengo por aquí lo que voy a ver es que si por ejemplo yo ahora hago que el tiempo de ejecución del bucle sea 100 milisegundos en lugar de 1000 milisegundos vemos por una parte que en lugar de hacer una petición al servidor voy a hacer 10 peticiones por segundo al servidor y esto evidentemente lo primero que va a hacer es el servidor va a tener que aguantar diez veces más carga que en el ejercicio anterior y eso ya ya de entrada hay que tenerlo en cuenta vemos que un minuto un minuto tenemos aquí y son veintiséis castró momentos estamos bien pero además si yo ahora ejecuto esto a 100 milisegundos recargo por aquí y ahora vemos y ahora observamos como ahora se están realizando 10 peticiones cada segundo y vemos por tanto que lo que estamos consumiendo de ancho de banda pues evidentemente se multiplica por 10 la pregunta en este caso es la siguiente si yo estoy devolviendo en este caso una hora minuto segundo que tarda un segundo en actualizarse es decir no estoy pidiendo milisegundos podría hacerlo pero no estoy pidiendo milisegundos ahora mismo estoy perdiendo el tiempo dejamos que 35 segundos son 30 y un cast con lo cual al final van a ser dos otros 30 cas eso quiere decir que estoy duplicando el ancho de banda estoy en definitiva saturándolo todo estoy saturando la red y estoy también saturando innecesariamente el servidor y cuando digo innecesariamente lo que quiero decir es que de cada segundo le voy a enviar 10 peticiones al servidor de las cuales sé que la respuesta es exactamente la misma entonces para qué lo hago la idea es para que hacerlo si realmente no vale la pena vale para que hacerlo si realmente no tiene ningún sentido no tiene ninguna utilidad muy bien vamos a continuar hablando de esto y ahora lo que voy a hacer es pasarlo a 10 milisegundos así es que guardo recargo bien y ahora vemos como en tres segundos de consumidos ochenta y pico casas en cinco segundos ciento y pico cas sabemos como en definitiva como estamos viendo en diez segundos en dos y pico cas luego eso quiere decir que prácticamente pues en un minuto de haber consumido pues es una barbaridad de información y sobre todo tengamos en cuenta que pues eso en un momento dado como te diría yo esta página web puede quedarse abierta no un minuto puede estar horas abierta entonces imaginémonos el consumo de información que le estaríamos generando al cliente y la carga que estamos generando en el procesador de hecho no sé incluso si saco el monitor de actividad pues fijémonos que ahora mismo tengo el procesador prácticamente arriba del todo y pues bueno por aquí para para che ahora lo veremos por apache estará pues entiendo que machacando bastante el procesador vale entonces ahí la idea como digo es saber que cuando hacemos una petición a jacques podemos como en este caso vamos a recargar de nuevo ponemos como en este caso trucar podemos pinchar podemos lanzar tantas peticiones como por segundo como queramos pero que podamos no quiere decir que lo tengamos que hacer es decir que podamos no quiere decir que debamos hacerlo sino que también debemos tener en cuenta otros factores tales como por ejemplo pues como comentaba él y vamos a continuar dentro de los múltiples servicios con ajax que podemos programar como digo hay una infinidad de servicios que pueden utilizar ajax pero uno muy típico uno muy característico es un chat entonces lo que voy a hacer a continuación es programar algún chat mediante este chat a través de este chat pues vamos a demostrar cómo podemos utilizar no ya sólo de cliente a servidor sino de múltiples clientes a un mismo servidor como podemos pues trabajar con esta información bien pues voy a hacer lo siguiente voy a crear varios archivos nuevos el primero lo voy a colocar en cliente se me llamara chat html de hecho voy a crear tres a continuación voy a crear otro archivo también dentro de ajax cliente que se va a llamar chat punto j s y por último voy a crear otro archivo lo voy a colocar dentro de ajax dentro del servidor y lo voy a llamar chat punto php tenemos la página web principal voy a cerrar las dos de antes tenemos el archivo de javascript y tenemos la el archivo php el que procesará la información así que a continuación lo que voy a hacer es lo siguiente me voy a ir a crear un archivo html me voy a crear un head me voy a crear un body aquí dentro del jefe voy a importar la librería jquery crc es igual a jquery bien ahora aquí en el body lo que voy a hacer es lo siguiente div es igual a chad voy a poner el jv chat vale y ahora voy a hacer lo siguiente aquí dentro del script lo que voy a hacer es lo siguiente lo que voy a hacer es decirle que src es igual a chad puntos js no lo ha cogido por cierto que voy a voy a nombrarlo jv chat es jota whatsapp bien y ahora este archivo también le llamaré jv chato para luego eliminó los anteriores bien y jv chat y ahora lo que voy a hacer es decirle al sistema que es lo que va a tener el archivo jv chat archivo jv chat va a esperar a que el documento esté cargado y una vez que el documento esté cargado lo que haremos es llamar digamos seleccionó el elemento que tenga el id jv chat y dentro de jv chat voy a poner de momento hola todo va bien vamos a probarlo vamos a cliente vamos a cargar chat html y si todo va bien vamos a comprobar como dije hola todo va bien vale ahora a continuación dentro de ese archivo jv chat quiero introducir algo de información entonces voy a hacer lo siguiente voy a introducir un div y de mensajes bien y entonces voy a decir bieber bueno no input tait texto cuidado aquí texto un botón enviar vamos a verlo recargamos y cuidado porque esto no puede ser un texto sino que tiene que ser código html ahora sí vemos que tenemos ahí el código por cierto que nos vendría también bien probablemente crear un archivo css así que voy a crear un archivo css aquí en ht docs en ajax en cliente y lo voy a guardar como jv chat punto css bien y con esto ahora voy a utilizar un poquito para decirle que dentro de jv chat los mensajes pues van a ocupar bueno para empezar para empezar jv chat será una ventana que ocupará por ejemplo wish 200 píxeles para empezar height 400 píxeles vamos a verlo y ahora en el archivo html tengo que cargar el css así que link wray es igual a esta el sip y se red es igual a chat jv chat punto css bien recargamos vemos que ahora esto ya quiere empezar a funcionar vamos a verlo vamos a comprobar como el jv chat pues tiene esas proporciones que le estamos indicando de hecho ahora puedo poner esto a la derecha y ahí lo tenemos viene ahora a continuación sigo trabajando un poquito en el estilo y le digo lo siguiente le digo wifi es 100% pero height es el 80% por ejemplo y le voy a decir que border es un pixel solid grave por ejemplo de momento así que ahí tenemos la ventaja la ventana perdón donde van a aparecer los mensajes que vayamos introduciendo en el chat como vemos estamos intentando dejar el archivo inicial lo más limpio posible simplemente metemos un jv chat y javascript se encarga de meter ahí dentro pues el chat y ahora a continuación decimos que decimos que jv chat input vamos a decirle que va a tener un wifi de 100 un margin top de 5 píxeles o lo cual es demasiado nose 4 píxeles y ya está vamos a ver lo vemos ahí que la cajita se iguala a la parte de arriba vale o podemos decirle incluso pues que la cajita sea más pequeña ay que el botón esté al lado no lo sé pero bueno eso en un momento dado siempre lo podemos luego cambiar y ahora vamos a poner el jv chat button le digo will 100% martín con 4 píxeles y ahora vemos que tenemos esto en la pantalla vemos que tenemos por una parte los mensajes tenemos por otra parte un input y tenemos el botón de enviar y lo que va a hacer el botón de enviar es enviar el mensaje al servidor y el servidor se encargará de recoger los mensajes digamos y devolverlos en pantalla a todos con esto vemos como digo como tenemos una pequeña digamos inocente ventanita de chat muy bien pues vamos a por ello ahora a continuación lo que quiero es mediante ajax poder enviar esta información al servidor y poder en definitiva insertarla dentro del servidor ahí al final como estamos trabajando con ajax y en este caso vamos a sincronizar mucha información de diferentes usuarios pues tenemos que ver en qué piscina de información meter todos esos datos todos los mensajes así que una de las formas que podemos utilizar es una base de datos tenemos el problema de que podemos sobrecargar mucho la base de datos pero ahora para empezar pues vamos a trabajar con este con este western entonces vamos allá bueno pues a continuación me voy a poner lo que el host vale php miami voy a crear creo que tenía cuatro minutos por aquí no creo que tenían my php más actualizado vale pues ahora voy a crear una nueva base de datos voy a crear una base de datos jv chat en persa no en español bien y ahora y ahora lo que voy a hacer es especificar en este caso indicar en este caso cuál es la tabla que guarda los mensajes para guardar los mensajes vamos a vamos a crear una tabla llamada mensajes va a tener seis o siete columnas a lo veremos vale voy a crear un identificador que será un número entero longitud de momento 255 índice primario es auto incremental ahora y aquí viene y aquí viene la cuestión identificado ahora vale ahora debería tener el usuario que en principio tendría que tener una tabla verdad con los usuarios de momento va a ser una cadena va a ser un string ahora veremos luego que hacemos con ello vamos a poner el mensaje que va a ser un bar char no demasiado grande bien y voy a poner el utc el utc que es el momento el tiempo en el que este mensaje se ha enviado va a ser un entero va a tener una longitud de 20 caracteres ya lo tengo yo creo que ya así que vamos a darle a guardar y ahora a continuación lo que quiero bueno voy a tener que poner en en la tabla privilegios de acceso pero lo que quiero es escribir los mensajes dentro de esta tabla voy un momento a poner privilegios para esta tabla voy a añadir una vamos a verlo bueno tengo ruta y vamos a poner que creo un usuario jv chat el servidor local contraseña jv chat valen otorgar todo privilegios para la base de datos jv chat correcto y le voy a continuar y si todo ha ido bien en ese caso nos vamos a jv chat nos vamos a privilegios y veremos como j el widget tiene permiso para escribir qué es lo que voy a hacer ahora pues lo que voy a hacer ahora es decirle al sistema que cuando pulse el botón pues el mensaje que haya escrito deberá enviarlo al servidor o esto va a ser un poco difícil por la sencilla cuestión de que este elemento no existe de forma estática se ha creado de forma dinámica y por tanto eso para seleccionarlo pues va a tener su complicación vamos a ver cuál es y vamos a ver cómo resolverlo ya veremos que no es muy complejo el problema es el siguiente el problema es que si yo ahora vengo aquí y me voy al archivo js y le digo al archivo js que cuando sobre jv chat espacio button haga clic en ese caso lo que va a ocurrir es que pues por ejemplo por ejemplo con sole punto log voy a enviar un mensaje bien guardo recargo escribo un mensaje por ejemplo me voy a la consola y si le doy a enviar bueno en este caso me ha funcionado vale aunque no debería haber funcionado porque el elemento se ha creado dinámicamente pero bueno como ha funcionado pues en lugar de usar la función clic iba a usar la función on que es una función que atrapa eventos que se han creado dinámicamente pero bueno como ha funcionado pues voy a continuar entonces ya en lo que quiero por tanto es atrapar el mensaje quiero otra para el mensaje y para eso digo var mensaje es igual a aquello que está en jv chat but pues su valor y entonces ahora voy a decir con solé punto log voy a enviar al servidor el mensaje más mensaje vamos a comprobarlo digo hola cómo estás probablemente sólo se va a enviar hola vamos a verlo le digo tal efe hola cómo estás ahora veremos lo que se envía al servidor entonces ya tenemos que como diría yo el servidor está siendo capaz de perdón el navegador por lo menos está siendo capaz de cuando pulso este botón atrapar este mensaje atrapar ese contenido y ponerlo en una variable por cierto que cuando se hace eso también lo que se suele hacer a la vez es vaciar el input entonces en este caso lo que voy a hacer es decirle que vacío el input cuando ya he cargado la variable verdad entonces algo así envió cargo el mensaje y vacío el campo de chat para poner el siguiente campo vale evidentemente bien pues ahora a continuación para a continuación lo que voy a hacer es este mensaje ahora sé que ahora que sé que tengo este mensaje y lo voy a poner dentro de el servidor lo voy a enviar al servidor entonces esto quiere decir que voy a hacer lo siguiente voy a decir un crear por aquí un bueno voy a utilizar el método como diría yo el método real ajax de jquery no es el método loud es el método ajax vamos a este de aquí vamos a diferentes plantillas una sencillita dvd o tres schools vamos a el método ajax completo y sería este de aquí entonces a partir de aquí voy a esto preocupar esto y voy a decir lo siguiente ajax url esto lo sangro y voy a bajar los parámetros a diferentes líneas vale esto por aquí y vivos access éxito la url es dos puntos barra servidor chad punto jv chat php y entonces a continuación lo que puedo hacer es pasarle datos al pasarle datos lo que quiero hacer vamos a decir sachs es que es esto es access pues access function éxito es con sol la petición ha tenido éxito vamos a recargar algo así le doy a enviar y me dice la petición ha tenido éxito la petición ha tenido éxito porque el archivo que estoy pidiendo existe si yo pongo jv chat 2 por ejemplo y no existe ese archivo sea así le doy a enviar y me dice que no da éxito me dice que ha dado un error porque el archivo jv chat 2 no existe lo que quiero decir con esto es que no puedo poner cualquier cosa dentro de ese campo tengo que llamar a un archivo que realmente exista ahora además lo que voy a hacer es decirle al sistema que quiero pasar datos entonces vamos a ver por aquí aquí tengo los parámetros que le puedo pasar vale entonces tengo por aquí data entonces aquí donde pone data vamos a ver voy a poner data y voy a decir mensaje no quiero voy a decir tipo es igual a envío and vamos a ver un mensaje es igual a más mensaje y pongo una coma al final para separar entonces vengo por aquí y ahora a continuación lo que voy a hacer es ver qué es lo que puedo lanzar por cierto por cierto por cierto aquí el time in time yo tengo que decir si es exigente o post y esto es importante para que php lo sepa type post bien vamos a verlo ok muy bien pues ahora pues ahora me voy a jv chat y a continuación lo que voy a hacer es decir lo siguiente voy a decir eco pues la operación es de punto post no me acuerdo vamos a verlo es tipo tipo tipo tipo es tipo tco el mensaje enviado es punto post mensaje bien entonces ahora pero si yo recargo aquí yo realmente envío y no me dice nada vale pero de aquí echo el servidor dice para que tengamos claro que esto proviene del servidor entonces en la función de éxito yo puedo poner qué y bent voy a hacer y entonces aquí a continuación voy a decir el servidor responde y punto data que son los datos que devuelve el servidor vamos a ver lo pongo aquí un dato hola por ejemplo debería enviar y bueno dice el servidor responde and i find vale dice voy a enviar el servidor el mensaje hola vale esto estaba aquí este es este con sol eso lo tenemos controlado y dice el servidor responde andy file el cerebro responde and i find pero lo más importante es que tenemos ya aquí que haber cuidado el servidor responde moviendo aquí nada esto fuera punto gata vale aquí and if i’m muy bien entonces vamos a ver qué es lo que es lo que nos está faltando es decir porque el servidor no están devolviendo nada es éxito el punto da también a kosovo ya ponerlo todo voy a lanzarlo todo en la pantalla tiqui tiqui trip aquí muy bien y el servidor dice las operaciones de envío y el mensaje enviado es este de aquí y luego no hace falta poner el punto data sino que podemos poner directamente el contenido tengamos en cuenta que el servidor dice es decir esta es la información que está en php lo único que he hecho aquí es lanzarlo por pantalla técnicamente no hace falta lanzarlo por pantalla lo único que quiero es que el programa lo grabé en la base de datos vamos vamos a comprobar vamos a confirmar como es cierto que lo grabamos en la base de datos así que para esto ahora a continuación lo que voy a hacer es lo siguiente lo que voy a hacer es decirle al sistema que me quiero conectar por mysql y mysql vale ejemplos básicos [Música] no no no no no no efe co le inserta vale muy bien bueno me vengo aquí y entonces y entonces y entonces vengo y digo si es cierto que el tipo envío en ese caso voy a hacer una cosa y si el tipo es lectura haré otra entonces en todo caso voy a abrir una conexión con la base de datos es localhost me conecto a localhost el usuario es jv chat la contraseña es jv chat la base de datos es jv chat y si el post tipo es envió en ese caso lo que voy a hacer es meter digamos la la conexión así que voy a hacer lo siguiente voy a copiar este trozo y en ese caso voy a decir inserto en tu mensajes values y voy a decir no para que me está automáticamente un mensaje el usuario va a estar vacío esto va a ser el mensaje y luego tenemos el utc el utc va a ser el rate y esto va a ser el post con esto lo que habremos hecho como ahora vamos a ver a continuación es meter esta información dentro de la base de datos vamos a comprobar si es cierto vamos a cerrar por aquí pestañas vamos a por ello y ahora pongo aquí hola vale internal server error esto quiere decir que ha dado un error por aquí porque probablemente me falta un punto y coma en esta línea vamos a volverlo a probar le doy aquí ahora le voy a enviar y en principio no devuelve nada lo cual parece correcto me vengo aquí me voy a mensajes y en mensajes podemos ver vamos a ver de momento parece que no tenemos ninguno voy a hacer esto más pequeño sí tenemos aquí el mensaje con identificador uno usuario de momento ninguno ahora hablamos de esto mensaje hola y el utc que ha sido el segundo dentro de la época y unix donde lo hemos insertado vale si yo ahora vengo por aquí y digo el segundo mensaje le doy a enviar y recargo por aquí y veo que tengo por aquí segundo mensaje vale y veo que ya tengo por aquí correctamente que estoy guardando mensajes dentro del sistema estaría bien también hay que decir lo que pudiera guardar un usuario así que en este caso para guardar el usuario lo que voy a hacer en él jv chat es indicar quién soy esto es peligroso desde el punto de vista en el que alguien puede tocarlo vale pero voy a decir que antes de los mensajes voy a poner un input type text cuidado aquí texto y b usuario cuidado en este caso porque al haber puesto un segundo input aquí va a haber un poco una pelea entonces voy a poner y de mensaje y por tanto en el j s no voy a poner input sino que voy a poner mensaje y aquí voy a poner mensaje y ahora digo bar usuario es igual jv chat usuario vale esto se va a poder tocar muy fácilmente pero bueno luego podemos buscar medidas para que no se pueda tocar entre sí ahora vengo por aquí y digo mensaje es mensaje y usuario es igual a más usuario y entonces si todo va bien en el chat le voy a decir que si en un sitio guardo el mensaje aquí voy a guardar el usuario voy a bajar esto a varias líneas para que se lea mejor values esto es el nulo esto es el usuario esto es el mensaje esto es la fecha y esto es el final de la petición y así lo podremos ver mejor bien si ya lo tenemos por tanto ahora recargo voy a decirle en el css jv chat a la jv chat usuario le voy a poner un margin bottom 4 píxeles porque button no botón vale vamos a verlo por aquí ahora si bien entre si yo ahora pongo por ejemplo pues j.lo uy cara te la digo este es un mensaje le voy a enviar se borra esto me voy a la base de datos me voy a mensajes y veo que el usuario jv carratalá pues ha enviado un mensaje esto evidentemente pues ya es otro paso hacia adelante ya que vemos que no solo podemos guardar un mensaje sino que de hecho también podemos guardar al propio usuario bien ya tenemos esto por aquí así que vamos a continuar ya somos capaces de enviar la información asíncrona mente al servidor pero ahora viene una parte muy interesante y es que lo que quiero es devolver la información del servidor bien pues hasta ahora nos hemos centrado en únicamente esta información y meterla digamos bueno meterla aquí dentro no enviarla al servidor para esta cajita de mensajes la hemos creado precisamente para poder enviar mensajes para para que aquí se refleje no solo el mensaje que nosotros hemos enviado sino el mensaje de cualquier usuario vamos a vamos a por ello vamos a hacerlo por tanto lo que voy a hacer ahora es decirle al sistema que cada equis segundos aquí en el archivo javascript vamos a ver lo voy a ejecutar la función bucle vamos a ver jv chat bucle para que no colisione con otras funciones que podamos hacer bien y de hecho ésta debería ser ésta debería ser debería ser jv chat éxito por si acaso integramos esto con otros programas informáticos para que no haya duplicidad en los nombres así que jv chat bucle y en el bucle vamos a decirle qué bar jv chat temporizador es igual a nada y entonces vengo por aquí en el documento web y le digo jv chad temporizador es igual al set time out voy a ejecutar jv chat bucle y ahora en el bucle le digo killer time out jv chatwood j muchas temporizador perdón y ahora le digo estoy aquí lo que le estoy diciendo es recarga la función de bucle cada segundo es decir el documento rueda y lo que hace es lanzar el temporizador y el temporizador lo que hace es ir cargando ir cargando pues cada segundo vale cada segundo nos vamos a ir al servidor y recuperar los mensajes vamos a por ello bien ahora por tanto ahora por tanto me voy a ir al servidor voy a hacer una petición a jacques voy a copiar de hecho esta petición y ahora voy a hacer lo siguiente jv chat aquí no quiero la función de éxito porque al enviar o no sirve para nada pero aquí sí que la quiero entonces jv chat tipo revolución mensaje nada y usuario bueno usuario nada mal poco y ahora jv chat éxito jv chat éxito lo que va a hacer es que dentro de mensajes dentro de jv chat mensajes va a poner el código que le devuelva el servidor y que código eleva a devolver el servidor al servidor le va a devolver que en el caso de que el tipo sea de evolución pues en ese caso lo que vamos a hacer es decir que petición es igual a mysql y cual que va a ser un sencillo select el momento fueron mensajes y a ver qué sale de aquí y entonces y entonces mysql selecto de volver por aquí quiero esto vale y aquí esto es lo que quiero esto lo podemos pasar a una línea y ahora esto es petición esto es fila vale y ahora digo echo rey mensaje por ejemplo con un bebé si todo ha ido bien vamos a ver lo recargó y vamos a verlo por aquí vale debería empezar a aparecer por aquí la información jv chat éxito es jv chat mensajes jb chat mensajes de hecho veo como como está haciendo algo br br br sí que sí que está haciendo algo pero parece que no se llama no se llama mensajes sino que se llama un mensaje de mensaje no es row sino que es fila ahora así que recargo y como vemos me dice hola segundo mensaje este es un mensaje y tal le vemos que lo que está ocurriendo en este caso es que tenemos ya por aquí y si ahora digo ya digo hola me voy a enviar y esta es una prueba qué va le voy a enviar vemos como ahí ya estamos poniendo cada vez más mensajes vamos a ver a continuación como bueno si yo empiezo a poner mensajes le puedo darle al puedo usar la tecla enter para decirle digamos que quiero que se envíe el mensaje así que voy a usarlo en el javascript entonces le digo lo siguiente cuando sobre cuando sobre jv chat cómo se llama este elemento este elemento se llama mensaje mensaje punto focus cuando esté dentro de ese elemento voy a hacer una función anónima y voy a decir que cuando pulse la tecla enter en ese caso puedes enviar el mensaje entonces vamos a verlo vamos a verlo jquery get enter key y ahí vale y esto lo pego vamos a verlo vamos a ver lo recargó le doy aquí y le doy a enter y me dice ha expulsado enter luego eso quiere decir que en este ha explicado enter le puedo poner por ejemplo pues todo este código que tengo aquí copio y pego ahí lo tenemos así que puedo ir enviando puedo ir enviando sin ningún problema bien ahora a continuación vamos resolviendo cosas que nos van surgiendo como por ejemplo si yo empiezo a enviar más mensajes pues vamos a ver que desbordó la caja de texto entonces esto lo podemos arreglar con un poquito de css nos damos a css nos vamos a mensajes y le digo overflow y y voy a decir scroll y esto lo que va a hacer es que pues al desbordar vamos a verlo jb chat mensajes bien ahora tenemos el scroll tenemos el pequeño problema de que a medida que yo voy poniendo a bb b ccc lo que ocurre es que estos mensajes están abajo del todo cuando hago un chat a mí lo que me gustaría porque me gustaría que ocurriera es que siempre viera digamos la parte debajo del todo hay una función llamada top que nos permite hacer esto nos permite trabajar con esto entonces puedo hacer lo siguiente puedo hacer lo siguiente vamos a ver cuándo cuando entro en el bucle le digo qué jv chat mensajes punto top y de momento voy a poner le voy a poner voy a poner cinco mil vamos a ver qué pasa vamos a ver si este es el top que quiero no creo que no a ese score o el top perdón no es top es scroll top así que recargo y si todo va bien ahora a continuación vemos como automáticamente se va al final si yo pongo un mensaje vemos como automáticamente en todo momento se va al mensaje que haya al final con esto por tanto aunque parezca que no tenemos un pequeño chat pero vamos a hacerlo más bonito parece que no pero ya lo tenemos ya está funcionando y ahora lo que queremos es que sea bastante más estético vamos a estilizar un poco esto a la vez que también lanzamos un poco pues diferenciamos los usuarios entonces para ello voy a voy a hacer lo siguiente voy a ir a [Música] al archivo php y voy a decirle que en lugar de lanzarme directamente el mensaje pues me lo ponga en un dip cuya clase sea cuidado aquí con las comillas cuya clase a mensaje y aquí cierro el dip y por tanto ahora no lo parecerá periodista en los mensajes por tanto ahora me voy al css en el hotal wizard le digo que font family es igual la verdad como área como sans-serif para que la letra sea de tipo palo no lo ha cogido creo a ver que recargue ok si bien le digo que le digo que el font 6 es de 10 píxeles para que la letra no sea muy grande tampoco vale y ahora y ahora cada uno de los mensajes va a tener el siguiente estilo va a tener un wish del 60% va a tener un flow de momento left va a tener un para bing de 4 píxeles va a tener un borde rabiu seguiré la gracia visual de 0 píxeles 10 píxeles 10 píxeles 10 píxeles vamos a verlo de momento vale va a tener un background muy suavecito de rgb 220 220 220 y va a tener un margen 4 píxeles vamos a verlo vale y con esto vemos que aparecen los mensajes que van enviando los usuarios otra cosa que podemos hacer evidentemente es como sobre nos baja abajo vemos que lo que podemos hacer es poner la fecha en la que se ha enviado el mensaje o la hora no lo sé o lo que sea y el usuario vale entonces es un poco como whatsapp digamos puede hacerlo es un poquito más grande para que lo veamos mejor pero lo que queremos es esto lo que queremos es pues como en una conversación de whatsapp vamos a verlo pues poder saber quién nos envía el mensaje cuando nos envía el mensaje entonces vengo por aquí class mensaje y pues aquí por ejemplo vale pongo div class usuario esto va aquí con un vídeo de cierre esto va aquí de hecho cuidado usuario y aquí cierra el lead y ahora aquí pongo aquí mira le copio pero el usuario el usuario muy bien es que estoy enviando parece mensajes vacíos no pasa nada como el jv carratalá voy a enviar hola cómo estás estos mensajes ya llevan usuarios vale ahora por ejemplo pues vemos que pues bueno podemos por detallitos tales como por ejemplo el usuario dice me voy a el css le digo mensaje usuario voy a decirle que es fondo wait bolt pero font-size 8 píxeles por ejemplo vamos a verlo y vemos cómo pues de alguna forma se diferencia el usuario de los mensajes y todo eso también quiero poner la hora abajo del todo así que vengo por aquí y ahora pongo pues otro vive clase ahora y utilizó una de las funciones preconstruidas de convertir época y ónix a una hora concreta os vengo por aquí vamos a verlo y digo php y ahora me from you knicks timestamp por aquí y de nuestro gran amor puedo copiar siempre no a ver quentin sprint o time yo creo que esto me va a convenir bastante más sprint o time php str to time from you knicks realmente no más al revés es al revés a ver un segundo vale yo creo que voy a usar una función de este tipo entonces voy a copiar esta función por aquí abajo vale y voy a decir y minutos no pues horas valen ahora dos puntos minutos y me quedo con eso y segundos y segundos perdón me quedo con los segundos ok y entonces en la hora digo por aquí que se constata en y esto es fila la fila de la base de datos la tenemos aquí es usted efe así que si todo va bien venimos por aquí y vemos cómo tenemos ya esto y ahora estilizados un poquito más voy a cargarme esos espacios y voy a estilizar como digo un poquito más esto se llama ahora mensaje ahora le digo qué text align right le digo que son 67 píxeles por ejemplo vamos a ver lo que se vea pequeñito y que se vea por ahí a un lado vale y ahí lo vemos incluso pues puedo hacerlo más pequeño todavía simplemente para que ese mensaje esté pero que pues sea un poco la menor de las partes ahora vemos que ya tenemos por aquí este sistema y aunque no lo parezca es un chat multiusuario en el sentido de que yo ahora puedo conectar múltiples usuarios y los usuarios pueden hablar entre sí vamos a verlo para ello voy a poner esta ventana por aquí voy a hacer esta ventana más pequeña vamos a cerrar unas cuantas ventanas nos volveremos a ver si hace falta abre una nueva ventana vamos hacer la pequeña y ahora y ahora esto otras es muy grande vale y ahora por ejemplo esto es jose y esto es juan entonces será vengo digo hola cómo estás tenemos que josé dice hola cómo estás y en el chat de juan vemos que juan recibe el mensaje de jose y dice yo estoy bien coma y tú cómo lo llevas nos comprobamos que juan dice yo estoy bien y tú cómo lo llevas y hijo se recibe el mensaje de juan es decir comprobamos como tenemos ya un chat multiusuario y una vez que tenemos el chat multiusuario digamos pues vemos como como te diría yo lo tenemos ya aquí puesto en pantalla bien ahora un poco como detalle digamos como detallito técnico pues lo que quiero es decirle al sistema que quiero conseguir que los mensajes de mi mismo mis propios mensajes pues sean como te diría yo estén alineados por ejemplo a la derecha para diferenciar los mensajes míos de los del resto de usuarios así que esto lo podemos conseguir de forma más o menos fácil diciéndole al archivo que diciéndole al programa que mediante php en el class mensaje voy a crear un parámetro personalizado llamado usuario y le digo que el usuario es fila usuarios estaba claro vale y entonces y entonces ahora vengo por aquí y le digo al sistema lo siguiente en el archivo js o bueno incluso puedo decirle al archivo que todos aquellos mensajes vamos a ver pss select vaya a tribute es esto esto es lo que quería esto sí pero esto es lo que es atletas la calle no vale y le digo usuario es igual pero claro que pues ahí es donde voy a tener un problema porque es dinámico es decir cada usuario tiene que pillar lo suyo no lo puedo hacer con css lo tengo que hacer con con javascript no les digo mi mensaje mi mensaje mensaje le digo en este caso que cloud raid le digo que bordes radios 10 píxeles 0 píxeles y le voy a decir que el background va a ser verdecillo vamos a ver qué pasa 255 a ver qué ocurre entonces ahora en la js le digo que una vez que pone los mensajes aquí le voy a decir mensaje punto it’s vamos a revisar cada uno de los mensajes y ahora para cada uno de los mensajes voy a comprobar si el mensaje es mío o es de otro usuario y entonces le digo vamos a decir bis junto a tributos usuario es igual dónde estás jv chat usuario yo tengo aquí en este caso eso quiere decir que este usuario ese mensaje es mío entonces lo que voy a hacer es que a este mensaje le voy a añadir la clase pss llamada llamada llamada mi mensaje vamos a comprobar si esto ha funcionado recargamos recargamos vale yo soy jose tú eres juan vale entonces ahora jose por ejemplo va a decir este es un nuevo mensaje vemos como jose digamos se apropia el mensaje como verde como suyo pero vemos también como para jose aparece como un nuevo mensaje como un mensaje completamente diferente 3 ahora vengo por aquí y digo lo siguiente y al ajo se dice en juan dice perdón hola soy juan y estoy haciendo una prueba le voy a enviar y entonces aparece hola soy juan y esta y estoy haciendo una prueba en el caso de juan digamos aparece como algo propio y en el caso de el resto de usuarios aparece como algo completamente ajeno vemos como en este caso estamos consiguiendo hacer que pues cada uno de los elementos digamos aparezca como debe bien vamos a afinar un poquito más el comportamiento de este chat simplemente para decirle que para decirle al sistema que pues al principio no entré directamente en el chat sino que hasta que el usuario no introduzca un usuario hasta el que los usuarios no introduzca un nombre de usuario no debe ocurrir nada pues vamos a por ello y vamos a hacerlo y eso en un momento lo vamos a tener hecho bien pues vamos a mejorar un poco la presentación de esta aplicación así que para ello voy a hacer lo siguiente y es que cuando el programa empieza vamos a verlo por aquí se añaden estos elementos pero pero lo que va a ocurrir es que el input está él imputó inicial está mostrado los mensajes están ocultos display no vamos a copiar esto el input está oculto y el botón está oculto entonces lo que ocurre al principio es que vemos que aparece el usuario y por ejemplo pues la aplicación podría darnos un mensaje de bienvenida dib bienvenida con cuidado con las comillas y por ejemplo podemos parar aquí pues bienvenidos a la aplicación introduce tu usuario para empezar así que tenemos esto por aquí bienvenidos a la aplicación vamos a meter la etiqueta de el charles & meta charset es igual a usted efe 8 meta charset es igual al df 8 para que aquellas también para que ponga bien el acento y entonces en este caso lo que vamos a hacer es lo siguiente cuando sobre este elemento pongamos el usuario pues entonces entramos usa un saurio no usuario que siempre lo pongo mal y entonces hacemos como digo lo siguiente cuando sobre el jv chat usuario hagamos focus entonces cuando pulsemos la tecla enter vamos a hacerlo voy a decir lo siguiente usuario usuario vale voy a decir jv chat usuario save out slow voy a decir jv chat mensaje bienvenida faire out loud esto lo que hará es que elijo un usuario pulso enter y desaparece y entonces lo que voy a hacer a continuación jv chat mensajes facebook flow jv chat mensaje el mensaje mensaje mensaje slow y jv chat button slow digo que soy jose vicente pulso enter y vemos como tenemos ya aquí los mensajes preparados para trabajarse ahora digo hola veremos como en este caso dice jose vicente dice hola ahora pues ya de lo que se trata es de darle quizás un poquito más de estilo a todo pero vemos que básicamente pues ya tenemos esto preparado para para trabajar ya es una cuestión simplemente de css para lo que voy a hacer es decirle al sistema que pues este poder lo voy a quitar a verlo por aquí tenemos los mensajes hola hola vale por ahí aparecen los mensajes por ejemplo pues a este cuadro de texto puedo decirle que le pongo también un campo input es decir vamos bueno puedo decirle que border 0 píxeles solid black y box shadow pero píxeles 5 píxeles 10 píxeles rgb 00.00 punto 3 para un set para decirle qué la sombra en este campo está introducida out line y un parking 4 píxeles con lo cual ya tenemos por ahí como un pequeño campo de texto y ahora pues bueno vamos a ver jv chat bienvenida vamos a definir text align center o algo así esto no me convence mucho 3 píxeles 4 píxeles así y un background de rgb 2 32 32 30 vamos a verlo así y bueno quizás pues eso un campito donde sé que puedo introducir un contenido ahí tenemos el campo donde puedo introducir y voy a darle un estilo parecido al al texto todo caso siempre podemos utilizar digamos aplicaciones de aplicaciones como debería yo conocidas para copiar un poco el estilo vamos a decir por ejemplo que border reviews es 20 píxeles por ejemplo para que tenga como un aspecto más redondeado vale y ahora pues voy a hacer lo mismo con el botón de enviar vamos a decirle qué jv el chat button va a tener todo esto – salvo que la sombra no va a ser insecto sino que la sombra va a ser lanzada digamos así que volver a recargar jose vigente esto es una prueba vamos a ver a qué tamaño se ve así realmente se verá estoy probando la aplicación estoy viendo si funciona esto es otra prueba y así y luego por ejemplo pues detallitos tales como por ejemplo en el input y le voy a decir qué para bing son 18 píxeles para link botón son 8 píxeles un poco pues buscando y un poco buscando el sistema pues tenga un aspecto visual más atractivo aquí no se está reflejando simplemente porque no he cargado el nuevo sistema vale pero ahí lo tenemos así que una vez que hemos hecho esto pues básicamente podemos comprobar como ya tenemos un pequeño sistema de chat en funcionamiento para poder utilizarlo en la aplicación que sea necesario

Deja una respuesta

Tu dirección de correo electrónico no será publicada.