{"id":3621,"date":"2017-10-23T17:12:02","date_gmt":"2017-10-23T17:12:02","guid":{"rendered":"http:\/\/disenoweb.mx\/?p=3621"},"modified":"2017-10-23T17:12:02","modified_gmt":"2017-10-23T17:12:02","slug":"websockets","status":"publish","type":"post","link":"https:\/\/disenoweb.mx\/blog\/websockets\/","title":{"rendered":"Websockets"},"content":{"rendered":"\n<h1>Websockets<\/h1>\n<p>\u00a0<\/p>\n<p><img data-opt-id=742854025  fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-medium wp-image-3962\" src=\"https:\/\/mlniuewdmffl.i.optimole.com\/w:300\/h:280\/q:mauto\/f:best\/http:\/\/disenoweb.mx\/diseno\/wp-content\/uploads\/lighthouse_webdesign-300x280.png\" alt=\"agencia de dise\u00f1o web df Websockets Websockets lighthouse webdesign 300x280\" width=\"300\" height=\"280\" title=\"lighthouse_webdesign-300x280 lighthouse_webdesign-300x280\"><\/p>\n<p><a href=\"http:\/\/disenoweb.mx\">Internet se ha creado<\/a> en gran parte a partir del llamado paradigma solicitud\/respuesta de HTTP. Un cliente carga una p\u00e1gina web, se cierra la conexi\u00f3n y no ocurre nada hasta que el usuario hace clic en un enlace o env\u00eda un formulario.<br>\nHace ya alg\u00fan tiempo que existen tecnolog\u00edas que permiten al servidor enviar datos al cliente en el mismo momento que detecta que hay nuevos datos disponibles. Se conocen como \u201cPush\u201d o \u201cComet\u201d. Uno de los trucos m\u00e1s comunes para crear la ilusi\u00f3n de una conexi\u00f3n iniciada por el servidor se denomina Long Polling. Con el Long Polling, el cliente abre una conexi\u00f3n HTTP con el servidor, el cual la mantiene abierta hasta que se env\u00ede una respuesta. Cada vez que el servidor tenga datos nuevos, enviar\u00e1 la respuesta. El Long Polling y otras t\u00e9cnicas funcionan bastante bien y de hecho ha sido utilizadas en muchas aplicaciones como el chat de Gmail.<br>\nLos <em>WebSockets<\/em> nos ofrecen una conexi\u00f3n bidireccional entre el servidor y el navegador. Esta conexi\u00f3n se produce en tiempo real y se mantiene permanentemente abierta hasta que se cierre de manera expl\u00edcita. Esto significa que cuando el servidor quiere enviar datos al servidor, el mensaje se traslada inmediatamente. Efectivamente, esto es lo que suced\u00eda al utilizar tecnolog\u00edas como Comet, pero se consegu\u00eda utilizando una serie de trucos. Si esto no funcionada, siempre era posible utilizar Ajax para conseguir un resultado parecido, pero sobrecargando el servidor de manera innecesaria.<br>\nSi disponemos de un socket abierto, el servidor puede enviar datos a todos los clientes conectados a ese socket, sin tener que estar constantemente procesando peticiones de Ajax. La ventaja en cuanto a rendimiento y escalabilidad es bastante evidente al utilizar<em><strong> WebSockets<\/strong><\/em>.<br>\nLa latencia en las comunicaciones es otro de los beneficios de utilizar<em><strong> WebSockets<\/strong><\/em>. Como el socket est\u00e1 siempre abierto y escuchando, los datos son enviados inmediatamente desde el servidor al navegador, reduciendo el tiempo al m\u00ednimo, en comparaci\u00f3n con un paradigma basado en Ajax, donde hay que realizar una petici\u00f3n, procesar la respuesta y enviarla de nuevo de vuelta.<br>\nFinalmente, los datos a transmitir se reducen tambi\u00e9n de manera dr\u00e1stica, pasando de un m\u00ednimo de 200-300 bytes en peticiones Ajax, a 10-20 bytes utilizando<em><strong> websockets<\/strong><\/em>.<\/p>\n<h2><em><strong>Websockets<\/strong><\/em><\/h2>\n<p><a href=\"https:\/\/www.facebook.com\/disenopaginaweb%C2%A0\">#Websockets<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Websockets \u00a0 Internet se ha creado en gran parte a partir del llamado paradigma solicitud\/respuesta de HTTP. Un cliente carga una p\u00e1gina web, se cierra la conexi\u00f3n y no ocurre nada hasta que el usuario hace clic en un enlace o env\u00eda un formulario. Hace ya alg\u00fan tiempo que existen tecnolog\u00edas que permiten al servidor &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"ast-button\" href=\"https:\/\/disenoweb.mx\/blog\/websockets\/\"> <span class=\"screen-reader-text\">Websockets<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":4039,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[],"footnotes":""},"categories":[1189,55,1191],"tags":[299,70,46,143,47,128,1212],"class_list":["post-3621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-web","category-diseno-web-2","tag-agencia-de-diseno-web-df","tag-diseno","tag-diseno-web","tag-diseno-web-df","tag-diseno-web-guadalajara","tag-sitio-web","tag-websockets"],"_links":{"self":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/3621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/comments?post=3621"}],"version-history":[{"count":0,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/3621\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/media?parent=3621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/categories?post=3621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/tags?post=3621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}