programing

오프라인 / 온라인 데이터 동기화 설계 (Javascript)

itsource 2021. 1. 16. 09:45
반응형

오프라인 / 온라인 데이터 동기화 설계 (Javascript)


저는 현재 오프라인 지원을 위해 모든 html5 기능을 사용하여 오프라인 웹앱을 작성하는 중입니다. 그러나 지금부터 오프라인 데이터가 서버로 전송되고 서버 데이터가 클라이언트로 다시 전송되도록하는 동기화 모듈 작성에 대해 생각하고 있습니다. 이제 나는 이것이 이전에 이루어 졌다고 확신합니다. 모바일 장치와 다른 많은 것들에 영향을 미치는 꽤 고전적인 디자인 문제를 의미합니다. 그래서 누군가가 이런 종류의 좋은 디자인 리소스를 알려줄 수 있는지 궁금합니다.

이제 저는 이것에 대해 너무 정교 할 필요가 없습니다. 동일한 데이터에 액세스하는 여러 사용자를 처리하지 않고 충돌을 병합하지 않는 것이 기쁩니다 (최신 정보 만 취함).하지만 여전히 다음과 같은 디자인을 원합니다. 나중에 이러한 옵션을 허용합니다.

또한 이러한 유형의 것을 구현하는 오픈 소스 프로젝트가 있습니까? 나는 다른 사람의 코드를 뜯어 내지 않고 (라이센스가 허용하는 경우) 기꺼이 이식 할 수 있습니다.


비슷한 디자인 (아직 시도하지 않음)에 대한 나의 계획은 PouchDB 와 같은 것을 사용 하여 데이터를 로컬에 저장 한 다음 원격 소파 인스턴스와 동기화하는 것입니다.


비슷한 문제가있었습니다. 순전히 JSON 입출력 접근 방식을 사용하기로 결정했습니다. 양식 제출에 대한 해결책은 다음과 같습니다.

  1. 양식 제출 이벤트 잡기
  2. 사용자가 온라인 상태인지 확인
  3. 사용자가 온라인 인 경우 일반 양식 POST로 양식을 제출하십시오.
  4. 경우 사용자가 오프라인 다음 JSON 요청을 캐릭터 라인 화하고 로컬로 저장 (I는 웹 SQL 데이터베이스를 사용하기로 결정). 대기열 테이블은 단순히 Uri 및 Payload입니다.

그런 다음 온라인 / 오프라인 이벤트에 대한 글로벌 이벤트 후크가 있습니다. 사용자가 다시 온라인 상태가되면 큐를 확인하고 큐에 항목이 있으면 JSON POST 요청으로 전송합니다.

주로 JSON 데이터 가져와 오프라인 사용을 위해 캐싱하는 관심이 있다면 jquery.offline을 살펴 보십시오 .

양방향 동기화의 문제는 대기열에있는 CRUD 작업으로 로컬 캐시 목록을 업데이트해야한다는 것입니다.

이 작업을 수행하는보다 일반적인 방법을 찾고 싶습니다.


꽤 멋진 동기화 및 충돌 해결 기능이있는 Node MVC 프레임 워크 인 Derby를 확인하십시오. http://derbyjs.com/


우리 팀에서는 이미 오프라인 / 온라인 모드로 앱을 개발했습니다.

다음 라이브러리를 사용하고 있습니다.

랙 오프라인을 사용하여 페이지에서 콘텐츠를 렌더링하기 위해 모든 리소스 파일과 jst 템플릿을 캐싱합니다. backbonejs 및 backbonejs-localStorage는 클라이언트에서 MVC 앱을 만드는 데 도움이됩니다. 그것은 꽤 굉장합니다, 당신은 그것을 시도해야합니다. 우리는 항상 데이터 저장을 위해 localstorage를 사용하고 있습니다. 예를 들어 모델 객체에 대한 게시물을 생성하고 localStorage에 저장할 때 동기화를위한 큐를 트리거합니다 (동기화 프로세스를 자동 실행하기 위해 타이머 백그라운드 작업자에 의해 수행됨). 각 모델에 대해 큐 동기화 트리거에 의해 실행되어야하는 별도의 동기화 클래스가 있습니다. navigator.onLine => true이면 업데이트 할 데이터와 함께 서버에 요청을 보냅니다. 브라우저를 닫아도 localStorage에 대기열이 있기 때문에 데이터가 손실되지 않습니다. 다음 번에 클라이언트는 navigator.onLine => true로 처음로드 할 때 데이터를 동기화합니다.

랙 오프라인을 사용하는 방법은 github에서 내 작은 프로젝트를 확인할 수 있습니다.

포모 도로 앱

행운을 빕니다!


나는 같은 문제에 직면했고 결국 저장을 위해 XML 파일을 사용하고 연결이 가능하자마자 변경 사항을 추적하고 자동으로 커밋하기 위해 자식을 사용했습니다. 동기화는 쉘 스크립트의 일반적인 git commit / push / pull 명령과 스크립트를 시작하는 cronjob으로 수행됩니다. JSON을 텍스트 파일에 저장하는 경우에도 작동합니다.


나는 현재 유사한 웹 앱에서 작업하고 있습니다. 이러한 워크 플로를 만들기로 결정했습니다.

  1. 양식이 실제로 제출되지 않음- "제출"단추는 실제로 직렬화 된 양식 데이터를 localStorage (일부 대기열)에 저장합니다. 이렇게하면 제출 캡처 문제와 양식 제출 중 연결 해제를 처리하기 위해 추가 오류 처리 코드를 작성하지 않아도됩니다.
  2. 데이터 저장 후 전송 스크립트가 트리거됩니다. 온라인 / 오프라인 상태를 확인합니다.
  3. 온라인 상태에서는 최신 데이터를 대기열에서 서버로 전송 (AJAX 요청)하고 성공하면 대기열에서 삭제합니다 (짧은 시간 초과 후 대기열에서 다음 데이터를 계속 전송).
  4. (setTimeout ()에 의해) 일정 시간이 지나면 다시 확인합니다.

잠재적으로 무거운 Ext JS / Sencha 프레임 워크를 사용하려는 경우 오프라인 (예 : localStorage) 지원이있는 멋진 데이터 API와 로컬 후 서버에 대한 쓰기를위한 프록시 접근 방식이 있습니다. Sencha Touch (모바일 전용)를 사용합니다.

웹 스토리지 디버깅에 대해서는 Weinre를 확인하십시오.


DerbyJS가 아마도 최고의 솔루션이었을 것입니다. 그러나 Derby는 아직 개발 중이며 오프라인 지원은 계획 단계 일 뿐이며 아직 구현되지 않았습니다. Google 그룹 ( http://groups.google.com/group/derbyjs/browse_thread/thread/7e7f4d6d005c219c )에서 향후 계획에 대한 추가 정보를 찾을 수 있습니다.


개인적으로 온라인 / 오프라인 여부를 확인하는 indexedDB API 위에 래퍼를 작성하는 것이 좋습니다.

  • 오프라인 인 경우 indexedDB에 저장하고 모든 문서에서 지속 플래그를 false로 설정하십시오.
  • 온라인 인 경우 persisted가 거짓 인 모든 문서를 가져 와서 mongodb 또는 백엔드의 동등한 항목에 저장 한 다음 새 문서를 indexedDB와 서버 모두에 저장하고 persisted 플래그를 true로 설정하십시오.

나는 작은 것을 썼다

지속 형 플래그를 자동으로 설정하고 이러한 문서의 동기화를 백엔드로 터널링하려면 터널을 확장해야합니다.

참조 URL : https://stackoverflow.com/questions/3285348/offline-online-data-synchronization-design-javascript

반응형