Spring 如何使用Vue中的RSockets将信息检索到前端？

我后面的服务工作正常

很抱歉，我将添加大部分代码，以便让那些喜欢在项目中实现它的人能够理解和复制它请直接转到requestStream或在末尾查看问题。

ProductSocketController

public class ProductSocketController {
    
    private final ProductService service;

    @MessageMapping("todos")
    public Flux<ProductDto> getAll(){
        return this.service.getAll();
    }

@RestController
@RequestMapping("product")
@CrossOrigin(origins= "*", methods = {RequestMethod.GET, RequestMethod.POST})
public class ProductController {
    
    private final Mono<RSocketRequester> requester;
    
    @GetMapping(value = "/socket/all", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<ProductDto> allBySocket(){
        return this.requester.flatMapMany(r -> r.route("todos")
                .data(new ProductRequestDto())
                .retrieveFlux(ProductDto.class));
    }
}

当我尝试将其传递到前端时发现问题，因为在与RSockets建立连接时，它是成功的，但我在Vue中遇到此错误

这是我用于连接的方法，请参阅requestStream部分（元数据）

我认为错误在元数据中

这是浏览器控制台发送的错误

@Service
public class ProductService {
    
    @Autowired
    private ProductRepository repository;
    
    public Flux<ProductDto> getAll(){
        return this.repository.findAll()
        .map(EntityDtoUtil::toDto);
    }
}

data: {
    "id": 1,
    "description": "memo",
    "price": 200,
    "subscriber": "memo"
}

data: {
    "id": 2,
    "description": "juan",
    "price": 2054,
    "subscriber": "juan"
}

data: {
    "id": 3,
    "description": "camara",
    "price": 600,
    "subscriber": "memo"
}

 connect() {
      console.log("connecting with RSocket...");
      const transport = new RSocketWebSocketClient({
        url: "ws://localhost:6565/rsocket",
      });
      
      const client = new RSocketClient({
        // send/receive JSON objects instead of strings/buffers
        serializers: JsonSerializers,
        metadata: IdentitySerializer,
        setup: {
          // ms btw sending keepalive to server
          keepAlive: 60000,
          // ms timeout if no keepalive response
          lifetime: 180000,
          // format of `data`
          dataMimeType: "application/json",
          // format of `metadata`
          metadataMimeType: "message/x.rsocket.routing.v0",
        },
        transport,
      });
      // error handler
      const errorHanlder = (e) => console.log(e);
      // response handler
      const responseHanlder = (payload) => {
        console.log(payload.data);
      };

      client.connect().subscribe({ 
        onComplete: (socket) => {
          socket
            .requestStream({
              metadata: String.fromCharCode("product/socket/1".length) + "product/socket/1"
            })
            .subscribe({
              onComplete: () => console.log('complete'),
              onError: errorHanlder,
              onNext: responseHanlder,
              onSubscribe: (subscription) => {
                subscription.request(2147483647); // set it to some max value
              },
            });
        },
      });
    },
}