fix(webrtc example): clarify idle connection timeout

When I ran the `example/browser-webrtc` example I discovered it would break after a ping or two.
The `Ping` idle timeout needed to be extended, on both the server and the wasm client, which is what this PR fixes.
I also added a small note to the README about ensuring `wasm-pack` is install for the users who are new to the ecosystem.

Fixes: #4950.

Pull-Request: #4966.

examples/browser-webrtc/README.md

@@ -5,6 +5,8 @@ It uses [wasm-pack](https://rustwasm.github.io/docs/wasm-pack/) to build the pro
 
 ## Running the example
 
+Ensure you have `wasm-pack` [installed](https://rustwasm.github.io/wasm-pack/).
+
 1. Build the client library:
 ```shell
 wasm-pack build --target web --out-dir static

examples/browser-webrtc/src/lib.rs

@@ -15,16 +15,21 @@ use web_sys::{Document, HtmlElement};
 pub async fn run(libp2p_endpoint: String) -> Result<(), JsError> {
     tracing_wasm::set_as_global_default();
 
+    let ping_duration = Duration::from_secs(30);
+
     let body = Body::from_current_window()?;
-    body.append_p("Let's ping the WebRTC Server!")?;
+    body.append_p(&format!(
+        "Let's ping the rust-libp2p server over WebRTC for {:?}:",
+        ping_duration
+    ))?;
 
     let mut swarm = libp2p::SwarmBuilder::with_new_identity()
         .with_wasm_bindgen()
         .with_other_transport(|key| {
             webrtc_websys::Transport::new(webrtc_websys::Config::new(&key))
         })?
         .with_behaviour(|_| ping::Behaviour::new(ping::Config::new()))?
-        .with_swarm_config(|c| c.with_idle_connection_timeout(Duration::from_secs(5)))
+        .with_swarm_config(|c| c.with_idle_connection_timeout(ping_duration))
         .build();
 
     let addr = libp2p_endpoint.parse::<Multiaddr>()?;
@@ -46,6 +51,18 @@ pub async fn run(libp2p_endpoint: String) -> Result<(), JsError> {
                 tracing::info!("Ping successful: RTT: {rtt:?}, from {peer}");
                 body.append_p(&format!("RTT: {rtt:?} at {}", Date::new_0().to_string()))?;
             }
+            SwarmEvent::ConnectionClosed {
+                cause: Some(cause), ..
+            } => {
+                tracing::info!("Swarm event: {:?}", cause);
+
+                if let libp2p::swarm::ConnectionError::KeepAliveTimeout = cause {
+                    body.append_p("All done with pinging! ")?;
+
+                    break;
+                }
+                body.append_p(&format!("Connection closed due to: {:?}", cause))?;
+            }
             evt => tracing::info!("Swarm event: {:?}", evt),
         }
     }

examples/browser-webrtc/src/main.rs

@@ -38,7 +38,7 @@ async fn main() -> anyhow::Result<()> {
         .with_behaviour(|_| ping::Behaviour::default())?
         .with_swarm_config(|cfg| {
             cfg.with_idle_connection_timeout(
-                Duration::from_secs(30), // Allows us to observe the pings.
+                Duration::from_secs(u64::MAX), // Allows us to observe the pings.
             )
         })
         .build();