앵귤러 5에서 스프링부츠 2에서 발행한 json 스트림 처리 방법.

앵귤러 5에서 스프링부츠 2에서 발행한 json 스트림 처리 방법.

Spring boot 2 WebFlux는 새 버전에서 Json 스트림을 생성합니다.

예를들면

@GetMapping(value = "stream", produces = APPLICATION_STREAM_JSON_VALUE)
public Flux<Data> stream() {
    return Flux.interval(Duration.ofSeconds(1)).map(Data::new);
}

1초마다 새로운 데이터를 생성합니다.

{"value":"1"}
{"value":"2"}
{"value":"3"}
{"value":"4"}
{"value":"5"}
{"value":"6"}

나는 각진 5 http 클라이언트를 시도해 보았습니다.

findAll(): Observable<Data> {
   return this._http.get<Data>(this.url);
}

하지만 저는 반응적이기를 원하기 때문에 효과가 없습니다. 연결이 닫힐 때까지 결과를 캐시하기 때문에 결과를 보내지 않습니다.

각도 5에서 이 Json을 처리하는 가장 좋은 방법이 무엇인지 묻고 싶습니다.

아직 공식적인 해결책이 없는 것으로 알고 있습니다(19.08.2018). 하지만 몇 가지 해결책을 찾았습니다.의 각 방법HttpClient가지다config논쟁, 당신이 통과할 수 있는 곳.responseType그리고 다른 것들도.아래와 같은 설정을 혼합했습니다.

{observe: 'events', responseType: 'text', reportProgress: true}

그러면 0에서 4 범위의 지정된 유형의 이벤트가 수신됩니다.적어도 내 경우에는.type3은 현장에 있던 흥미로운 내용이었습니다.partialText하지만 경고 - 당신의 경우에 그 메시지들(에)partialText필드)는 다음과 같이 표시됩니다.

메시지 1개:

{"value":"1"}

메시지 2개:

{"value":"1"}
{"value":"2"}

메시지 3개

{"value":"1"}
{"value":"2"}
{"value":"3"}

기타... 그래서, 나는 아래와 같이 그것을 관리했습니다:

method(url, /*if post - body,*/
      {observe: 'events', responseType: 'text', reportProgress: true})
      .pipe(
        filter(e => e.type === 3 && e.partialText),
        map(e => {
          const partials = e.partialText.trim().split('\n');
          return JSON.parse(partials.pop());
        })
      );

서버에서 보낸 이벤트를 사용하면 다음과 같이 수행할 수 있습니다.

import * as EventSource from 'eventsource';
...

const eventSource = new EventSource("http://www.example.com/stream");

eventSource.onmessage = (event) => {
  const data = JSON.parse(event['data']);
}

브라우저 클라이언트는 서버에서 보낸 이벤트 또는 웹 소켓을 사용하는 것 외에는 JSON 스트림(애플리케이션/스트림+json)을 사용할 방법이 없습니다.

설명한 요구사항과 기술로 WebSocket이 더 적합합니다.

그것은 NDJ on 형식입니다.저는 다음과 같이 처리했습니다.

let handled = 0
http.get<any>("http://localhost:9000/myapi", {
    observe: "events",
    reportProgress: true,
    responseType: "text" as "json",
}).pipe(
    filter((e: any) => e.type === HttpEventType.DownloadProgress && e.partialText),
    map(e => e.partialText.trim().split("\n"))
).subscribe((arr) => {
    for (let i = handled; i < arr.length; i++) {
        try {
            console.log(JSON.parse(arr[i])) // Do obs.next(obj) here
            handled = i + 1
        } catch (e) { }
    }
})

해당 코드를 관찰 가능한 코드로 래핑하여 다음과 같이 만들 수 있습니다.obs.next(JSON.parse(arr[i]))어디서console.log에 있습니다.

제가 생각하는 것은, 아마도 당신이 화재 발생 시 열린 연결( 가져오기/ 가져오기 프로세스)을 유지하고 작업을 잊어버린 다음, 다른 비동기 루프에서 저장된 내용이 아닌 다른 내용이 있는지 확인하여 저장하고 표시할 수 있을 것입니다.

아마도요.

언급URL : https://stackoverflow.com/questions/49065527/how-to-handle-json-stream-issued-by-spring-boot-2-in-angular-5