From f0f26ce259bc0383da4f3117008553a19b83475f Mon Sep 17 00:00:00 2001 From: Seweryn Kras Date: Wed, 16 Oct 2024 12:23:44 +0200 Subject: [PATCH 1/2] fix: fallback to built-in WebSocket constructor when running in the browser (instead of using "ws") --- src/shared/storage/ws.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/shared/storage/ws.ts b/src/shared/storage/ws.ts index bab98054e..7748e5e29 100644 --- a/src/shared/storage/ws.ts +++ b/src/shared/storage/ws.ts @@ -5,7 +5,9 @@ import { encode, toObject } from "flatbuffers/js/flexbuffers.js"; import * as jsSha3 from "js-sha3"; import { defaultLogger, isBrowser, Logger, YagnaApi } from "../utils"; import { GolemInternalError, GolemUserError } from "../error/golem-error"; -import WebSocket from "ws"; +import NodeWebSocket from "ws"; + +type WebSocketLike = NodeWebSocket | WebSocket; // FIXME: cannot import fs/promises because the rollup polyfill doesn't work with it import * as fs from "fs"; @@ -256,9 +258,16 @@ export class WebSocketStorageProvider implements StorageProvider { }; } - private async createSocket(fileInfo: GftpFileInfo, components: string[]): Promise { + private getWsConstructor() { + if (isBrowser) { + return WebSocket; + } + return NodeWebSocket; + } + + private async createSocket(fileInfo: GftpFileInfo, components: string[]): Promise { const service = await this.createService(fileInfo, components); - const ws = new WebSocket(service.url, ["gsb+flexbuffers"]); + const ws = new (this.getWsConstructor())(service.url, ["gsb+flexbuffers"]); ws.addEventListener("error", () => { this.logger.error(`Socket Error (${fileInfo.id})`); }); @@ -287,7 +296,7 @@ export class WebSocketStorageProvider implements StorageProvider { await this.yagnaApi.gsb.unbindServices(id); } - private respond(ws: WebSocket, id: string, payload: unknown) { + private respond(ws: WebSocketLike, id: string, payload: unknown) { ws.send( encode({ id, From 0443c17831545b9c0c2bfa6231f2cd4cba291261 Mon Sep 17 00:00:00 2001 From: Seweryn Kras Date: Wed, 16 Oct 2024 12:25:59 +0200 Subject: [PATCH 2/2] test: test transferring data in the browser --- examples/web/hello.html | 2 +- examples/web/transfer-data.html | 150 +++++++++++++++++++++++++++ tests/cypress/ui/transfer-data.cy.ts | 13 +++ 3 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 examples/web/transfer-data.html create mode 100644 tests/cypress/ui/transfer-data.cy.ts diff --git a/examples/web/hello.html b/examples/web/hello.html index 9b3af5e5b..3167094ba 100644 --- a/examples/web/hello.html +++ b/examples/web/hello.html @@ -115,7 +115,7 @@

Results

await glm.connect(); appendResults("Request for renting a provider machine"); const rental = await glm.oneOf({ order }); - appendResults("Rented resources from", rental.agreement.provider.name); + appendResults("Rented resources from " + rental.agreement.provider.name); await rental .getExeUnit() .then(async (exe) => diff --git a/examples/web/transfer-data.html b/examples/web/transfer-data.html new file mode 100644 index 000000000..f5abf62df --- /dev/null +++ b/examples/web/transfer-data.html @@ -0,0 +1,150 @@ + + + + + Requestor in browser + + + +
+

Transfer some data to the provider, process it there and download the result

+
+

Options

+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+

Actions

+
+ +
+
+
+ +

Results

+
+
    +
    +
    +
    + + + + diff --git a/tests/cypress/ui/transfer-data.cy.ts b/tests/cypress/ui/transfer-data.cy.ts new file mode 100644 index 000000000..a8069ac3f --- /dev/null +++ b/tests/cypress/ui/transfer-data.cy.ts @@ -0,0 +1,13 @@ +describe("Transfer data example", () => { + it("should run the example", () => { + cy.visit("/transfer-data"); + cy.get("#YAGNA_APPKEY").clear().type(Cypress.env("YAGNA_APPKEY")); + cy.get("#YAGNA_API_BASEPATH").clear().type(Cypress.env("YAGNA_API_BASEPATH")); + cy.get("#SUBNET_TAG").clear().type(Cypress.env("YAGNA_SUBNET")); + cy.get("#PAYMENT_NETWORK").clear().type(Cypress.env("PAYMENT_NETWORK")); + cy.get("#DATA").clear().type("Hello Golem!"); + cy.get("#transfer-data").click(); + cy.get("#results").should("include.text", "hELLO gOLEM!", { timeout: 60000 }); + cy.get("#results").should("include.text", "Finalized renting process", { timeout: 10000 }); + }); +});