여러 브라우저 탭과 최신 브라우저의 클라이언트 상태를 다루는 오픈 소스 JavaScript 라이브러리가 있습니까? [닫은]

탭, 브라우저 창, 동일한 도메인 창 등에서 상태를 공유 할 수있는 최신 브라우저로 만든 몇 가지 새로운 HTML5 기능이 있습니다. 클라이언트와 탭 및 / 또는 창 사이의 상태를 지능적으로 관리합니다.

현재 Backbone.js와 같은 라이브러리가있어 단일 탭 또는 단일 창에서 상태를 관리 할 수 있습니다. 서버에 의존하지 않고 전역 상태, 탭 특정 상태 및 크로스 탭 이벤트를 관리하는 여러 탭 (또는 창)에 도움이되는 내용이 있습니까?

— psr
소스

일부 웹 앱 (예 : Trello)은 동일한 브라우저에서 여부에 관계없이 WebSocket을 사용하여 모든 클라이언트를 동기화함으로써이를 우회합니다. 그러나 유용 할 수 있습니다. 이와 같은 라이브러리를 작성하는 경우 SharedWorkers는 여기에서 필요한 많은 작업을 수행하지만 아직 잘 지원되지 않으므로 SharedWorkers의 폴리 필 위에 얇은 레이어를 만듭니다. 이 작업을 수행하기위한 해킹은 localStorage 이벤트이며, 탭을 독립적으로 연 경우에도 발생합니다.

— mahemoff

저의 대학 선생님이 저에게 가르쳐주었습니다 HTTP is great (and beutiful) because it is stateless. 내가 업계에 합류 한 이래로 나는 그 beuty를 찾고 있지만 그것을 찾을 수는 없습니다. 모두는 당신이 보는 상태를 유지하는 것에 대해서만 이야기합니다!

— Dipan Mehta

@ DipanMehta : 당신이 RFC2616을 보면, 당신이 "아름다움"부분에 대해 선생님과 동의 할 것입니다 확실하지 않습니다 :) 우리가 그것을 도살하고 있다는 것을 ...

— haylem

상태 비 저장 및 웹 응용 프로그램은 잘 어울리지 않습니다. 로그인 상태와 같은 것은 거의 없습니다. 당신이 파일을 요구하는 사람에게 아주 작은 파일을 제공한다면 좋을 것 같습니다.

— psr

HTML5 트릭을 사용하여 웹 사이트의 모든 열린 탭 사이에서 통신 하는 작은 라이브러리 를 작성했습니다 .

— catamphetamine

답변:

짧은 답변:

당신은 할 수없는 정말 다른 하나 개의 탭에서 상태 정보를 전달 ...

긴 대답 :

당신은 할 수 진정으로 , 다른 하나 개의 탭에서 상태 정보를 전달하는 이 샌드 박스 보안의 매우 심각한 위반이 될 것처럼.

그러나 다음과 같은 방법으로 두 탭간에 상태를 간접적으로 전달할 수 있습니다 .

클라이언트-서버 통신 (WebSocket, AJAX 호출 등)
브라우저 확장 (이를 우회 할 수 있으며 일부 브라우저는 백그라운드 페이지, 탭 및 컨텐츠 스크립트 간 통신을 위해 메시지 전달 시스템을 구현하는 API를 제공합니다 ),

또 다른 옵션은 쿠키를 통해 단순히 두 개의 탭 사이에 정보를 전달하는 것이지만 문제가 발생할 가능성이 높으며 브라우저에 따라 다르며 페이지를 다시로드해야 합니다. 그러나 다른 사람이 한 일 을 ) .

따라서 브라우저 확장은 분명히 상당히 제한적인 경로이므로 클라이언트-서버 통신의 길을 가고 클라이언트가 서버에 이벤트를 게시 한 다음 다시 전달하는 시스템을 개발해야합니다 (또는 다른 종류의 브로드 캐스트). 선택한 통신 프로토콜을 통해 다른 클라이언트에게.

업데이트 1 : 누군가 주석을 제거하기 전에 주석에서 언급했듯이 (받은 편지함에 표시되지 않으므로 신용을 줄 수 없습니다.)

HTML5는 window.postMessageAPI를 소개합니다 .

실제 예는 John Resig의 Cross-Window Messaging 블로그 게시물을 참조하십시오 . 매우 흥미롭게도,이 게시물에 대한 의견을 보면 Malte 라는 누군가 가 최신 브라우저에서 사용하기 위해 작성한 라이브러리window.postMessage 또는 이전 브라우저의 쿠키 기반 버전을 언급 한 것을 알 수 있습니다 .

자세한 내용과 예를 보려면 다음을 읽으십시오.

MDC 의 window.postMessage페이지,
David Walsh 의 블로그 게시물 (데모는 깨짐) ,window.postMessage
HTML5 웹 메시징 초안 문서,
추가 링크가있는 이 Ajaxian 쓰기 window.postMessage.

업데이트 2 :

2012-03-04와 같이 HTML5 사양은 여전히 초안이므로 일부 기능 은 제거 될 수 있습니다 . 그래서 조심 해서 사용하십시오 ...

— Haylem
소스

HTML5가 실제로 window.postMessage API를 도입했기 때문에 분명히 잘못되었습니다.

— haylem

또한, Cross-Window Messaging 에 대한 John Resig의 블로그 게시물 과 주석 을 읽으면 Malte 라는 사람 이 최신 브라우저에서이 라이브러리를 사용하기 위해 작성한 [library] [3] 또는 쿠키 기반 버전을 언급 한 것을 볼 수 있습니다. 오래된 브라우저, 그래서 내 쿠키는 그렇게 미친 것이 아니었다.

— haylem

최근에 로컬 저장소를 사용하여 창 사이의 브로드 캐스트 메시징을 구현하는 Intercom을 발견했습니다 . 로컬 스토리지는 onstorage데이터가 변경 될 때 이벤트 ( )를 발생 시키므로 폴링이 필요하지 않습니다. 인터콤을 사용하면 도메인의 모든 페이지가 열린 방식에 관계없이 통신 할 수 있습니다.

— josh3736
소스

창 (페이지)이 동일한 도메인 (원본)에서 온 경우 localStorage데이터를 공유하고 메시지를 브로드 캐스트하는 데 사용할 수 있습니다. 한 가지 고려해야 할 사항은 각 브라우저 창 (페이지)이 별도의 스레드에서 작동한다는 것입니다. 따라서 우리는 창간 통신에 대해 이야기하고 있다면 멀티 스레딩에 대해서도 이야기하고 있습니다.

localStorageIE와 관련된 몇 가지 문제 도 고려해야합니다 .

IE8에서 localStorage에 대한 몇 가지 테스트를 수행했습니다. localStorage에 대한 수천 번의 변경 후 동일한 출처의 창에서 'storage'이벤트 수신이 중지됩니다. 또한 동일한 localStorage 항목에서 읽으려고하면 값이 다른 창에서 다를 수 있습니다. 따라서 IE8은 localStorage를 지원하지 않는다고 말하고 싶습니다.
IE9 및 IE10은 localStorage가이 창에서 변경된 경우에도 'storage'이벤트 핸들러를 호출합니다 ( 이는 spec과 반대 임).
IE11 에는 알려진 문제 가 있습니다 .

최근에 창간 통신 라이브러리를 게시했습니다 (모든 기능은 추가 정보에 설명되어 있음). 스레드 안전 데이터 공유, 이벤트 브로드 캐스팅을 제공합니다. 또한 일부 IE 문제를 해결합니다 (IE8은 확실히 지원되지 않습니다. 다른 원점 부모 내부에 iframe이있는 IE11 버그는 IE 수정으로 만 해결할 수 있습니다-IE11 업데이트 대기 중).

— 유진 쿠도이
소스