JSON의 연속 스트림 처리
(현재는 사용되지 않게 된) 페이지 http://stream.twitter.com/1/statuses/sample.json는 연속적이고 끝없는 JSON 데이터 스트림을 반환하기 위해 사용되었습니다.
트윗의 라이브 피드에 근거해 시각 효과를 표시할 수 있도록, 제 Web 페이지내의 jQuery(또는 JavaScript, 그러나 바람직하게는 jQuery)를 사용해 처리하고 싶습니다.
는 제가 로는 jQuery입니다.parseJSON
함수는 서버에 의해 모든 데이터가 전송된 후에만 콜백 함수를 실행하지만 실제로는 연속적인 데이터 스트림입니다.어떻게 하면 '발생한 그대로' 데이터를 처리하면서 접속을 계속 실행할 수 있을까요?
이러한 종류의 일은 현재 웹소켓을 사용하는 것이 최선이며, Can에 따르면IUse.Com은 Opera Mini를 제외한 모든 주요 브라우저에서 사용할 수 있습니다(이전 또는 모든 브라우저에 대한 자세한 내용은 해당 링크를 참조하고 [Resources]탭을 클릭하여 더 많은 링크를 표시합니다).개요로서, 웹소켓은 IE 10+, Edge 12+, Firefox 11+(WebWorker 컨텍스트의 경우 38+), Chrome 16+, Opera 12.1+, Safari 7+, Android 4.4+, Opera Mobile 12.1+에서 지원됩니다.
주의: 서비스 워커와 웹 워커에 대해서도 학습하는 것이 좋습니다.다만, 서비스 워커와 웹 워커는 사용 사례와 능력이 다릅니다.
다음과 같습니다.
var connection = new WebSocket(
'ws://html5rocks.websocket.org/echo',
['soap', 'xmpp']
);
일부 이벤트 핸들러를 연결에 바로 연결하면 연결이 열린 시간, 수신 메시지 수신 시간 또는 오류 발생 여부를 알 수 있습니다.
다음과 같이 메시지 전송이 쉬워집니다.
connection.send('your message');
connection.send(binaryData);
자세한 내용은 웹 소켓 소개: 소켓을 웹으로 가져오기를 참조하십시오.
ASP.Net 개발자: 어떤 이유로든 오래된 브라우저를 지원해야 하며 WebSockets를 지원하지 않는 브라우저에 대한 대처법을 스스로 알고 싶지 않다면 SignalR 등의 라이브러리를 사용하는 것을 고려해 보십시오.
오래된 브라우저의 오래된 EventSource API 응답
대부분의 브라우저는 현재 EventSource API를 구현하고 있습니다.이 API는 스트림을 콘텐츠 타입으로 전달할 수 있는 한 긴 폴링을 매우 쉽게 합니다.text/event-stream
오래된 브라우저나 어떤 이유로든 그 콘텐츠 타입을 가질 수 없는 개발자는 같은 작업을 하기 위해 몇 가지 도우미 스크립트를 사용할 수 있습니다.
다음은 예를 제시하겠습니다.
var jsonStream = new EventSource('https://example.com/yourstreamingservice')
jsonStream.onmessage = function (e) {
var message = JSON.parse(e.data);
// handle message
};
이것은 기본적으로 아래에 개략적으로 설명하는 것과 같은 본격적인 버전입니다.
오래된 브라우저에 대한 오래된 서비스 스트리밍의 해답
당신이 원하는 것은 롱 폴링이라고 불립니다. AJAX가 onreadystatechange
말고 해야 합니다전체 스트림이 완료될 때까지 기다리지 말고(완료되지 않을 것이기 때문에) 정기적으로 내용을 검토해야 합니다.하려면 , IE 9 를 해 주세요.iframe
.
대략:
-
onreadystatechange
이벤트 및 현재 문자로 지정된 스트림을 검사하여 하나 이상의 이산 이벤트를 소비하기에 충분한 데이터가 있는지 확인합니다.javascript functionsjavascript 스트링 처리 기능을 이을 수행하려면, 루프할 수 .split, indexOf, indexOf, indexOf, ingof 、 index a 、 프 a a a a a 。 - 콘텐츠가 아직 충분하지 않으면 종료하고 다음 이벤트를 기다립니다.
- 제가 확신하건대 그때마다
onreadystatechange
해, 「」가 기동합니다.responseText
지금까지 수신된 모든 데이터가 됩니다.아직 제대로 처리되지 않은 첫 번째 문자의 위치를 유지하는 영구 변수를 정의합니다. - 하나 이상의 이산 이벤트를 스트림에 표시하기에 충분한 콘텐츠가 있으면 한 번에 하나씩 꺼내 JSON 파서로 전달하여 실제로 텍스트를 개체로 렌더링합니다.정상적으로 사용하세요.
이 HTTP Streaming gist를 참조하거나 SoftwareAs에서 서버를 폴링하는 대체 수단으로 Streaming을 참조하십시오.IE 9 이전 버전을 지원해야 하는 경우iframe
방법을 가르쳐 주세요.
Ajax Design Patterns: Programming and Usability Patterns를 사용한 Web 2.0 사이트 만들기라는 책에서 인용한 내용은 다음과 같습니다.
요약하자면, 서비스 스트리밍은 Javascript 명령 대신 임의의 콘텐츠를 스트리밍할 수 있고 연결의 라이프사이클을 제어할 수 있기 때문에 HTTP 스트리밍 접근 방식을 보다 유연하게 만듭니다.다만, 브라우저간에 일관성이 없는 2개의 테크놀로지와 예측 가능한 휴대성의 문제를 조합하고 있습니다.실험 결과 페이지 스트리밍 기술은 IE [9 이전]와 Firefox 모두에서 작동하지만 서비스 스트리밍은 XMLHTTPRequest 또는 IFrame 중 어느 쪽을 사용하든 Firefox에서만 작동합니다.첫 번째 경우 IE [9 및 그 이전]는 완료될 때까지 응답을 억제합니다.IFrame에서는 회피책을 사용할 경우 다음과 같이 동작합니다.IE [9 and older]는 첫 번째 256바이트 이후에 서버로부터의 메시지를 받아들이기 때문에 메시지를 보내기 전에 256개의 더미 바이트를 보내는 것밖에 할 수 없습니다.그러면 모든 메시지가 예상대로 도착합니다.따라서 IE [9 이상]에서도 완전한 서비스 스트리밍이 가능합니다.
2006년 버전이기 때문에 확실히 구식이지만, 오래된 브라우저를 지원해야 한다면 여전히 유효합니다.
보안 문제
일반 AJAX는 크로스 도메인이 되지 않습니다.즉, (트위터에서 스트리밍을 하고 싶은 것에 주목하고 있습니다) 당신이 요구하는 것을 할 수 없습니다.이것은 JSONP로 해결할 수 있지만, JSONP는 본래 서비스 스트리밍을 할 수 없고, 트위터에서도 제공할 수 없습니다.또한 Cross-Origin Resource Sharing(CORS)도 있지만 트위터는 이를 설정하지 않습니다.이러한 작업을 제휴한 도메인에서만 수행할 수 있습니다.그리고 CORS에는 최신 브라우저가 필요합니다.
따라서 유일한 옵션은 웹 서버에 프록시 서비스를 생성하여 Twitter 요청을 수행한 후 데이터를 전달하는 것입니다.이 작업은 메인 페이지가 제공된 도메인과 동일한 도메인에서만 수행할 수 있습니다.이를 통해 iframe 기술을 사용하여 IE에 적합한 버전을 만들 수도 있습니다.오래된 IE 버전에 관심이 없는 경우, 요청을 하는 도메인을 알고 있다면 도메인 제한을 해소하기 위해 직접 CORS를 구현할 수 있습니다.
클라이언트 소프트웨어를 완전히 제어할 수 있는 경우(기업 인트라넷의 경우 등), 로컬로 실행된 컴파일된 응용 프로그램의 사용자 양식 내에서 웹 브라우저를 호스팅하는 다른 옵션이 있습니다.지금까지 C#로만 해왔는데 다른 언어에서도 가능할 것 같아요.올바른 브라우저 오브젝트를 사용하면 C# 어플리케이션 내에서 호스트되기 때문에 C# 어플리케이션은 도메인 간 보안 제한을 해소하고 모든 페이지 콘텐츠를 읽고 쓸 수 있습니다.당신의 상황이 이 상황인지 의심스럽지만, 다른 사람들이 고마워할 수 있도록 여기에 옵션을 두고 싶었습니다.
최신 브라우저에서 이를 허용하는 오픈 소스 프로젝트가 있습니다(이전 브라우저에서는 jQuery 스타일로 돌아갑니다).콜 구문은 jQuery.ajax와 비슷합니다.
질문에서 지정한 URL이 JSON 응답 스트림을 보냅니다.브라우저의 교차 도메인 보안 제한으로 인해 javascript를 사용하여 액세스할 수 없습니다.AJAX 요청을 사용하여 정기적으로 폴링하거나 사이트를 호스트할 수 있는 브리지 서버 측 스크립트를 서버에 구현해야 합니다.twitter.com
첫 번째가 더 타당해 보입니다.
매우 기본적인 수준의 웹 페이지는 서버에 대한 실시간/실행 연결을 유지할 수 없습니다.웹 브라우저가 서버에 요청을 보냅니다.서버는 응답(HTML 등)을 클라이언트(웹 브라우저)로 되돌립니다.이것을 스테이트리스 모델이라고 생각해 주세요.요청 및 응답이 완료된 후에는 연결이 유지되지 않습니다.
그러므로, 당신은 그것을 직접 해야 돼요.클라이언트 측에서 정기적으로 추가 요청을 호출해야 합니다.
한 가지 방법은 setInterval() 함수를 통해 정기적으로 AJAX/GET 기능을 호출하는 것입니다.예를 들어 다음과 같습니다.
setInterval(function() {
$.ajax({
url: "mydata/get",
success: function(){
// update content.
}
});
}, 5000);
그러면 5초마다 mydata/get(또는 원하는 URL)에 대한 AJAX 요청이 실행됩니다.
언급URL : https://stackoverflow.com/questions/6558129/process-a-continuous-stream-of-json
'source' 카테고리의 다른 글
$190 $190 동기식 또는 비동기식? (0) | 2023.02.14 |
---|---|
워드프레스:관리 옵션 페이지에서 이미지 업로드 (0) | 2023.02.14 |
약속에서 돌아오다() (0) | 2023.02.14 |
관리화면 서브메뉴 항목에 커스텀 HTML 클래스 이름을 추가하는 방법 (0) | 2023.02.14 |
HTML 웹 워커와 Jquery Ajax 호출 (0) | 2023.02.14 |