2010-07-19 19 views
49

Actualmente estoy en el proceso de escribir una aplicación web sin conexión usando todos los recursos html5 para soporte fuera de línea. Sin embargo, ahora estoy empezando a pensar en escribir el módulo de sincronización que garantizará que todos los datos fuera de línea se envíen al servidor y los datos del servidor al cliente. Ahora estoy seguro de que esto ya se ha hecho antes, quiero decir que es un problema de diseño bastante clásico que afecta a los dispositivos móviles y una plétora de otras cosas. Entonces me pregunto si alguien me puede indicar algunos buenos recursos de diseño para este tipo de cosas.Offline/Online Synchronization Design (Javascript)

Ahora realmente no necesito ser demasiado sofisticado con esto, quiero decir que no estoy manejando múltiples usuarios que acceden a los mismos datos y estoy feliz de no fusionar conflictos (solo tomar el último) pero aún así me gustaría un diseño que me permita esas opciones en el futuro.

Además, ¿hay algún proyecto de código abierto que implemente este tipo de cosas? No estoy por encima de robar el código de otra persona (si la licencia lo permite) y estoy feliz de portarme.

Respuesta

8

Tuve un problema similar. Decidí usar un enfoque puramente JSON de entrada y salida. La solución que estoy tomando el envío del formulario es:

  1. captura la forma presente caso
  2. verificación de si el usuario está en línea
  3. si usuario está en línea a continuación, enviar el formulario como la POST forma normal
  4. si usuario está fuera de línea luego stringify una solicitud JSON y almacenarla localmente (decidí usar Web SQL Database). La tabla de espera es simplemente Uri y Payload.

Luego tengo ganchos de eventos globales para los eventos en línea/fuera de línea. Cuando el usuario vuelve a estar en línea, comprueba la cola y, si la cola tiene elementos, los envía a través de las solicitudes JSON POST.

Si está interesado principalmente en obteniendo datos JSON y guardándolo en caché para su uso sin conexión, eche un vistazo a jquery.offline.

El desafío con la sincronización en ambas direcciones es que necesita actualizar las listas locales en caché con cualquier trabajo CRUD que haya puesto en la cola.

Me gustaría encontrar una forma más genérica para hacer esto.

1

Me enfrenté al mismo problema y terminé usando un archivo XML para almacenamiento y git para rastrear los cambios y confirmarlos automáticamente, tan pronto como haya una conexión disponible. La sincronización se realiza con los comandos git commit/push/pull habituales en un script de shell y un cronjob que inicia el script. Esto también funcionaría si almacena JSON en un archivo de texto.

9

Mi plan para un diseño similar (aún no probado) es usar algo como PouchDB para almacenar los datos localmente y luego sincronizarlos con una instancia remota de sofá.

+0

Hey! has tenido éxito? Me gustaría escuchar tu experiencia. – Nek

4

en nuestro equipo ya hemos desarrollado la aplicación en modo fuera de línea/en línea.

estamos usando las siguientes bibliotecas siguientes:

Usando rack-offline estamos almacenando en caché todos los archivos de recursos y la plantilla jst para mostrar contenido en la página. backbonejs y backbonejs-localStorage ayuda a hacer la aplicación MVC en el cliente. es bastante increíble, deberías probarlo. siempre estamos usando localstorage para guardar datos. cuando creamos una publicación, por ejemplo, un objeto de modelo y guardamos en localStorage, estamos activando colas para la sincronización (también lo tenemos por temporizador de fondo de trabajo para el proceso de sincronización automático). Para cada modelo, tenemos una clase de sincronización separada que debe ejecutarse mediante el activador de sincronización de cola. si su navigator.onLine => true enviamos solicitudes al servidor con datos para actualizar. si cierra el navegador, de todos modos no perderá sus datos porque tiene colas en el Almacén local. la próxima vez que el cliente sincronice datos en la primera carga con navigator.onLine => true.

Cómo utilizar rack sin conexión se puede comprobar mi pequeño proyecto en el GitHub:

pomodoro-app

Buena suerte!

1

Actualmente estoy trabajando en una aplicación web similar. He decidido hacer ese flujo de trabajo:

  1. El formulario no se ha enviado realmente - El botón "Enviar" en realidad guarda datos de formularios serializados en localStorage (en algunas filas). Esto ahorra problemas con la captura de envío y la escritura de código de procesamiento de error adicional para manejar la desconexión durante el envío del formulario.
  2. La secuencia de comandos de transporte se activa después de guardar los datos. Comprueba el estado en línea/fuera de línea.
  3. Cuando está en línea, intenta enviar los datos más recientes de la cola al servidor (solicitud AJAX), y los elimina de la cola en caso de éxito (y continúa enviando los datos siguientes de la cola después del corto tiempo de espera).
  4. Se vuelve a verificar después de un período de tiempo (por setTimeout()).
1

Si desea utilizar el framework Ext JS/Sencha potencialmente pesado, tiene una buena API de datos con soporte fuera de línea (por ejemplo, localStorage) y un enfoque de proxy para escribir a través del servidor local. Yo uso Sencha Touch (móvil específico).

Para depurar el almacenamiento web, consulte Weinre.

6

Echa un vistazo a Derby, un framework Node MVC que tiene algunas características de sincronización muy bonitas y resolución de conflictos. http://derbyjs.com/

+4

Derby usa [RacerJS] (https://github.com/codeparty/racer) para la sincronización de datos, por lo que no * tiene * que elegir para el marco completo de Derby. RacerJS todavía está en alfa, según ellos mismos. –

2

Yo personalmente recomendaría que escribas un contenedor en la parte superior de la API indexedDB que comprueba si estás en línea/fuera de línea.

  • si fuera de línea, simplemente almacenar en IndexedDB y establecer persistieron bandera a falso en todos los documentos
  • si es en línea, obtener todos los documentos en los que persistían es falso y almacenarlos en mongodb o algo equivelant en el backend, a continuación, almacenar nuevos documentos en indexedDB y en el servidor con el indicador persistido en verdadero.

I've written a small one

Usted tendría que aumentar el túnel para establecer el indicador PERSISTED de forma automática y también túnel de la sincronización de estos documentos al backend