【Rust】AxumでWeb Socketの処理を行う

ws モジュールを使用する
https://docs.rs/axum/latest/axum/extract/ws/index.html

#[tokio::main]
async fn main() {
    let app = Router::new().route("/ws", any(handler));
    // Start the server
    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app.into_make_service_with_connect_info::<SocketAddr>()).await.unwrap();
}
async fn handler(ConnectInfo(addr): ConnectInfo<SocketAddr>, ws: WebSocketUpgrade) -> Response {
    println!("{}", addr);
    ws.on_upgrade(handle_socket)
}

async fn handle_socket(mut socket: WebSocket) {
    while let Some(msg) = socket.recv().await {
        let mut msg = if let Ok(msg) = msg {
            msg
        } else {
            return;
        };
        if socket.send(msg).await.is_err() {
            // client disconnected
            return;
        }
    }
}

クライアントサイド

    <textarea id="output" cols="50" rows="10" readonly></textarea><br>
    <input type="text" id="input" placeholder="Type a message" />
    <button onclick="sendMessage()">Send</button>
<script>
        const ws = new WebSocket("ws://192.168.33.10:3000/ws");
        const output = document.getElementById("output");
        const input = document.getElementById("input");
        input.value = "hello";
        
        ws.onmessage = (event) => {
            output.value += `\n${event.data}`;
        };
        function sendMessage() {
            const message = input.value;
            ws.send(message);
            input.value = "";
        }
    </script>

axumでも問題なくできることがわかりました。
なるほど、ちょっと理解しました。