Can you pass error messages from Service Workers to DOM - javascript

I've been trying to work on this for a while. I'm working with google drive api -> and I'm trying to try to get the main script to re-run the request of the accessToken is incorrect and causes an error.
Can that be sent to the main script somehow?
Adding some code to show I've actually worked on this lol - left out some bc it's alot of other unrelated stuff.
I am using IndexedDB to pass info between SW and main Script
//////////////////////////////////////////////////////////////
//////////////// Check Database onload ///////////////////////
//////////////////////////////////////////////////////////////
window.addEventListener("load", checkUpload(), false);
function checkUpload() {
if (supportCheck()) {
let openRequest = indexedDB.open("GoogleDrive", 1);
openRequest.onsuccess = (e) => {
var db = e.target.result;
var objectStore = db
.transaction(["backups"], "readwrite")
.objectStore("backups");
var request = objectStore.get("1");
request.onerror = function () {
// Handle errors!
};
request.onsuccess = function (event) {
var data = event.target.result;
if (googleSignin.isAuthorizedForGDrive()) {
// Call SW Function
}
else {
//Google Sign in Error
}
let accessToken = gapi.auth.getToken().access_token;
data.access = accessToken;
// Put this updated object back into the database.
var requestUpdate = objectStore.put(data);
requestUpdate.onerror = function (event) {
// Do something with the error
};
requestUpdate.onsuccess = function (event) {
// Success - the data is updated!
// Call SW Function
};
}
}
}
}
}
//////////////////////////////////////////////////////////////
//////////////// Initialize Database Function ///////////////
//////////////////////////////////////////////////////////////
uploadBtn.addEventListener("click", handleUploadClick, false);
save.addEventListener("click", handleUploadClick, false);
//Adds/Create Data that is stored in IndexedDB so that the Service Worker can
access and use it
//ServiceWorker Call Function
function initSW() {
console.log("Script: Called InitSW()");
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("serviceWorker.js")
.then((registration) => navigator.serviceWorker.ready)
.then((registration) => {
registration.sync.register("sendFile-sync").then(() => {
//Do Function using sync
try {
console.log("Script : Sync Registered");
} catch {
console.log("Script : Sync Not Registered");
}
});
});
}
}
SW
self.addEventListener("sync", (e) => {
if (e.tag === "sendFile-sync") {
console.log("SW Sync : Sync Found!");
e.waitUntil(fetchFile());
} else {
console.log("SW Sync : No Sync Found");
}
});
//Function Called above when sync is fired
function fetchFile() {
let openRequest = indexedDB.open("GoogleDrive", 1);
openRequest.onerror = function () {
};
openRequest.onsuccess = function () {
let db = openRequest.result;
let transaction = db.transaction(["backups"], 'readwrite');
let backups = transaction.objectStore("backups");
let request = backups.get("1");
request.onsuccess = function (event) {
let date = Date();
let accessToken = request.result.access;
console.log("SW Sync: Access Token - " + accessToken);
let BlobContent = request.result.text;
let file = BlobContent;
let metadata = {
name: "Backup " + date, // Filename
mimeType: "application/pdf", // mimeType at Google Drive
parents: ["root"], // Root Folder ID for testing
};
let form = new FormData();
form.append(
"metadata",
new Blob([JSON.stringify(metadata)], { type: "application/json" })
);
form.append("file", file);
fetch(
"https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id",
{
method: "POST",
headers: new Headers({ Authorization: "Bearer " + accessToken }),
body: form,
}
)
.then((res) => {
return res.json();
})
.then(function (val) {
console.log(val.error.message);
<!-- message is "invalid credentials --> in our scenario
}
})
}
request.onerror = function () {
console.log("SW Sync : Getting IndexedDB values error");
};
};
}

Sure, the ServiceWorker's clients are exposed in its self.clients property, from where you can find the correct Client with which you can communicate thanks to its postMessage() method.
How to find the correct client will depend on the situation, for instance in the install or activate events there should be only one client, so you should be able to reach it by doing
const clients = await self.clients.matchAll();
const client = clients[0];
client.postMessage("something bad happenned...");
In a fetch event, the clientId is exposed on the event instance, so you can do
const client = await self.clients.get(evt.clientId);
client.postMessage("something bad happenned...");
I must admit I don't know well the BackgroundSync API, so I'm not sure if in this sync event your page would be the only one client, however, you can certainly make your page open a private communication channel with the SW even before, which by the way, sounds like a better mean of passing your API's credentials than through IDB:
const channel = new MessageChannel();
channel.port1.onmessage = SWTalksToMe; // handle messages from SW
navigator.serviceWorker
.register("serviceWorker.js")
.then((registration) => navigator.serviceWorker.ready)
.then((registration) => {
registration.postMessage("", [channel.port2]));
return registration.sync.register("sendFile-sync")
})
//...
And in your ServiceWorker
self.addEventListener("message", evt => {
if(evt.ports) {
client_port = evt.ports[0];
}
});
Finally, if you wanted to communicate with all the clients, you could use a BroadcastChannel.

Related

webRTC not working when call initiated by FireFox

I am developing a simple webRTC application, using my own server for signaling.
the javascript code is as follow (I have removed the signaling process and unnecessary logic):
const configuration = {
iceServers: [
{
urls: [
"stun:stun1.l.google.com:19302",
"stun:stun2.l.google.com:19302",
],
},
],
iceCandidatePoolSize: 10,
};
const callerCandidatesString = "callerCandidates";
const calleeCandidatesString = "calleeCandidates";
var received_offer = null;
var offer = null;
var answer = null;
var peerConnection = null;
let localStream = null;
let remoteStream = null;
var constraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
}
async function startMedia(e) {
const localStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
document.getElementById("video1").srcObject = localStream;
remoteStream = new MediaStream();
document.getElementById("video2").srcObject = remoteStream;
if (I am the caller) {
create_the_offer();
}
if (I am the callee) {
get_the_offer();
}
}
async function create_the_offer() {
peerConnection = new RTCPeerConnection(configuration);
registerPeerConnectionListeners();
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
var offer = await peerConnection.createOffer(constraints);
peerConnection.setLocalDescription(offer);
peerConnection.onicecandidate = function(candidate) {
if (candidate.candidate == null) {
//save the offer in the server
--> offer: JSON.stringify(peerConnection.localDescription)},
}
}
check_if_there_is_an_answer();
}
async function get_the_offer() {
// --> retrieve the offer from the server, then
create_answer(offer_from_server);
}
async function create_answer(received_offer) {
console.log("Create PeerConnection with configuration: ", configuration);
peerConnection = new RTCPeerConnection(configuration);
registerPeerConnectionListeners();
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
console.log('received offer:' + received_offer)
my_offer = new RTCSessionDescription(JSON.parse(received_offer));
peerConnection.setRemoteDescription(my_offer);
// collectIceCandidates(peerConnection, calleeCandidatesString, callerCandidatesString);
peerConnection.addEventListener("track", event => {
console.log("Got remote track:", event.streams[0]);
event.streams[0].getTracks().forEach(track => {
console.log("Add a track to the remoteStream:", track);
remoteStream.addTrack(track);
});
});
const answer = await peerConnection.createAnswer(constraints);
console.log("Created answer:", answer);
await peerConnection.setLocalDescription(answer);
peerConnection.onicecandidate = function (e) {
if (e.candidate == null) {
// --> send the answer to the server
}
}
function check_if_there_is_an_answer() {
// retrieve answer from server. this function is executed several times until the answer is received.
// when there is an aswer:
start_remote_connection(answer);
}
async function start_remote_connection(passed_answer) {
my_answer = new RTCSessionDescription(JSON.parse(passed_answer));
peerConnection.setRemoteDescription(my_answer);
peerConnection.addEventListener("track", event => {
console.log("Got remote track:", event.streams[0]);
event.streams[0].getTracks().forEach(track => {
console.log("Add a track to the remoteStream:", track);
remoteStream.addTrack(track);
});
console.log("stream remoto: " + JSON.stringify(remoteStream.getVideoTracks()));
});
document.getElementById("video1").srcObject = localStream;
document.getElementById("video2").srcObject = remoteStream;
}
async function hangUp(e) {
const tracks = document.getElementById("video1").srcObject.getTracks();
tracks.forEach(track => {
track.stop();
});
remoteStream.getTracks().forEach(track => track.stop());
peerConnection.close();
document.getElementById("video1").srcObject = null;
document.getElementById("video2").srcObject = null;
}
// collect ICE Candidates function below
async function collectIceCandidates(peerConnection, localName, remoteName) {
const candidatesCollection = null;
peerConnection.addEventListener("icecandidate", event => {
if (event.candidate) {
const json = event.candidate.toJSON();
candidatesCollection.add(json);
}
});
}
// collect ICE Candidates function above
function registerPeerConnectionListeners() {
peerConnection.addEventListener("icegatheringstatechange", () => {
console.log(
`ICE gathering state changed: ${peerConnection.iceGatheringState}`);
});
peerConnection.addEventListener("connectionstatechange", () => {
console.log(`Connection state change: ${peerConnection.connectionState}`);
});
peerConnection.addEventListener("signalingstatechange", () => {
console.log(`Signaling state change: ${peerConnection.signalingState}`);
});
peerConnection.addEventListener("iceconnectionstatechange ", () => {
console.log(
`ICE connection state change: ${peerConnection.iceConnectionState}`);
});
}
window.onload = startMedia();
If the caller uses chrome and the callee uses FireFox (on localhost, same PC) the code works fine and both users can share their screen.
output with chrome
If the caller uses FireFox and the callee uses Chrome (still on localhost) the code still works fine, but the connection is not established and users cannot see the screen of the other person. I get no error in the console.
output with FireFox
In particular, with FF I am not getting "connection state change: connecting" and then "connection state change: connected".
My guess is that FF and chrome manage the async/await differently, and somehow with FF some values are not ready when actually needed, but cannot figure out why ...
with safari (MacOS) it does not work!!
I then tried it between the computer (with chrome) and an Android phone (chrome browser). It worked the first time I test it, and then never again :(
Does anyone of you has a clue ?

Broadcasting to all clients with Deno websocket

I want to add notifications to an application I've developed.
Unfortunately, Deno has removed the ws package.(https://deno.land/std#0.110.0/ws/mod.ts)
That's why I'm using the websocket inside the denon itself. Since it doesn't have many functions, I have to add some things myself.
For example, sending all messages to open clients.
What I want to do is when the pdf is created, a (data, message) comes from the socket and update the notifications on the page according to the incoming data.
I keep all open clients in a Map. and when the pdf is created, I return this Map and send it to all sockets (data, message).
However, this works for one time.
server conf...
import {
path,
paths,
ctid,
} from "../deps.ts";
const users = new Map();
const sockets = new Map()
const userArr = [];
export const startNotif = (socket,req) => {
const claims = req.get("claims");
const org = req.get("org");
claims.org = org;
console.log("connected")
users.set(claims.sub, {"username":claims.sub,"socket":socket})
users.forEach((user)=>{
if(userArr.length === 0){
userArr.push(user)
}
else if(userArr.every((w)=> w.username !== user.username) )
userArr.push(user)
})
sockets.set(org, userArr)
function broadcastMessage(message) {
sockets.get(org).map((u)=>{
console.log(u.socket.readyState)
u.socket.send(message)
})
}
if (socket.readyState === 3) {
sockets.delete(uid)
return
}
const init = (msg) => {
socket.send(
JSON.stringify({
status: "creating",
})
);
};
const ondata = async (msg) => {
const upfilepath = path.join(paths.work, `CT_${msg.sid}_report.pdf`);
try {
const s=await Deno.readTextFile(upfilepath);
if(s){
socket.send(
JSON.stringify({
status: "end",
})
);
} else {
socket.send(
JSON.stringify({
status: "creating",
})
);
}
} catch(e) {
if(e instanceof Deno.errors.NotFound)
console.error('file does not exists');
}
};
const end = () => {
try {
const endTime = Date.now()
const msg = "Your PDF has been created"
const id = ctid(12) // random id create
broadcastMessage(
JSON.stringify({
id: id,
date: endTime,
status: "done",
message: msg,
read: 'negative',
action: 'pdf'
})
);
} catch (e) {
console.log(400, "Cannot send.", e);
}
}
socket.onmessage = async (e) => {
const cmd = JSON.parse(e.data);
if(cmd.bid === 'start'){
await init(cmd)
}
if(!cmd.bid && cmd.sid){
await ondata(cmd)
}
if(cmd.bid === 'end'){
await end();
}
}
socket.onerror = (e) => {
console.log(e);
};
}
client conf...
export const webSocketHandler = (request) =>
new Promise((res, rej) => {
let url;
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
url = `http://localhost:8080/api/notifications/ws`.replace('http', 'ws');
} else {
url = `${window.location.origin}/api/notifications/ws`.replace('http', 'ws');
}
const token = JSON.parse(sessionStorage.getItem('token'));
const orgname = localStorage.getItem('orgname');
const protocol = `${token}_org_${orgname}`;
const socket = new WebSocket(url, protocol);
const response = Object.create({});
socket.onopen = function () {
socket.send(
JSON.stringify({
bid: 'start',
})
);
};
socket.onmessage = function (event) {
response.data = JSON.parse(event.data);
if (response.data.status === 'creating') {
socket.send(
JSON.stringify({
sid: request.sid,
})
);
} else if (response.data.status === 'end') {
socket.send(
JSON.stringify({
bid: 'end',
})
);
} else if (response.data.status === 'done') {
try {
res(response);
} catch (err) {
rej(err);
}
}
};
socket.onclose = function (event) {
response.state = event.returnValue;
};
socket.onerror = function (error) {
rej(error);
};
});
onclick function of button I use in component...
const donwloadReport = async (type) => {
const query = `?sid=${sid}&reportType=${type}`;
const fileName = `CT_${sid}_report.${type}`;
try {
type === 'pdf' && setLoading(true);
const response = await getScanReportAction(query);
const request = {
sid,
};
webSocketHandler(request)
.then((data) => {
console.log(data);
dispatch({
type: 'update',
data: {
id: data.data.id,
date: data.data.date,
message: data.data.message,
action: data.data.action,
read: data.data.read,
},
});
})
.catch((err) => {
console.log(err);
});
if (type === 'html') {
downloadText(response.data, fileName);
} else {
const blobUrl = await readStream(response.data);
setLoading(false);
downloadURL(blobUrl, fileName);
}
} catch (err) {
displayMessage(err.message);
}
};
Everything works perfectly the first time. When I press the download button for the pdf, the socket works, then a data is returned and I update the notification count with the context I applied according to this data.
Later I realized that this works in a single tab. When I open a new client in the side tab, my notification count does not increase. For this, I wanted to keep all sockets in Map and return them all and send a message to each socket separately. But in this case, when I press the download button for the second time, no data comes from the socket.
Actually, I think that I should do the socket initialization process on the client in the context. When you do this, it starts the socket 2 times in a meaningless way.
In summary, consider an application with organizations and users belonging to those organizations. If the clients of A, B, C users belonging to X organization are open at the same time and user A pressed a pdf download button, I want A, B, C users to be notified when the pdf is downloaded.
I would be very grateful if someone could show me a way around this issue.
Have you looked at the BroadcastChannel API? Maybe that could solve your issue. See for example:
Deno specific: https://medium.com/deno-the-complete-reference/broadcast-channel-in-deno-f76a0b8893f5
Web/Browser API: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

How to track upload progress to S3 using aws-sdk V3 for browser (javascript)

I can find a lot of resources online on how to track upload progress to S3 using aws-sdk V2, listening to the event like:
.on('httpUploadProgress', event => {}
But since I updated the aws-sdk to V3, there are no listeners anymore. I believe I have to use the middleware function now, but I've tried a few things and it didn't work. I've also went deep into the API reference docs and the github repository without success.
My current code is like this:
import { S3Client, PutObjectCommand } from '#aws-sdk/client-s3';
export const UploadToS3 = (credentials, fileData) => {
const s3 = new S3Client({
region: credentials.region,
credentials: {
accessKeyId: credentials.access_key,
secretAccessKey: credentials.secret_key,
sessionToken: credentials.session_token,
}
});
return new Promise((resolve) => {
s3.send(new PutObjectCommand({
Bucket: credentials.bucket,
Key: credentials.file,
Body: fileData,
}));
});
};
Any help would be appreciated
I had exactly the same problem (switched from aws-sdk v2 to v3) and found out that it is because the library uses the Fetch API for all HTTP Requests and Fetch does not (yet) support tracking upload progress
To solve that problem I exchanged Fetch by good old XMLHttpRequest at least for PUT requests, which you can accomplish by providing a custom requestHandler when initializing the S3Client.
import { S3Client } from '#aws-sdk/client-s3';
const myHttpHandler = new MyHttpHandler();
myHttpHandler.onProgress$.subscribe(progress => {
const percentComplete = progress.progressEvent.loaded / progress.progressEvent.total * 100;
console.log('upload progress', percentComplete);
});
const myClient = new S3Client({
endpoint: this.configService.s3Api,
region: 'eu',
credentials: { ... },
requestHandler: myHttpHandler
});
The custom request handler simply extends the FetchHttpHandler from #aws-sdk/fetch-http-handler. If the method is PUT and there is a body (so we want to upload something), it uses a custom XHR handler - otherwise it just uses the Fetch handler from it's super class.
And in the XHR handler you can bind something to the progress event of the XHR handler - in my case I emit a rxjs Subject which I can consume outside the custom handler.
import { FetchHttpHandler, FetchHttpHandlerOptions } from '#aws-sdk/fetch-http-handler';
import { HeaderBag, HttpHandlerOptions } from '#aws-sdk/types';
import { buildQueryString } from '#aws-sdk/querystring-builder';
import { HttpResponse, HttpRequest } from '#aws-sdk/protocol-http';
import { Subject } from 'rxjs';
class MyHttpHandler extends FetchHttpHandler {
private myRequestTimeout;
onProgress$: Subject<{ path: string, progressEvent: ProgressEvent }> = new Subject();
constructor({ requestTimeout }: FetchHttpHandlerOptions = {}) {
super({ requestTimeout });
this.myRequestTimeout = requestTimeout;
}
handle(request: HttpRequest, { abortSignal }: HttpHandlerOptions = {}): Promise<{ response: HttpResponse }> {
// we let XHR only handle PUT requests with body (as we want to have progress events here), the rest by fetch
if (request.method === 'PUT' && request.body) {
return this.handleByXhr(request, { abortSignal });
}
return super.handle(request, { abortSignal });
}
/**
* handles a request by XHR instead of fetch
* this is a copy the `handle` method of the `FetchHttpHandler` class of #aws-sdk/fetch-http-handler
* replacing the `Fetch`part with XHR
*/
private handleByXhr(request: HttpRequest, { abortSignal }: HttpHandlerOptions = {}): Promise<{ response: HttpResponse}> {
const requestTimeoutInMs = this.myRequestTimeout;
// if the request was already aborted, prevent doing extra work
if (abortSignal?.aborted) {
const abortError = new Error('Request aborted');
abortError.name = 'AbortError';
return Promise.reject(abortError);
}
let path = request.path;
if (request.query) {
const queryString = buildQueryString(request.query);
if (queryString) {
path += `?${queryString}`;
}
}
const { port, method } = request;
const url = `${request.protocol}//${request.hostname}${port ? `:${port}` : ''}${path}`;
// Request constructor doesn't allow GET/HEAD request with body
// ref: https://github.com/whatwg/fetch/issues/551
const body = method === 'GET' || method === 'HEAD' ? undefined : request.body;
const requestOptions: RequestInit = {
body,
headers: new Headers(request.headers),
method,
};
const myXHR = new XMLHttpRequest();
const xhrPromise = new Promise<{headers: string[], body: Blob, status: number}>((resolve, reject) => {
try {
myXHR.responseType = 'blob';
// bind the events
myXHR.onload = progressEvent => {
resolve({
body: myXHR.response,
headers: myXHR.getAllResponseHeaders().split('\n'),
status: myXHR.status
});
};
myXHR.onerror = progressEvent => reject(new Error(myXHR.responseText));
myXHR.onabort = progressEvent => {
const abortError = new Error('Request aborted');
abortError.name = 'AbortError';
reject(abortError);
};
// progress event musst be bound to the `upload` property
if (myXHR.upload) {
myXHR.upload.onprogress = progressEvent => this.onProgress$.next({ path, progressEvent });
}
myXHR.open(requestOptions.method, url);
// append headers
if (requestOptions.headers) {
(requestOptions.headers as Headers).forEach((headerVal, headerKey, headers) => {
if (['host', 'content-length'].indexOf(headerKey.toLowerCase()) >= 0) {
// avoid "refused to set unsafe header" error message
return;
}
myXHR.setRequestHeader(headerKey, headerVal);
});
}
myXHR.send(requestOptions.body);
} catch (e) {
console.error('S3 XHRHandler error', e);
reject(e);
}
});
const raceOfPromises = [
xhrPromise.then((response) => {
const fetchHeaders = response.headers;
const transformedHeaders: HeaderBag = {};
fetchHeaders.forEach(header => {
const name = header.substr(0, header.indexOf(':') + 1);
const val = header.substr(header.indexOf(':') + 1);
if (name && val) {
transformedHeaders[name] = val;
}
});
const hasReadableStream = response.body !== undefined;
// Return the response with buffered body
if (!hasReadableStream) {
return response.body.text().then(body => ({
response: new HttpResponse({
headers: transformedHeaders,
statusCode: response.status,
body,
}),
}));
}
// Return the response with streaming body
return {
response: new HttpResponse({
headers: transformedHeaders,
statusCode: response.status,
body: response.body,
}),
};
}),
this.requestTimeoutFn(requestTimeoutInMs),
];
if (abortSignal) {
raceOfPromises.push(
new Promise<never>((resolve, reject) => {
abortSignal.onabort = () => {
myXHR.abort();
};
})
);
}
return Promise.race(raceOfPromises);
}
private requestTimeoutFn(timeoutInMs = 0): Promise<never> {
return new Promise((resolve, reject) => {
if (timeoutInMs) {
setTimeout(() => {
const timeoutError = new Error(`Request did not complete within ${timeoutInMs} ms`);
timeoutError.name = 'TimeoutError';
reject(timeoutError);
}, timeoutInMs);
}
});
}
}
Looking through the github issues I've just found that #aws-sdk/client-s3 don't support upload progress tracking, since it uses fetchHttpHandler under the covers. The recommended way is to use #aws-sdk/lib-storage which I have not tried yet, but looks promising!
I have also faced the same issue that is i have to upgrade aws-sdk from v2 to v3 but file upload progress feature is missing in v3.The reason for that is in JS SDK v2 for S3 file upload they uses XHR for browser network requests, which has a good interface for progress tracking.
Whereas JS SDK v3 uses fetch for the same, which offers some other advantages but one downside is that it does not seem to support upload progress yet, and progress on that feature is extremely slow.
But now JS SDK v3 has a new package called #aws-sdk/xhr-http-handler which can be used in place of #aws-sdk/fetch-http-handler in order to get the fine grained file upload progress as we are getting in v2.
You can find out the code for that on the link https://github.com/aws/aws-sdk-js-v3/tree/main/packages/xhr-http-handler
import { S3Client } from '#aws-sdk/client-s3';
import { XhrHttpHandler } from '#aws-sdk/xhr-http-handler';
import { Upload } from '#aws-sdk/lib-storage';
const s3Client = new S3Client({
requestHandler: new XhrHttpHandler({}),
});
const upload = new Upload({
client:s3Client,
params: {
bucket,
key,
},
});
upload.on("httpUploadProgress", (progress) => {
console.log(
progress.loaded, // Bytes uploaded so far.
progress.total // Total bytes. Divide these two for progress percentage.
);
});
await upload.done();

Resubscribe to the websocket channel using setTimeout

I have written a code in vue.js which creates a websocket connection and subscribe to a channel to get the data of BTC in USD.
But that channel one sends the updated data of size for some prices but I need a way to resubscribe to the channel to get the update prices as well.
Here is the link for bybit api documentation
Here is the code I tried:
function GetData(that) {
var ws_bybit_ita = new WebSocket("wss://stream.bybit.com/realtime");
ws_bybit_ita.onopen = function () {
ws_bybit_ita.send(
JSON.stringify({ op: "subscribe", args: ["orderBook_200.100ms.BTCUSD"] })
)
}
ws_bybit_ita.onmessage = function (msgEvent) {
let response = JSON.parse(msgEvent.data)
const data = response;
if (data.data && data.type == "snapshot") {
console.log(data.data);
} else if (data.type == "delta") {
}
CheckState(that,ws_bybit_ita)
};
function CheckState(that, ws_bybit_ita) {
if (ws_bybit_ita.readyState === 1) {
ws_bybit_ita.send(
JSON.stringify({ op: "unsubscribe", args: ["orderBook_200.100ms.BTCUSD"] })
)
ws_bybit_ita.close();
}
setTimeout(function () {
GetData(that);
}, 500);
};

Node callback style with promisify? "The 'original' argument must be of type function"

I'm using util.promisify in a Google Cloud Function to call IBM Watson Text-to-Speech, which returns a callback. My code works but I get an error message:
TypeError [ERR_INVALID_ARG_TYPE]: The "original" argument must be of type function
The documentation says
Takes a function following the common error-first callback style, i.e.
taking a (err, value) => ... callback as the last argument, and
returns a version that returns promises.
The IBM Watson callback is complicated and I can't figure out how to refactor it into the Node.js callback style. It's working, should I just ignore the error message? Here's my Google Cloud Function:
exports.IBM_T2S = functions.firestore.document('Users/{userID}/Spanish/IBM_T2S_Request').onUpdate((change) => {
let word = change.after.data().word;
let wordFileType = word + '.mp3';
function getIBMT2S(word, wordFileType) {
const {Storage} = require('#google-cloud/storage');
const storage = new Storage();
const bucket = storage.bucket('myProject.appspot.com');
const file = bucket.file('Audio/Spanish/Latin_America/' + wordFileType);
var util = require('util');
var TextToSpeechV1 = require('watson-developer-cloud/text-to-speech/v1');
var textToSpeech = new TextToSpeechV1({
username: 'groucho',
password: 'swordfish',
url: 'https://stream.watsonplatform.net/text-to-speech/api'
});
var synthesizeParams = {
text: word,
accept: 'audio/mpeg',
voice: 'es-LA_SofiaVoice',
};
const options = { // construct the file to write
metadata: {
contentType: 'audio/mpeg',
metadata: {
source: 'IBM Watson Text-to-Speech',
languageCode: 'es-LA',
gender: 'Female'
}
}
};
textToSpeech.synthesize(synthesizeParams).on('error', function(error) {
console.log(error);
}).pipe(file.createWriteStream(options))
.on('error', function(error) {
console.error(error);
})
.on('finish', function() {
console.log("Audio file written to Storage.");
});
};
var passGetIBMT2S = util.promisify(getIBMT2S(word, wordFileType))
passGetIBMT2S(word, wordFileType)
});
It's working because you are invoking getIBMT2S and passing the return value to util.promisfy and not the function itself.
There are a couple of issues here, firstly your getIBMT2S function doesn't look like it would be compatible with util.promisfy, as you've highlighted from the documents, a compatible function should follow the typical callback-style signature (getIBMT2S does not take a callback parameter).
Secondly, util.promisify expects a function - in your case you are passing the return value of the function instead. If getIBMT2S was updated to support a callback parameter then the correct usage would be
function getIBMT2S(word, wordFileType, cb) {
...
// be sure to invoke cb in here
}
var passGetIBMT2S = util.promisify(getIBMT2S); // <-- don't call getIBMT2S, pass it in directly
passGetIBMT2S(word, wordFileType) // <-- now invoke the wrapped function
.then(result => console.log('DONE'));
.catch(e => console.error(e));
Here's my finished code. There are two functions. getT2S calls IBM Watson Text-to-Speech, then writes the audiofile to Storage, then gets the download URL. writeDownloadURL checks if a Firestore document exists, then either sets or updates the download URL to Firestore.
exports.IBM_T2S = functions.firestore.document('Users/{userID}/Spanish/IBM_T2S_Request').onUpdate((change) => {
if (change.after.data().word != undefined) {
// get requested word object
let accent = change.after.data().accent;
let audioType = change.after.data().audioType;
let gender = change.after.data().gender;
let longLanguage = change.after.data().longLanguage;
let shortLanguage = change.after.data().shortLanguage;
let shortSource = change.after.data().shortSource;
let source = change.after.data().source;
let voice = change.after.data().voice;
let word = change.after.data().word;
console.log(word);
let wordFileType = word + '.' + audioType;
let pronunciation = `${accent}-${gender}-${shortSource}`;
const {Storage} = require('#google-cloud/storage');
const storage = new Storage();
const bucket = storage.bucket('myProject.appspot.com');
const file = bucket.file('Audio/' + longLanguage + '/' + pronunciation + '/' + wordFileType);
var TextToSpeechV1 = require('watson-developer-cloud/text-to-speech/v1');
var textToSpeech = new TextToSpeechV1({
username: 'groucho',
password: 'swordfish',
url: 'https://stream.watsonplatform.net/text-to-speech/api'
});
var synthesizeParams = {
text: word,
accept: 'audio/' + audioType,
voice: voice
};
const options = { // construct the file to write
metadata: {
contentType: 'audio/' + audioType,
metadata: {
accent: accent,
audioType: audioType,
gender: gender,
longLanguage: longLanguage,
shortLanguage: shortLanguage,
source: source,
voice: voice,
word: word
}
}
};
// check if Pronunciations collection exists, set or update to not destroy existing data
function writeDownloadURL(downloadURL) {
admin.firestore().collection('Dictionaries').doc(longLanguage).collection('Words').doc(word).collection('Pronunciations').doc(pronunciation).get()
.then(function(doc) {
if (doc.exists) {
return admin.firestore().collection('Dictionaries').doc(longLanguage).collection('Words').doc(word).collection('Pronunciations').doc(pronunciation).update({ audioFile: downloadURL })
.then(result => console.log('DONE'))
.catch(error => console.error(error));
} else {
return admin.firestore().collection('Dictionaries').doc(longLanguage).collection('Words').doc(word).collection('Pronunciations').doc(pronunciation).set({ audioFile: downloadURL })
.then(result => console.log('DONE'))
.catch(error => console.error(error));
} // close else
})
.catch(error => console.error(error));
} // close writeDownloadURL
// documentation at https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises
function getT2S(synthesizeParams) {
return new Promise(function(resolve, reject) {
// documentation at https://cloud.ibm.com/apidocs/text-to-speech?code=node#synthesize-audio-get
textToSpeech.synthesize(synthesizeParams).on('error', function(error) {
console.error(error);
reject(error);
}).pipe(file.createWriteStream(options))
.on('error', function(error) {
console.error(error);
reject(error);
})
.on('finish', function() {
resolve(file.getSignedUrl({
action: 'read',
expires: '03-17-2025'
}));
}); // close on finish
}); // close Promise
} // close getT2SAsync
async function getT2SAsync(synthesizeParams) {
var signedUrls = await getT2S(synthesizeParams);
var downloadURL = signedUrls[0];
await writeDownloadURL(downloadURL);
console.log("All done.");
}
return getT2SAsync(synthesizeParams);
} else { // if no word passed to function
console.error("Error.");
}
}); // close IBM_T2S
I mistakenly wrote
return file.getSignedUrl({
instead of
resolve(file.getSignedUrl({
The result was that no data came back from the promise, and the cloud function timed out after six seconds, without finishing execution. You have to do something with resolve. I used reject twice to be sure. :-)

Categories

Resources