{"id":3108,"date":"2021-02-19T12:07:12","date_gmt":"2021-02-19T11:07:12","guid":{"rendered":"https:\/\/inlab.fib.upc.edu\/?p=3108"},"modified":"2021-02-19T12:59:11","modified_gmt":"2021-02-19T10:59:11","slug":"uso-de-websockets-en-una-aplicacion-web","status":"publish","type":"post","link":"https:\/\/inlab.fib.upc.edu\/es\/uncategorized-ca\/uso-de-websockets-en-una-aplicacion-web","title":{"rendered":"Uso de websockets en una aplicaci\u00f3n web"},"content":{"rendered":"

\u00daltimamente, el ritmo en que las tecnolog\u00edas est\u00e1n evolucionando es fren\u00e9tico. Hace apenas 10 a\u00f1os, comenzaron a salir los primeros SmartPhones<\/em>. Seguro que todos record\u00e1is aquel famoso Iphone 3G que revolucion\u00f3 el mundo, y provoc\u00f3 un cambio radical en el sector del tel\u00e9fono m\u00f3vil. Y es sorprendente ver que al cabo de pocos a\u00f1os, ya hab\u00eda una nueva versi\u00f3n, y luego otra, y otra … Al punto de que actualmente, cada a\u00f1o aparece un nuevo modelo de las grandes compa\u00f1\u00edas, un nuevo modelo que es m\u00e1s r\u00e1pido, m\u00e1s potente, tiene mejores prestaciones, etc.<\/p>\n

Esto, sumado a que la inform\u00e1tica cada vez es m\u00e1s protagonista en nuestras vidas, ha creado una bola de nieve haciendo que las personas cada vez quieran que las aplicaciones tengan una respuesta m\u00e1s r\u00e1pida, e incluso en tiempo real. Jugando a videojuegos, chateando por las diferentes redes sociales, o haciendo una compra online, hemos llegado al punto donde el usuario espera una respuesta instant\u00e1nea de estos eventos.<\/p>\n

Pero, \u00bfc\u00f3mo se puede conseguir esta interacci\u00f3n en tiempo real? Aqu\u00ed es donde entran en juego los WebSockets.<\/p>\n

\u00bfQu\u00e9 son los websockets?<\/span><\/h1>\n

Websocket es una tecnolog\u00eda desarrollada por el W3C (World Wide Web Consortium) que permite establecer una comunicaci\u00f3n bidireccional entre cliente y servidor proporcionando canales a trav\u00e9s de una \u00fanica connexi\u00f3n TCP. Los websockets permiten prescindir del antiguo model HTTP llamado polling<\/em>, que consist\u00eda en el env\u00edo de peticiones HTTP en un cierto intervalo para obtener una respuesta \u201cinmediata\u201d, y consigue una comunicaci\u00f3n directa entre ambos puntos sin necesidad del env\u00edo de peticiones constantes.<\/p>\n

Ejemplos del uso de websockets<\/strong><\/p>\n

    \n
  • Feed<\/em> de redes sociales<\/li>\n
  • Videojuegos con multijugador<\/li>\n
  • Edici\u00f3n colaborativa de documentos en red<\/li>\n
  • Chats<\/li>\n
  • Aplicaciones de localitzaci\u00f3n<\/li>\n<\/ul>\n

    En todos estos casos, es necesaria una comunicaci\u00f3n en tiempo real entre los usuaris i el servidor. \u00bfC\u00f3mo se crea esta comunicaci\u00f3n?<\/p>\n

    Comunicaci\u00f3n con websockets<\/span><\/h1>\n

    La siguiente imatgen muestra el proceso de creaci\u00f3n de la comunicaci\u00f3n a trav\u00e9s de websockets entre cliente i servidor.<\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    El cliente env\u00eda una solicitud de handshake <\/em>con el servidor para poder establecer una comunicaci\u00f3n. Esta solicitud consiste en una petici\u00f3n HTTP con los siguientes headers:<\/p>\n

      \n
    • \u201chost: {url}\u201d.<\/strong> Indica el servidor al cual se quiere establecer la comunicaci\u00f3n.<\/li>\n
    • \u201cupgrade: websocket\u201d. <\/strong>El campo de upgrade de una petici\u00f3n HTTP permite cambiar de protocolo una vez se ha podido realizar la conexi\u00f3n HTTP. En este caso, se indica que se quiere cambiar al protocolo websocket.<\/li>\n
    • \u201cconnection: upgrade\u201d.<\/strong> Este campo indica el tipo de conexi\u00f3n que se quiere realizar. Normalmente se realiza una conexi\u00f3n de tipo \u201cKeep-Alive\u201d, pero en este caso, para poder hacer el cambio al protocolo websocket, este campo debe contener un tipo de conexi\u00f3n \u201cupgrade\u201d.<\/li>\n
    • \u201csec-websocket-key: {key}\u201d. <\/strong>Este header proporciona parte de informaci\u00f3n del servidor de websockets para verificar que se ha recibido una petici\u00f3n v\u00e1lida en el momento de hacer el handshake<\/em>.<\/li>\n<\/ul>\n

      El servidor recibe y comprueba esta petici\u00f3n, y responde realizando el cambio al protocolo que se ha indicado desde la petici\u00f3n del cliente, y por tanto, se establece la comunicaci\u00f3n bidireccional entre cliente y servidor.<\/p>\n

      \u00bfQu\u00e9 otras ventajas podemos obtener con su uso?<\/span><\/h1>\n

      Ponemos un ejemplo muy sencillo donde tenemos un servidor situado en una red A, que necesita hacer peticiones directas a un equipo situado en una red B.<\/p>\n

       <\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      Si el equipo dispone de una direcci\u00f3n IP p\u00fablica (raramente pasar\u00e1), el paquete se podr\u00e1 enviar directamente al equipo. Antes pero, tendr\u00e1 que pasar por el firewall y el router de la red B, lo que significa que en la red B ser\u00e1 necesario permitir los paquetes que lleguen desde la red A.<\/p>\n

      Normalmente a los equipos se les asigna una direcci\u00f3n IP privada que solo es accesible dentro de la propia red. Esto hace que el paquete ya no se pueda enviar directamente al equipo, y se tenga que enviar a la IP p\u00fablica de la red B, es decir, el punto de acceso de la red (firewall<\/strong>).<\/p>\n

      Una vez el paquete llega al punto de entrada de la red B, hay que hacerlo llegar al equipo destino, por tanto, hace falta que en este punt de entrada se tenga que a\u00f1adir alg\u00fan tipo de mecanismo que reenvie el paquete hacia el equipo destino (NAT).<\/p>\n

      Tampoco se quiere entrar en mucho detalle, pero resumidamente, este sistema no proporciona una buena escalabilidad para el tipo de servicios comentados anteriormente.<\/p>\n

      Con los websockets uno se puede olvidar de todo esto. Como ya se ha explicado, la conexi\u00f3n no se hace de Servidor \u2192 Cliente, sino de Cliente \u2192 Servidor. <\/strong>Esto permite que, en este ejemplo, sea el propio equipo de la red B quien haga la petici\u00f3n para crear la comunicaci\u00f3n directamente con el servidor de la red A, siguiendo el proceso que se ha explicado en la secci\u00f3n anterior.<\/p>\n","protected":false},"excerpt":{"rendered":"

      \u00daltimamente, el ritmo en que las tecnolog\u00edas est\u00e1n evolucionando es fren\u00e9tico. Hace apenas 10 a\u00f1os, comenzaron a salir los primeros SmartPhones. Seguro que todos record\u00e1is aquel famoso Iphone 3G que revolucion\u00f3 el mundo, y provoc\u00f3 un cambio radical en el sector del tel\u00e9fono m\u00f3vil. Y es sorprendente ver que al cabo de pocos a\u00f1os, ya […]<\/p>\n","protected":false},"author":594,"featured_media":3098,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[496,1],"tags":[],"experteses":[],"class_list":["post-3108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articulos","category-uncategorized-ca"],"acf":[],"_links":{"self":[{"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/posts\/3108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/users\/594"}],"replies":[{"embeddable":true,"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/comments?post=3108"}],"version-history":[{"count":0,"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/posts\/3108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/media\/3098"}],"wp:attachment":[{"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/media?parent=3108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/categories?post=3108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/tags?post=3108"},{"taxonomy":"experteses","embeddable":true,"href":"https:\/\/inlab.fib.upc.edu\/es\/wp-json\/wp\/v2\/experteses?post=3108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}