Why WebTransport cannot connect this QUIC server in Rust

Question

I was create a QUIC server with crate quinn in Rust. code below:

use std::net::SocketAddr;
use quinn::{Endpoint, ServerConfig};
use rcgen::Error;
use rustls::Certificate;

#[tokio::main]
async fn main() {
    println!("start");
    server().await;
    println!("stop")
}

static SERVER_NAME: &str = "localhost";

fn server_addr() -> SocketAddr {
    "127.0.0.1:5001".parse::<SocketAddr>().unwrap()
}

async fn server() {
    let (cert, key) = generate_self_signed_cert().unwrap();
    let config = configure_server(cert, key);
    // Bind this endpoint to a UDP socket on the given server address.
    let endpoint = Endpoint::server(config, server_addr()).unwrap();

    // Start iterating over incoming connections.
    while let Some(conn) = endpoint.accept().await {
        let mut _connection = conn.await.unwrap();
    }
}

fn configure_server(cert: Certificate, key: rustls::PrivateKey) -> ServerConfig {
    ServerConfig::with_single_cert(vec![cert], key).unwrap()
}

fn generate_self_signed_cert() -> Result<(rustls::Certificate, rustls::PrivateKey), Error> {
    let cert = rcgen::generate_simple_self_signed(vec![SERVER_NAME.to_string()])?;
    let key = rustls::PrivateKey(cert.serialize_private_key_der());
    Ok((rustls::Certificate(cert.serialize_der()?), key))
}

Cargo.toml here:

[dependencies]
quinn = "*"
rustls = { version = "*", features = ["dangerous_configuration", "quic"] }
rcgen = "*"
tokio = { version = "1", features = ["rt", "macros", "rt-multi-thread"] }

quite simple, right. I generate a self-signed certification in function generate_self_signed_cert. the code above from this quinn introduction

I run code by cargo run and console output:

start

that indicate it working.

And I wrote some React code below:

function App() {
  async function handle3() {
    let tran = new WebTransport("https://127.0.0.1:5001");
    await tran.ready;
  }
  return (
    <>
      <button onClick={async () => await handle3()}>
        CLICK
      </button>
    </>
  )
}

It try to connect the QUIC server when click button, quite simple, right.

BUT IT NOT WORK!

there some error in devtool console:

Uncaught (in promise) 
WebTransportError { source: "session", streamErrorCode: null, name: "WebTransportError", message: "WebTransport connection rejected", code: 0, result: 0, filename: "", lineNumber: 0, columnNumber: 0, data: null }

you can see the message: WebTransport connection rejected. server not output else. but I don't know why..

I tried connect https://127.0.0.1:5001 or https://localhost:5001 or https://localhost, but not work either I tried modify host file and add a map:

127.0.0.1 localhost

but not work.

How fix this error and connect to the quic server?

Answer 1

while let Some(conn) = endpoint.accept().await {
    let mut _connection = conn.await.unwrap();
}

This is going to accept each incoming connection, then immediately drop the connection, thus closing it. Probably this is your first problem in terms of the WebTransport handshake failing to go through. Possibly also there's additional WebTransport handshaking that needs to be done on top of QUIC and so you need to be using some WebTransport crate rather than just quinn?