wip

proto/rpc/examples/fileupload/v1/fileupload.proto

@@ -16,7 +16,5 @@ message UploadFileResponse {
 }
 
 service FileUploadService {
-  // Due to an issue described by https://github.com/improbable-eng/ts-protoc-gen/pull/264
-  // we use a streaming response but only expect one response.
-  rpc UploadFile(stream UploadFileRequest) returns (stream UploadFileResponse) {}
+  rpc UploadFile(stream UploadFileRequest) returns (UploadFileResponse) {}
 }

rpc/examples/echo/frontend/src/index.ts

@@ -60,16 +60,23 @@ async function getClients() {
 		opts.webrtcOptions!.signalingExternalAuthToEntity = opts.externalAuthToEntity;
 	}
 
-	// TODO(erd): add back
-	// const webRTCConn = await dialWebRTC(thisHost, webrtcHost, opts);
-	// const webrtcClient = createPromiseClient(EchoService, webRTCConn.transportFactory);
-	// await renderResponses(webrtcClient, "wrtc");
-
-	const directTransport = await dialDirect(thisHost, opts);
-	console.log("TRANSPORT", directTransport);
-	const directClient = createPromiseClient(EchoService, directTransport);
-	await renderResponses(directClient, "direct");
+	try {
+		const webRTCConn = await dialWebRTC(thisHost, webrtcHost, opts);
+		const webrtcClient = createPromiseClient(EchoService, webRTCConn.transport);
+		await renderResponses(webrtcClient, "wrtc");
+	} catch (err) {
+		console.error("error trying WebRTC", err);
+	}
+
+	try {
+		const directTransport = await dialDirect(thisHost, opts);
+		const directClient = createPromiseClient(EchoService, directTransport);
+		await renderResponses(directClient, "direct");
+	} catch (err) {
+		console.error("error trying direct", err);
+	}
 }
+
 getClients().catch(e => {
 	console.error("error getting clients", e);
 });
@@ -78,11 +85,8 @@ async function renderResponses(client: PromiseClient<typeof EchoService>, method
 	const echoRequest = new EchoRequest();
 	echoRequest.message = "hello";
 
-	console.log("HERE1")
 	const response = await client.echo(echoRequest);
-	console.log("HERE2")
 	createElemForResponse(response.message, method, "unary");
-	console.log("HERE3")
 
 	const echoMultipleRequest = new EchoMultipleRequest();
 	echoMultipleRequest.message = "hello?";
@@ -100,6 +104,12 @@ async function renderResponses(client: PromiseClient<typeof EchoService>, method
 		throw err;
 	}
 
+	if (method === "direct") {
+		// grpc-web cannot do bidi correctly. Previous versions
+		// of this code just stalled after the first message was received.
+		return;
+	}
+
 	const clientStream = createWritableIterable<PartialMessage<EchoBiDiRequest>>();
 	const bidiStream = client.echoBiDi(clientStream);
 

rpc/examples/fileupload/frontend/package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {
-    "@improbable-eng/grpc-web": "^0.13.0",
-    "@viamrobotics/rpc": "^0.1.25",
+    "@bufbuild/protobuf": "^1.10.0",
+    "@connectrpc/connect": "^1.5.0",
+    "@connectrpc/connect-web": "^1.5.0",
+    "@viamrobotics/rpc": "file:../../../js",
     "google-protobuf": "^3.14.0"
   },
   "devDependencies": {

rpc/examples/fileupload/frontend/src/index.ts

@@ -1,8 +1,10 @@
-import { grpc } from "@improbable-eng/grpc-web";
+import { PartialMessage } from "@bufbuild/protobuf";
+import { createPromiseClient, PromiseClient } from "@connectrpc/connect";
+import { createWritableIterable } from "@connectrpc/connect/protocol";
 import { Credentials, dialWebRTC } from "@viamrobotics/rpc";
 import { DialOptions } from "@viamrobotics/rpc/src/dial";
+import { FileUploadService } from "./gen/proto/rpc/examples/fileupload/v1/fileupload_connect";
 import { UploadFileRequest, UploadFileResponse } from "./gen/proto/rpc/examples/fileupload/v1/fileupload_pb";
-import { FileUploadServiceClient } from "./gen/proto/rpc/examples/fileupload/v1/fileupload_pb_service";
 
 const thisHost = `${window.location.protocol}//${window.location.host}`;
 
@@ -15,9 +17,9 @@ declare global {
 	}
 }
 
-let clientResolve: (value: FileUploadServiceClient) => void;
+let clientResolve: (value: PromiseClient<typeof FileUploadService>) => void;
 let clientReject: (reason?: any) => void;
-let clientProm = new Promise<FileUploadServiceClient>((resolve, reject) => {
+let clientProm = new Promise<PromiseClient<typeof FileUploadService>>((resolve, reject) => {
 	clientResolve = resolve;
 	clientReject = reject;
 });
@@ -41,10 +43,9 @@ if (opts.externalAuthAddress) {
 	opts.webrtcOptions!.signalingExternalAuthAddress = opts.externalAuthAddress;
 	opts.webrtcOptions!.signalingExternalAuthToEntity = opts.externalAuthToEntity;
 }
-dialWebRTC(thisHost, webrtcHost, opts).then(async ({ transportFactory }) => {
+dialWebRTC(thisHost, webrtcHost, opts).then(async ({ transport }) => {
 	console.log("WebRTC connection established")
-	const webrtcClient = new FileUploadServiceClient(webrtcHost, { transport: transportFactory });
-	clientResolve(webrtcClient);
+	clientResolve(createPromiseClient(FileUploadService, transport));
 }).catch((e: any) => clientReject(e));
 
 window.onload = async (event) => {
@@ -63,40 +64,31 @@ window.onload = async (event) => {
 	});
 };
 
-async function doUpload(client: FileUploadServiceClient, name: string, data: Uint8Array) {
+async function doUpload(client: PromiseClient<typeof FileUploadService>, name: string, data: Uint8Array) {
 	let pResolve: (value: UploadFileResponse) => void;
 	let pReject: (reason?: any) => void;
 	let done = new Promise<UploadFileResponse>((resolve, reject) => {
 		pResolve = resolve;
 		pReject = reject;
 	});
 
-	const uploadStream = client.uploadFile();
+
+	const uploadStream = createWritableIterable<PartialMessage<UploadFileRequest>>();
+	const resp = client.uploadFile(uploadStream);
 
 	let uploadFileRequest = new UploadFileRequest();
 
-	uploadFileRequest.setName(name);
+	uploadFileRequest.data.case = "name";
+	uploadFileRequest.data.value = name;
 	uploadStream.write(uploadFileRequest);
 
-	uploadStream.on("data", (message: UploadFileResponse) => {
-		pResolve(message);
-	});
-	uploadStream.on("end", ({ code, details }: { code: number, details: string, metadata: grpc.Metadata }) => {
-		if (code !== 0) {
-			console.log(code);
-			console.log(details);
-			pReject(code);
-			return;
-		}
-	});
-
 	for (let i = 0; i < data.byteLength; i += 1024) {
 		uploadFileRequest = new UploadFileRequest();
-		uploadFileRequest.setChunkData(data.slice(i, i + 1024));
+		uploadFileRequest.data.case = "chunkData";
+		uploadFileRequest.data.value = data.slice(i, i + 1024);
 		uploadStream.write(uploadFileRequest);
 	}
 
-	uploadStream.end();
-	const resp = await done;
-	console.log("upload complete", resp.toObject());
+	uploadStream.close();
+	console.log("upload complete", (await resp).toJson());
 }