연속적인 JSON 스트림 처리
(현재는 없어진) 페이지 http://stream.twitter.com/1/statuses/sample.json 은 JSON 데이터의 연속적이고 끝없는 스트림을 반환하는 데 사용되었습니다.
트윗의 라이브 피드를 기반으로 시각 효과를 표시 할 수 있도록 내 웹 페이지 내에서 jQuery (또는 JavaScript, 그러나 바람직하게는 jQuery)를 사용하여 처리하고 싶습니다.
내가 아는 한 jQuery parseJSON
함수는 모든 데이터가 서버에서 보낸 후에 만 콜백 함수를 실행하지만 실제로는 연속적인 데이터 스트림입니다. "발생하는대로"데이터를 처리하지만 연결을 계속 실행하려면 어떻게해야합니까?
이러한 종류의 작업은 현재 WebSockets를 사용하여 가장 잘 수행 되며 CanIUse.Com에 따르면 Opera Mini를 제외한 모든 주요 브라우저에서 사용할 수 있습니다 (이전 또는 모든 브라우저에 대한 자세한 내용은 해당 링크를 참조하고 더 많은 링크를 보려면 리소스 탭을 클릭하십시오). . 개요로서 웹 소켓은 IE 10+, 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);
이 작업을 수행하는 방법에 대한 전체 설명은 WebSocket 소개 : 웹 에 소켓 가져 오기를 참조하십시오 .
ASP.Net 개발자 : 어떤 이유로 오래된 브라우저를 지원해야하고 WebSocket을 지원하지 않는 브라우저를 처리하는 방법을 스스로 파악하고 싶지 않다면 SignalR 과 같은 라이브러리를 사용하는 것이 좋습니다 .
이전 브라우저를위한 이전 EventSource API 답변
대부분의 브라우저는 이제 스트림이 content-type으로 전달 될 수있는 한 긴 폴링을 매우 쉽게 만드는 EventSource 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
이벤트에 응답 하고 현재 캐릭터에게 주어진 스트림을 조사하여 하나 이상의 개별 이벤트를 소비하기에 충분한 데이터가 있는지 확인합니다. 자바 스크립트 문자열 처리 함수를 사용하여 스트림을 직접 구문 분석해야합니다. 분할, indexOf, 정규식, 루핑 등의 조합을 사용하여이 작업을 수행 할 수 있습니다. - 아직 콘텐츠가 충분하지 않으면 종료하고 다음 이벤트를 기다립니다.
onreadystatechange
핸들러가responseText
실행될 때마다 지금까지 수신 된 모든 데이터가 될 것이라고 확신합니다 . 아직 제대로 처리되지 않은 첫 번째 문자의 위치를 유지할 영구 변수를 정의합니다.- 하나 이상의 개별 이벤트가 스트림에 나타날 수있는 충분한 콘텐츠가 있으면 한 번에 하나씩 꺼내서 JSON 파서에 전달하여 실제로 텍스트를 개체로 렌더링합니다. 정상적으로 사용하십시오.
하나의 리소스에 대한 이 HTTP 스트리밍 요점 을 확인 하거나 SoftwareAs 에서 서버를 폴링하는 대신 스트리밍을 확인하십시오 . IE 9 또는 이전 버전을 지원해야하는 경우 해당 iframe
방법 을 사용해야합니다 .
다음은 Ajax Design Patterns : Creating Web 2.0 Sites with Programming and Usability Patterns 책 의 인용문입니다 .
요약하면 Service Streaming은 Javascript 명령이 아닌 임의의 콘텐츠를 스트리밍 할 수 있고 연결의 수명주기를 제어 할 수 있기 때문에 HTTP 스트리밍 접근 방식을보다 유연하게 만듭니다. 그러나 브라우저간에 일관성이없는 두 가지 기술을 예측 가능한 이식성 문제와 결합합니다. 실험에 따르면 페이지 스트리밍 기술은 IE [9 및 이전 버전]과 Firefox에서 모두 작동하지만 서비스 스트리밍은 XMLHTTPRequest 또는 IFrame이 사용되는지 여부에 관계없이 Firefox에서만 작동합니다. 첫 번째 경우 IE [9 및 이전]은 응답이 완료 될 때까지 응답을 억제하고, IFrame은 해결 방법이 사용되면 작동합니다. IE [9 및 이전]은 처음 256 바이트 이후에 서버에서 메시지를 수신하므로 유일한 것은 메시지를 보내기 전에 256 더미 바이트를 보내는 것입니다. 이 후 모든 메시지가 예상대로 도착합니다.
2006 년에 출시되었으므로 확실히 구식이지만 이전 브라우저를 지원해야하는 경우 여전히 관련이 있습니다.
보안 문제들
일반 AJAX는 도메인 간 이동할 수 없습니다. 즉, 이제는 귀하가 요청한 작업을 수행 할 수 없음을 의미합니다. 이것은 JSONP로 해결할 수 있지만 JSONP는 본질적으로 서비스 스트리밍이 불가능하며 어쨌든 트위터에서 제공하지 않습니다. 이 또한 간 리소스 공유 (CORS)는 그러나 트위터는 당신을 위해 설정 않을거야 - 그들은 단지 그들과 함께 제휴 도메인에 대해 할 거라고 물건의 종류가 있다고. 그리고 CORS에는 최신 브라우저가 필요합니다.
Your only option is thus to create a proxy service on your web server that performs the requests to twitter for you and then hands out the data. This can only be done from the same domain as the main page was served from. Doing this would also allow you to create a version that will work for IE using the iframe technique. If you don't care about old IE versions, you can implement CORS yourself to defeat the domain restriction, if you know the domain that will be making the requests.
If you have full control of the client software (like if this is for a corporate intranet) there is another option: hosting the web browser inside of a compiled locally-executed application's user form. I have only done this using C# but I imagine it's possible from other languages. When you use the right browser object, because it's hosted inside a C# application, the C# application can defeat the cross-domain security restrictions, reading and writing all page content no matter what domain it comes from. I doubt your situation is this one but I wanted to put the option here for others who might appreciate it.
I've got an open source project which allows this on modern browsers (and falls back to a jQuery-style on older ones). The call syntax is similar to jQuery.ajax:
The url you have specified in your question sends a JSON response stream. Due to cross domain security restrictions in browsers you cannot access it using javascript. You will need to implement a bridge server side script on your server which you could poll at regular intervals using AJAX requests or host your site on twitter.com
. The first seems more feasible.
A web page at a very fundamental level can't keep a live/running connection to a server. Web browser sends a request to the server. Server sends a response (the HTML and more) back to the client (web browser). Think of this as a stateless model - no connection is ever kept alive after the request and response have been completed.
Therefore, you have to do it yourself. You have to invoke additional, periodic requests from the client-side.
One way would be to periodically call your AJAX/GET functionality via setInterval() function. For example:
setInterval(function() {
$.ajax({
url: "mydata/get",
success: function(){
// update content.
}
});
}, 5000);
This will fire off an AJAX request to mydata/get (or whatever URL you want to use) every 5 seconds.
참고URL : https://stackoverflow.com/questions/6558129/process-a-continuous-stream-of-json
'Program Tip' 카테고리의 다른 글
'this'는 JavaScript 클래스 메서드에서 정의되지 않았습니다. (0) | 2020.11.28 |
---|---|
Java에서 패키지 개인 클래스의 장단점? (0) | 2020.11.28 |
MongoDB에 저장된 배열이 순서를 유지합니까? (0) | 2020.11.28 |
반복기에서 map () 사용 (0) | 2020.11.28 |
Perl에서 readdir보다 glob을 선호하는 이유는 무엇입니까 (또는 그 반대로)? (0) | 2020.11.28 |