¿Existen bibliotecas JavaScript de código abierto que aborden múltiples pestañas del navegador y el estado del cliente para los navegadores más nuevos? [cerrado]


11

Hay algunas nuevas características HTML5 que lo han convertido en navegadores recientes que permiten compartir el estado entre pestañas, ventanas del navegador, ventanas del mismo dominio, etc. Por lo tanto, es probable que sea un poco más fácil escribir una aplicación web que mantenga mucho estado en el cliente y también gestiona el estado de forma inteligente entre pestañas y / o ventanas.

Actualmente hay bibliotecas como Backbone.js que pueden ayudar a administrar el estado en una sola pestaña o en una sola ventana. ¿Hay algo por ahí que ayude con múltiples pestañas (o ventanas) que administran el estado global, el estado específico de la pestaña y los eventos de tabla cruzada sin depender del servidor para sincronizarlos?


2
Algunas aplicaciones web (p. Ej., Trello) pasan por alto esto simplemente usando WebSockets para sincronizar todos los clientes, ya sea en el mismo navegador o no. Pero podría ser útil. Si estuviera escribiendo una biblioteca como esta, haría una capa delgada sobre un polyfill para SharedWorkers, ya que SharedWorkers hace mucho de lo que necesita aquí, pero aún no está bien soportado. Un truco para que esto funcione son los eventos de almacenamiento local, que se activan incluso cuando las pestañas se abrieron de forma independiente.
mahemoff

1
Mi profesor universitario me enseñó eso HTTP is great (and beutiful) because it is stateless. Desde que me uní a la industria, estoy buscando esa belleza, pero no puedo encontrarla. ¡Todos hablan solo de mantener los estados que ves!
Dipan Mehta

@DipanMehta: si miras el RFC2616, no estoy seguro de que estés de acuerdo con tu maestro sobre la parte de "belleza" :) Aunque te diría que la idea "puramente sin estado" es realmente genial y encuentro problemático que estamos carnicería que ...
haylem

Las aplicaciones sin estado y web no van tan bien juntas. Pequeñas cosas como estar conectado en estado de acarreo. Genial, si solo estás sirviendo archivos bastante pequeños a cualquiera que los pida, supongo.
psr

Escribí una pequeña biblioteca para comunicarme entre todas las pestañas abiertas de tu sitio web usando un truco HTML5.
Catamphetamine

Respuestas:


3

Respuesta corta:

Realmente no puede pasar información de estado de una pestaña a otra ...

Respuesta larga:

Realmente no puede pasar información de estado de una pestaña a otra, ya que esto sería una violación muy grave de sandboxing y seguridad.

Sin embargo, puede pasar indirectamente el estado entre dos pestañas mediante:

Otra opción sería simplemente comunicarse a través de cookies para pasar información entre 2 pestañas, pero lo más probable es que esto cause problemas, dependa mucho del navegador y requiera la recarga de la página (y para ser sincero, nunca lo he probado y solo pensé en ello, pero otros han hecho que ) .

Entonces, como las extensiones del navegador son obviamente una ruta bastante limitante, debe seguir el camino de las comunicaciones cliente-servidor y desarrollar un sistema que permita a los clientes publicar eventos en un servidor, que luego los reenvía (o cualquier otro tipo de transmisión) a otros clientes a través de un protocolo de comunicación de su elección.


Actualización 1: como alguien mencionó en un comentario antes de eliminarlo (no se puede dar crédito ya que no se muestra en la bandeja de entrada, lo siento)

HTML5 presenta la window.postMessageAPI.

Para un ejemplo de trabajo, vea la publicación de blog de John Resig en Cross-Window Messaging . Y muy interesante, si mira los comentarios en esta publicación, notará que alguien llamado Malte menciona una biblioteca que escribieron para usar window.postMessageen navegadores modernos, o una versión basada en cookies en navegadores más antiguos.

Lea estos para más detalles y ejemplos:

Actualización 2:

Tenga en cuenta que, como 2012-03-04, la especificación HTML5 todavía es un borrador, por lo que algunas características podrían eliminarse . Así que úsalo con cuidado ...


Aparentemente estoy equivocado, ya que HTML5 presenta la API window.postMessage, de hecho.
haylem

Además, si lee la publicación de blog de John Resig en Cross-Window Messaging y los comentarios, notará que alguien llamado Malte menciona una [biblioteca] [3] que escribió para usar esto en los navegadores modernos, o una versión basada en cookies para navegadores antiguos, así que mi cosa de las galletas no era tan loca.
haylem

3

Recientemente descubrí Intercom , que utiliza almacenamiento local para implementar mensajes de difusión entre ventanas. El almacenamiento local activa un evento ( onstorage) cuando los datos cambian, por lo que no es necesario realizar un sondeo. Intercom permite que todas las páginas de un dominio se comuniquen, independientemente de cómo se hayan abierto.


1

Si sus ventanas (páginas) son del mismo dominio (origen), localStoragepuede usarse para compartir datos y transmitir mensajes. Una cosa que debe considerar es que cada ventana del navegador (página) funciona en un hilo separado. Entonces, si estamos hablando de comunicación entre ventanas, también estamos hablando de subprocesos múltiples.

También debe considerar algunos localStorageproblemas con IE:

  • He realizado algunas pruebas para localStorage en IE8. Después de varios miles de cambios en localStorage, las ventanas del mismo origen dejan de recibir eventos de 'almacenamiento'. Aún más, luego intentas leer desde el mismo elemento localStorage, los valores pueden ser diferentes en diferentes ventanas. Entonces, yo diría que IE8 no es compatible con localStorage

  • IE9 e IE10 llaman al controlador de eventos 'almacenamiento' incluso si localStorage se cambia desde esta ventana ( esto va en contra de las especificaciones ).

  • También hay problemas conocidos con IE11 .

Recientemente publiqué la biblioteca de comunicación entre ventanas (todas las características se describen en el archivo Léame). Proporciona intercambio de datos seguro para subprocesos, transmisión de eventos. También resuelve algunos problemas de IE (IE8 definitivamente no es compatible, el error de IE11 con iframe dentro de un padre de origen diferente solo puede resolverse solucionando IE, esperando la actualización de IE11).

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.