什么是适合使用异步数据流的超文本传输协议内容类型？

Question

我是被动编程的新手。我的应用程序使用了Angular和Spring的组合。

因此，我有一个服务器endpoint，它以1秒的延迟生成Json_值流。[Spring-网络流量]

@CrossOrigin 
@GetMapping(value = "/flux" , produces = MediaType.APPLICATION_STREAM_JSON_VALUE)
public Flux<ObjType> returnFlux()
{
    return Flux.just(Obj1, Obj2, Obj3,...)
        .delayElements(Duration.ofSeconds(1));
}

和我的客户ie。Angular Http预计将在数据块可用时尽快记录响应。我的代码是这样的

public getResponse()
{
    var _reqOptionsArgs= { headers: new HttpHeaders().set( 'Content-Type', 'application/json' ) };

    var observable = this.httpClient.get<any>("http://localhost:8080/flux", _reqOptionsArgs);

    observable.subscribe(val => console.log(val),
                         err => console.error(err),
                         () => console.log('Observer got a complete notification'));
}

现在，我希望我的方法在通量发出json对象后立即在控制台上记录它们。但当flux发出5个值时，浏览器在等待5秒后抛出异常：

SyntaxError: Unexpected token { in JSON at position 8
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:9848:51)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3397:31)
    at Object.onInvokeTask (http://localhost:4200/vendor.js:71849:33)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3396:60)
    at Zone.runTask (http://localhost:4200/polyfills.js:3174:47)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3471:34)
    at invokeTask (http://localhost:4200/polyfills.js:4609:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4646:21)

但是当我触发来自浏览器的localhost:8080/flux时，它会在对象发出后立即打印响应。

可能我在httpClient中为angular中的响应提供了错误的内容类型。但与此同时，我对浏览器如何响应这一大块数据感到好奇。

Answer 1

当JSON无效时，会发生此错误。尝试调试到达客户端的JSON对象的结构。还可以尝试删除超文本传输协议头，让角超文本传输协议客户端自己处理它们

Answer 2

您遇到的特殊错误是，流式JSON（application/stream JSON）和普通的旧JSON（application/JSON）是两种不同的内容类型。流式JSON的不同之处在于它是由另一个值（通常是换行符）分隔的单个JSON对象的集合，因此它本身不是有效的JSON。

话虽如此，使用HttpClient将很难做到这一点——它的设计目的是读取完整响应，然后关闭，而您发送的是JSON流。（本质上，这是一个错误的工作工具。）

您几乎肯定希望使用EventSource，类似于：

var es = new EventSource("http://localhost:8080/flux");
es.onmessage = function(e) {
    console.log(e.data);
}

然后可以调用JSON。在e.data上解析（）或类似内容，然后从中执行您喜欢的操作。

这里唯一的缺点是，EventSource不允许您在没有polyfill的情况下设置HTTP头-但是看起来这可能不是问题。