{"id":1086,"date":"2017-05-11T20:09:56","date_gmt":"2017-05-11T20:09:56","guid":{"rendered":"http:\/\/luisrodriguez.pe\/blog\/?p=1086"},"modified":"2017-05-11T22:12:56","modified_gmt":"2017-05-11T22:12:56","slug":"crear-chat-basico-pubnub","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/","title":{"rendered":"Crear un chat basico con pubnub"},"content":{"rendered":"<p>Buen tiempo que deje de publicar articulos por un tema de tiempos pero ya que andaba metido en varios proyectos y en uno de ellos que aun lo llevo en marchar me toco realizar un chat y bueno con el ajax esto deje de ser un drama hace mucho tiempo. Pero si lo intentaste hacer en algun proyecto mediano o grande te habras topado con unos problemas por ejemplo: saturar el servidor con muchas peticiones, limite de conexiones a la base de datos si fuera el caso que estes guardando los chat, etc.<\/p>\n<p>este problema se soluciono definitivamente con node.js que evita el problema de saturar el servidor por peticiones ya que siempre mantienen un puente donde escribe y lee y se mantiene abierto para esta conversacion.<\/p>\n<p>pero podras instalarlo en tu servidor? probablemente no ya que no ocupa una caracteristica tecnica en tu proyecto \u00a0y usas una infraestructura\u00a0<a href=\"https:\/\/es.wikipedia.org\/wiki\/LAMP\">LAMP<\/a>\u00a0 y es aqui donde PUBNUB viene a ayudarnos y solucionarnos la vida nos enfoca en programar y dejar del lado el lado tecnico del servidor.<\/p>\n<p>se que siempre en mis articulos voy directo al codigo pero era necesario un poco de contexto para que entiendan bien para que viene el PUBNUB al mercado y no se milita a solo hacer chat de hecho puede ser usado para infinidades de cosas.<\/p>\n<p>Entonces a programar!<\/p>\n<p><a href=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-1087\" src=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg\" alt=\"chat-vista\" width=\"342\" height=\"380\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg 342w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista-270x300.jpg 270w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/a><\/p>\n<p>tenemos esta estructura del chat que es muy similar al de facebook el codigo para esta ventana es (se usa bootstrap y jquery):<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"html\" style=\"font-family:monospace;\">&lt;div class=&quot;conversacion&quot; style=&quot;display: block;&quot;&gt;\r\n&lt;div class=&quot;ventana-cabecera&quot;&gt;&lt;i class=&quot;fa fa-circle&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/i&gt; Luis Miguel Rodriguez Blas&lt;\/div&gt;\r\n\t&lt;div class=&quot;ventana-cuerpo&quot;&gt;\r\n&nbsp;\n\t   &lt;div class=&quot;col-xs-12 el&quot;&gt;&lt;span&gt;Broder, vao a pichangear!&lt;\/span&gt;&lt;\/div&gt;\r\n\t   &lt;div class=&quot;col-xs-12 yo&quot;&gt;&lt;span&gt;sale y vale pero a las 10pm de lo contrario no la hago&lt;\/span&gt;&lt;\/div&gt;\r\n\t   &lt;div class=&quot;col-xs-12 el&quot;&gt;&lt;span&gt;Broder, vao a pichangear!&lt;\/span&gt;&lt;\/div&gt;\r\n\t   &lt;div class=&quot;col-xs-12 yo&quot;&gt;&lt;span&gt;sale y vale pero a las 10pm de lo contrario no la hago&lt;\/span&gt;&lt;\/div&gt;\r\n           &lt;div class=&quot;col-xs-12 yo&quot;&gt;&lt;span&gt;hola&lt;\/span&gt;&lt;\/div&gt;\r\n       &lt;\/div&gt;\r\n       &lt;div class=&quot;ventana-escribir&quot;&gt;\r\n\t&lt;form id=&quot;frm-chat&quot;&gt;\r\n\t   &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;&quot; placeholder=&quot;Escribe tu mensaje...&quot;&gt;\r\n\t&lt;\/form&gt; \r\n       &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre><\/td><\/tr><\/table><\/div>\n\n<p>y tenemos un input donde el usuario escribira y es desde donde se desencadenara todo el script pero primero realizamos la conexion del pubnub<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span style=\"color: #006600; font-style: italic;\">\/*conexion al servidor del pubnub*\/<\/span>\n<span style=\"color: #000066; font-weight: bold;\">var<\/span> pubnub <span style=\"color: #339933;\">=<\/span> PUBNUB.<span style=\"color: #660066;\">init<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span>\n        publish_key<span style=\"color: #339933;\">:<\/span> <span style=\"color: #3366CC;\">'xxxxxxxxxxxx'<\/span><span style=\"color: #339933;\">,<\/span>\n        subscribe_key<span style=\"color: #339933;\">:<\/span> <span style=\"color: #3366CC;\">'xxxxxxxxxxxxx'<\/span>\n    <span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>estos datos de publish_key y subscribe_key te los brindara al registrarse y crear un proyecto dentro de la web de pubnub.com<br \/>\n<a href=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/crear-pubnub.jpg\"><img decoding=\"async\" src=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/crear-pubnub.jpg\" alt=\"crear-pubnub\" width=\"433\" height=\"342\" class=\"alignnone size-full wp-image-1092\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/crear-pubnub.jpg 433w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/crear-pubnub-300x237.jpg 300w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/a><\/p>\n<p>el siguiente paso es crear un canal que servira para la conversacion (puedes crear n cantidad de canales)<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span style=\"color: #006600; font-style: italic;\">\/*abrimos el canal*\/<\/span>\npubnub.<span style=\"color: #660066;\">subscribe<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span>\n          channel<span style=\"color: #339933;\">:<\/span> <span style=\"color: #3366CC;\">'chat-1'<\/span><span style=\"color: #339933;\">,<\/span>\n          message<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span>m<span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#123;<\/span>escribir_chat<span style=\"color: #009900;\">&#40;<\/span>m<span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#125;<\/span> \n    <span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>ya tenemos el canal abiero de este medio y en message le pasamos una funcion que la llamamos escribir_chat() que lleva una variable donde enviaremos lo que nos pasa el usuario al chatear pero para tener mas claro vemos como procede el script desde el momento del enter en el input del chat.<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span style=\"color: #006600; font-style: italic;\">\/*aqui creamos el evento que cuando de ENTER en la input se dispare y llame a la funcion publish *\/<\/span>\n$<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;#frm-chat input[type='text']&quot;<\/span> <span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">keypress<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span>e<span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #009900;\">&#123;<\/span>\n        mensaje<span style=\"color: #339933;\">=<\/span>$<span style=\"color: #009900;\">&#40;<\/span> <span style=\"color: #3366CC;\">&quot;#frm-chat input[type='text']&quot;<\/span> <span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">val<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n        <span style=\"color: #000066; font-weight: bold;\">if<\/span><span style=\"color: #009900;\">&#40;<\/span>e.<span style=\"color: #660066;\">which<\/span> <span style=\"color: #339933;\">==<\/span> <span style=\"color: #CC0000;\">13<\/span><span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #009900;\">&#123;<\/span>\n            publish<span style=\"color: #009900;\">&#40;<\/span>mensaje<span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n            <span style=\"color: #000066; font-weight: bold;\">return<\/span> <span style=\"color: #003366; font-weight: bold;\">false<\/span><span style=\"color: #339933;\">;<\/span>\n     <span style=\"color: #009900;\">&#125;<\/span>\n<span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>la funcion <strong>publish<\/strong> enviamos el dato escrito<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span style=\"color: #006600; font-style: italic;\">\/*el fin de la funcion es para decir al pubnub a que canal y que mensaje envia *\/<\/span>\n<span style=\"color: #000066; font-weight: bold;\">function<\/span> publish<span style=\"color: #009900;\">&#40;<\/span>mensaje<span style=\"color: #339933;\">=<\/span><span style=\"color: #003366; font-weight: bold;\">null<\/span><span style=\"color: #339933;\">,<\/span>input<span style=\"color: #009900;\">&#41;<\/span> <span style=\"color: #009900;\">&#123;<\/span>\n        pubnub.<span style=\"color: #660066;\">publish<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span>\n            channel<span style=\"color: #339933;\">:<\/span> <span style=\"color: #3366CC;\">'chat-1'<\/span><span style=\"color: #339933;\">,<\/span>\n            message<span style=\"color: #339933;\">:<\/span> <span style=\"color: #009900;\">&#123;<\/span><span style=\"color: #3366CC;\">&quot;text&quot;<\/span><span style=\"color: #339933;\">:<\/span>mensaje<span style=\"color: #009900;\">&#125;<\/span>\n        <span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n    <span style=\"color: #009900;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>ahora insertamos al canal los datos enviados para que el usuario del otro lado del chat lo vea.<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span style=\"color: #006600; font-style: italic;\">\/*mandamos al canal y ejecutamos una funcion que escribira en el html *\/<\/span>\npubnub.<span style=\"color: #660066;\">subscribe<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #009900;\">&#123;<\/span>\n          channel<span style=\"color: #339933;\">:<\/span> <span style=\"color: #3366CC;\">'chat-1'<\/span><span style=\"color: #339933;\">,<\/span>\n          message<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000066; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">&#40;<\/span>m<span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#123;<\/span>escribir_chat<span style=\"color: #009900;\">&#40;<\/span>m<span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#125;<\/span> \n <span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>la funcion escribir_chat basicamente creara la linea de conversacion en el html del chat y se vera una fluidez de conversacion<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span style=\"color: #000066; font-weight: bold;\">function<\/span> escribir_chat<span style=\"color: #009900;\">&#40;<\/span>m<span style=\"color: #009900;\">&#41;<\/span>\n    <span style=\"color: #009900;\">&#123;<\/span>   \n        console.<span style=\"color: #660066;\">log<\/span><span style=\"color: #009900;\">&#40;<\/span>m<span style=\"color: #009900;\">&#41;<\/span>\n&nbsp;\n        <span style=\"color: #000066; font-weight: bold;\">if<\/span> <span style=\"color: #009900;\">&#40;<\/span>m.<span style=\"color: #660066;\">text<\/span><span style=\"color: #339933;\">!=<\/span><span style=\"color: #3366CC;\">&quot;&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>\n        <span style=\"color: #009900;\">&#123;<\/span> \n            <span style=\"color: #000066; font-weight: bold;\">var<\/span> html<span style=\"color: #339933;\">=<\/span><span style=\"color: #3366CC;\">'&lt;div class=&quot;col-xs-12 yo&quot;&gt;'<\/span><span style=\"color: #339933;\">;<\/span>\n            html<span style=\"color: #339933;\">+=<\/span><span style=\"color: #3366CC;\">'    &lt;span&gt;'<\/span><span style=\"color: #339933;\">+<\/span>m.<span style=\"color: #660066;\">text<\/span><span style=\"color: #339933;\">+<\/span><span style=\"color: #3366CC;\">'&lt;\/span&gt;'<\/span><span style=\"color: #339933;\">;<\/span>\n            html<span style=\"color: #339933;\">+=<\/span><span style=\"color: #3366CC;\">'&lt;\/div&gt;'<\/span><span style=\"color: #339933;\">;<\/span>\n            $<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;.ventana-cuerpo&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">append<\/span><span style=\"color: #009900;\">&#40;<\/span>html<span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n            $<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;#frm-chat input[type='text']&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">val<\/span><span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">''<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span> \n            <span style=\"color: #006600; font-style: italic;\">\/*esta linea es para que siempre la ventana div se mantenga en el bottom 0*\/<\/span>\n            $<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;.ventana-cuerpo&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span>.<span style=\"color: #660066;\">scrollTop<\/span><span style=\"color: #009900;\">&#40;<\/span>$<span style=\"color: #009900;\">&#40;<\/span><span style=\"color: #3366CC;\">&quot;.ventana-cuerpo&quot;<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #009900;\">&#91;<\/span><span style=\"color: #CC0000;\">0<\/span><span style=\"color: #009900;\">&#93;<\/span>.<span style=\"color: #660066;\">scrollHeight<\/span><span style=\"color: #009900;\">&#41;<\/span><span style=\"color: #339933;\">;<\/span>\n        <span style=\"color: #009900;\">&#125;<\/span>\n&nbsp;\n    <span style=\"color: #009900;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>ya con esto tendras el chat funcionando y seguro te preguntas pero si solo creamos 1 venta de la conversacion como hacemos para el otro usuario que estara del otro lado?.<br \/>\nejecuta su chat en 2 tabs del navegador al mismo tiempo y comienza escribir y veras que lo tienes todo.<\/p>\n<p>realizare otro post mejorando este chat que estamos armando, espero que te ayude o te de mejor idea del pubnub y estoy abierto a sugerencias y mejoras de este chat que como menciono esta en una primera version basica.<\/p>\n","protected":false},"excerpt":{"rendered":"Buen tiempo que deje de publicar articulos por un tema de tiempos pero ya que andaba metido en varios proyectos y en uno de ellos que aun lo llevo en marchar me toco realizar un chat y bueno con el ajax esto deje de ser un drama hace mucho tiempo. Pero si lo intentaste hacer[&#8230;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,7],"tags":[147,22,146,148],"class_list":["post-1086","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","category-javascript","tag-chat","tag-javascript-2","tag-pubnub","tag-tiempo-real"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Crear un chat basico con pubnub - Blog Luis Rodriguez<\/title>\n<meta name=\"description\" content=\"Mantener data en tiempo real sin comprometer el servidor por tantas peticiones http, te suena interesante? pubnub nos ayuda y en este articulo te explico de una forma facil y lo ponemos a prueba con clasico ejemplo de un chat\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un chat basico con pubnub - Blog Luis Rodriguez\" \/>\n<meta property=\"og:description\" content=\"Mantener data en tiempo real sin comprometer el servidor por tantas peticiones http, te suena interesante? pubnub nos ayuda y en este articulo te explico de una forma facil y lo ponemos a prueba con clasico ejemplo de un chat\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-11T20:09:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-11T22:12:56+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Crear un chat basico con pubnub\",\"datePublished\":\"2017-05-11T20:09:56+00:00\",\"dateModified\":\"2017-05-11T22:12:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/\"},\"wordCount\":508,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg\",\"keywords\":[\"chat\",\"javascript\",\"pubnub\",\"tiempo real\"],\"articleSection\":[\"Desarrollo web\",\"JAVASCRIPT\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/\",\"name\":\"Crear un chat basico con pubnub - Blog Luis Rodriguez\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg\",\"datePublished\":\"2017-05-11T20:09:56+00:00\",\"dateModified\":\"2017-05-11T22:12:56+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"description\":\"Mantener data en tiempo real sin comprometer el servidor por tantas peticiones http, te suena interesante? pubnub nos ayuda y en este articulo te explico de una forma facil y lo ponemos a prueba con clasico ejemplo de un chat\",\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg\",\"contentUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg\",\"width\":342,\"height\":380},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un chat basico con pubnub\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un chat basico con pubnub - Blog Luis Rodriguez","description":"Mantener data en tiempo real sin comprometer el servidor por tantas peticiones http, te suena interesante? pubnub nos ayuda y en este articulo te explico de una forma facil y lo ponemos a prueba con clasico ejemplo de un chat","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/","og_locale":"es_ES","og_type":"article","og_title":"Crear un chat basico con pubnub - Blog Luis Rodriguez","og_description":"Mantener data en tiempo real sin comprometer el servidor por tantas peticiones http, te suena interesante? pubnub nos ayuda y en este articulo te explico de una forma facil y lo ponemos a prueba con clasico ejemplo de un chat","og_url":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2017-05-11T20:09:56+00:00","article_modified_time":"2017-05-11T22:12:56+00:00","og_image":[{"url":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg","type":"","width":"","height":""}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Crear un chat basico con pubnub","datePublished":"2017-05-11T20:09:56+00:00","dateModified":"2017-05-11T22:12:56+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/"},"wordCount":508,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg","keywords":["chat","javascript","pubnub","tiempo real"],"articleSection":["Desarrollo web","JAVASCRIPT"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/","url":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/","name":"Crear un chat basico con pubnub - Blog Luis Rodriguez","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg","datePublished":"2017-05-11T20:09:56+00:00","dateModified":"2017-05-11T22:12:56+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"description":"Mantener data en tiempo real sin comprometer el servidor por tantas peticiones http, te suena interesante? pubnub nos ayuda y en este articulo te explico de una forma facil y lo ponemos a prueba con clasico ejemplo de un chat","breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#primaryimage","url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg","contentUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2017\/05\/chat-vista.jpg","width":342,"height":380},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-chat-basico-pubnub\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Crear un chat basico con pubnub"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/1086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=1086"}],"version-history":[{"count":8,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/1086\/revisions"}],"predecessor-version":[{"id":1096,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/1086\/revisions\/1096"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=1086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=1086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=1086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}