Server streaming is not working with gRPC-web

[Gumichocopengin8]

tokio = { version = "1.43.0", features = ["full"] }
tokio-stream = { version = "0.1.17", features = ["full"] }
tonic = "0.12.3"
tonic-web = "0.12.3"
tower = "0.5.2"
tower-http = { version = "0.6.2", features = [
  "cors",
  "compression-full",
  "fs",
] }

I use Tonic and Tonic-Web for gRPC-Web without Envoy proxy (as far as I know Tonic-Web takes over Envoy roll).
the Tonic gRPC works in browser network but the .on('data', (data) => {}) callback in frontend does not work. Not sure if it's a tonic issue or gRPC-web issue or my code issue.
Here's the detailed code.

---

I used this official example for server streaming.

tonic/examples/src/streaming/server.rs

Lines 44 to 81 in 86815d8

	type ServerStreamingEchoStream = ResponseStream;
	async fn server_streaming_echo(
	&self,
	req: Request<EchoRequest>,
	) -> EchoResult<Self::ServerStreamingEchoStream> {
	println!("EchoServer::server_streaming_echo");
	println!("\tclient connected from: {:?}", req.remote_addr());
	// creating infinite stream with requested message
	let repeat = std::iter::repeat(EchoResponse {
	message: req.into_inner().message,
	});
	let mut stream = Box::pin(tokio_stream::iter(repeat).throttle(Duration::from_millis(200)));
	// spawn and channel are required if you want handle "disconnect" functionality
	// the `out_stream` will not be polled after client disconnect
	let (tx, rx) = mpsc::channel(128);
	tokio::spawn(async move {
	while let Some(item) = stream.next().await {
	match tx.send(Result::<_, Status>::Ok(item)).await {
	Ok(_) => {
	// item (server response) was queued to be send to client
	}
	Err(_item) => {
	// output_stream was build from rx and both are dropped
	break;
	}
	}
	}
	println!("\tclient disconnected");
	});
	let output_stream = ReceiverStream::new(rx);
	Ok(Response::new(
	Box::pin(output_stream) as Self::ServerStreamingEchoStream
	))
	}

and the following code is the rest of the Rust code.

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
  let server = TonicServer { };

    Server::builder()
        .accept_http1(true)
        .layer(
            CorsLayer::new()
                .allow_origin("http://localhost:5173".parse::<HeaderValue>().unwrap())
                .allow_headers([
                    HeaderName::from_static("content-type"),
                    HeaderName::from_static("x-user-agent"),
                    HeaderName::from_static("x-grpc-web"),
                ])
                .allow_methods([Method::POST])
                .max_age(Duration::from_secs(60) * 30),
        )
        .layer(tonic_web::GrpcWebLayer::new())
        .add_service(ServiceServer::new(server))
        .serve("127.0.0.1:8080".parse().unwrap())
        .await?;
  Ok(())
}

in frontend (React19 + Vite + gRPC-web),
I use "google-protobuf": "^3.21.4", "grpc-web": "^1.5.0".

protoc command for gRPC-web

protoc -I=./proto \
		--js_out=import_style=commonjs,binary:./src\
		--grpc-web_out=import_style=typescript,mode=grpcweb:./src\
		./proto/*.proto

function TestComp() {
  useEffect(() => {
    const grpcClient = new ServiceClient('http://localhost:8080');

    grpcClient.checkHealthStatus(new Empty(), null).then((res: CheckHealthStatusResponse) => {
      console.log(res, res.getStatus()); // unary RPC works
    });

    const stream = grpcClient.serverStreamingEcho(new Empty());
    stream
      .on('data', (data) => {
         // this code block wont be executed. Nothing is displayed in browser console.
        // however, server streaming is working in browser Network tab and Postman
        console.log('data');
      })
   return () => {
      stream.cancel();
    };
  }, []);

  return <p>testing server streaming in browser console log</p>
}

export default TestComp;

[som3on3]

for grpc-web, binary stream is not working only text stream works.
"Server-side Streaming RPCs (example) (NOTE: Only when grpcwebtext mode is used.)"

protobuf-ts works with binary.

[Gumichocopengin8]

protoc -I=../proto \
                --js_out=import_style=commonjs,binary:./src/grpc_web_proto_client \
-               --grpc-web_out=import_style=typescript,mode=grpcweb:./src \
+               --grpc-web_out=import_style=typescript,mode=grpcwebtext:./src \
                ../proto/*.proto

I changed it like this but still doesnt work. Not sure if I need to change something in Rust Tonic.
I wonder if Buf and connect-es works with binary. couldn't find doc

[som3on3]

i use only:

Server::builder()
        .add_service(
            tonic_web::enable(
                MicroServiceServer::new(greeter)
            )
        )
        .serve(addr)
        .await?;

in tonic, where greeter is the service.
i also use

match tx.try_send(

instead of

match tx.send(

But for web i used protobuf-ts because i use angular.
but when i tested i know it only worked with grpcwebtext.
Tho, did you tried connectrpc? Some people say it's the best for web.

[Gumichocopengin8]

Thanks for testing it. Hmm, that's strange. Mine still doesn't work on Chrome and Firefox. The only difference between us is macOS version. I use Sequoia 15.3, but I don't think that's the issue.
Which node, rust and protoc versions are you using? I use v22.13.1 with npm v11.0.0. Rust version is 1.84.1, protoc --version : libprotoc 29.3.

[som3on3]

node: v20.15.1
npm: 10.8.3
rustc: 1.84.1 (e71f9a9a9 2025-01-27) (Homebrew)
protoc: libprotoc 3.20.3

[som3on3]

Also, don't know if matters, but i think it might, i am using an intel mac

[som3on3]

updated node to: v22.13.1
and npm to: 10.9.2
LTS versions, your code still streams

[Gumichocopengin8]

I thought protoc version matters, but still didnt work with libprotoc 3.20.3. I dont wanna believe macOS version or CPU matters, but I can't think of other possibilities.