2

I'm trying to test out gRPC streaming in my react app. Although I'm having some troubles. We've tested our streaming in bloom and it successfully streams an event every 2 seconds up to 8 streams.

However when I try it out in my React Application the stream starts, then nothing happens for quite some time (around about equal to the time it takes to finish streaming all the data), then it only logs out all the data at once.

This is how I have my component set up:

const MyComponent = () => {
  const startStream = () => {
    console.log('stream start')
    const streamer = myService.testStreaming(new Empty(), {})
    streamer.on('error', err => console.log({ err }))
    streamer.on('status', status => console.log({ status }))
    streamer.on('data', response => console.log(response.toObject()))
    streamer.on('end', () => console.log('stream end'))
  }

  useEffect(() => {
    startStream()
  }, [])

  return null
}

As mentioned above, my output is stream start wait +- 15 seconds then 8 lines of responses.

As mentioned, in bloom it successfully sends through a new stream every 2 seconds as expected. Unlike in my React app where it just waits a long time and then triggers the on data callback 8 times immediately.

Bloom

Console

In my Network Tab, the StreamEvents is jsut in a pending start for +- 15 seconds as well.

Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143

1 Answers1

3

You need to make sure you're using the text mode of grpc-web, as the binary format doesn't currently support proper streaming:

https://github.com/grpc/grpc-web/issues/344#issuecomment-433288348

hoffmanc
  • 614
  • 9
  • 16