Use libp2p's implementation of a wasm websocket transport

bin/node/cli/browser-demo/index.html

@@ -6,7 +6,6 @@
 	<link rel="shortcut icon" href="/favicon.png" />
 	<script type="module">
 import { start_client, default as init } from './pkg/node_cli.js';
-import ws from './ws.js';
 
 function log(msg) {
 	document.getElementsByTagName('body')[0].innerHTML += msg + '\n';
@@ -20,7 +19,7 @@
 	const chain_spec_text = await chain_spec_response.text();
 
 	// Build our client.
-	let client = await start_client(chain_spec_text, 'info', ws());
+	let client = await start_client(chain_spec_text, 'info');
 	log('Client started');
 
 	client.rpcSubscribe('{"method":"chain_subscribeNewHead","params":[],"id":1,"jsonrpc":"2.0"}',

bin/node/cli/src/browser.rs

@@ -19,26 +19,26 @@ use log::info;
 use wasm_bindgen::prelude::*;
 use sc_service::Configuration;
 use browser_utils::{
-	Transport, Client,
+	Client,
 	browser_configuration, set_console_error_panic_hook, init_console_log,
 };
 use std::str::FromStr;
 
 /// Starts the client.
 #[wasm_bindgen]
-pub async fn start_client(chain_spec: String, log_level: String, wasm_ext: Transport) -> Result<Client, JsValue> {
-	start_inner(chain_spec, log_level, wasm_ext)
+pub async fn start_client(chain_spec: String, log_level: String) -> Result<Client, JsValue> {
+	start_inner(chain_spec, log_level)
 		.await
 		.map_err(|err| JsValue::from_str(&err.to_string()))
 }
 
-async fn start_inner(chain_spec: String, log_level: String, wasm_ext: Transport) -> Result<Client, Box<dyn std::error::Error>> {
+async fn start_inner(chain_spec: String, log_level: String) -> Result<Client, Box<dyn std::error::Error>> {
 	set_console_error_panic_hook();
 	init_console_log(log::Level::from_str(&log_level)?)?;
 	let chain_spec = ChainSpec::from_json_bytes(chain_spec.as_bytes().to_vec())
 		.map_err(|e| format!("{:?}", e))?;
 
-	let config: Configuration<_, _> = browser_configuration(wasm_ext, chain_spec)
+	let config: Configuration<_, _> = browser_configuration(chain_spec)
 		.await?;
 
 	info!("Substrate browser node");

utils/browser/Cargo.toml

@@ -12,7 +12,7 @@ repository = "https://github.com/paritytech/substrate/"
 futures = "0.3"
 futures01 = { package = "futures", version = "0.1.29" }
 log = "0.4.8"
-libp2p = { version = "0.16.2", default-features = false }
+libp2p-wasm-ext = { version = "0.16.2", features = ["websocket"] }
 console_error_panic_hook = "0.1.6"
 console_log = "0.1.2"
 js-sys = "0.3.34"

utils/browser/src/lib.rs

@@ -26,25 +26,23 @@ use futures::{prelude::*, channel::{oneshot, mpsc}, future::{poll_fn, ok}, compa
 use std::task::Poll;
 use std::pin::Pin;
 use sc_chain_spec::Extension;
+use libp2p_wasm_ext::{ExtTransport, ffi};
 
-pub use libp2p::wasm_ext::{ExtTransport, ffi::Transport};
 pub use console_error_panic_hook::set_once as set_console_error_panic_hook;
 pub use console_log::init_with_level as init_console_log;
 
-/// Create a service configuration from a chain spec and the websocket transport.
+/// Create a service configuration from a chain spec.
 ///
 /// This configuration contains good defaults for a browser light client.
-pub async fn browser_configuration<G, E>(
-	transport: Transport,
-	chain_spec: ChainSpec<G, E>,
-) -> Result<Configuration<G, E>, Box<dyn std::error::Error>>
+pub async fn browser_configuration<G, E>(chain_spec: ChainSpec<G, E>)
+	-> Result<Configuration<G, E>, Box<dyn std::error::Error>>
 where
 	G: RuntimeGenesis,
 	E: Extension,
 {
 	let name = chain_spec.name().to_string();
 
-	let transport = ExtTransport::new(transport);
+	let transport = ExtTransport::new(ffi::websocket_transport());
 	let mut config = Configuration::default();
 	config.network.boot_nodes = chain_spec.boot_nodes().to_vec();
 	config.telemetry_endpoints = chain_spec.telemetry_endpoints().clone();