Question

我在服务器端使用Spring Webflux返回Flux对象。当我通过浏览器访问端点时，它按预期方式工作，我得到了5个对象，然后流停止了。

但是，当尝试通过Angular EventSource进行操作时，由于缺少更好的单词，流似乎停留在“重复”上。我如何告诉EventSource从服务器发送完所有物品后停止请求更多物品？

代码很简单，但是我以前从未使用Angular进行事件源。

服务：

@Injectable({providedIn: 'root'})
export class VideoSourceService {

  private videoDataSource: BehaviorSubject<Array<Video>> = new BehaviorSubject([]);

  videoData = this.videoDataSource.asObservable();

  startVideoStream(source: string) {
    const eventSource = new EventSource(source + "/videos");

    eventSource.addEventListener('message', message => {
      this.videoDataSource.next([...this.videoDataSource.value, JSON.parse(message["data"])]);
    });
  }

消费者：

@Component({
  selector: 'app-videos',
  templateUrl: './videos.component.html',
  styleUrls: ['./videos.component.scss']
})
export class VideosComponent implements OnInit {
  videos$: Observable<Video[]>;

  constructor(public videoSourceService: VideoSourceService) {

  }

  ngOnInit(): void {
    this.videoSourceService.startVideoStream(`${environment.apiUrl}`);

    this.videos$ = this.videoSourceService.videoData;
  }
}

为了完整起见，我的后端方法：

@GetMapping(value = "videos", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<Video> getVideos() {

    return videoRepository.findAll();
}

由于后端可以在Chrome中正常工作，因此我假设问题出在我的Angular代码上吗？

Answer 1

结果证明这是一个简单的问题，完成连接后，您需要手动关闭连接。

  startVideoFavoriteStream(source: string) {
    //{...}

    eventSource.onerror = () => {
        eventSource.close();
    }
  }

可以解决问题。

Angular 7 EventSource会无限期地获取流

1 个答案: