I am trying to download a file via electron-dl and I want to gracefully end the download in case the internet goes off. I want to send a main to renderer event in case the download interrupts because of internet connection breaking down. How can I achieve that? Thanks in advance. :)
What's up?
Electron has an event called online and offline:
window.addEventListener('online', () => {})
window.addEventListener('offline', () => {})
And you can get the file with
electronDL.onStart((item) => {
window.addEventListener('offline', () => {
item.cancel();
})
}))
Related
I am trying to send data from the main process to the renderer and the ipcRenderer.on function is being executed but the data is undefined...
This is the code to send the data:
mainWindow.webContents.on("did-finish-load", () => {
let name = "test";
mainWindow.webContents.send("updateSave", name);
})
And this to receive it:
ipcRenderer.on("updateSave", (e, data) => {
console.log("data: " + data);
})
The console.log is beeing fired but it just says: data: undefined
And this is the preload file:
contextBridge.exposeInMainWorld("ipcRenderer", {
send: (channel, ...args) => ipcRenderer.send(channel, ...args),
on: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args))
});
Does anybody know what I did wrong? Thanks
In your preload.js, you're defining ipcRenderer.on() as follows:
on: (channel, func) => {
ipcRenderer.on(
channel,
(event, ...args) => {
func(...args)
}
)
}
Thus, event will never get passed to func() and is thus swallowed. Now, there are two possible solutions (personally, I'd go with (1) because it's easiest to implement and will make for cleaner code on both parts. However, please see the remark below):
(1) You want to keep the signature in your renderer
I.e., you want to still write ipcRenderer.on("channel", (event, data) => {});. Then you will have to change your preload code. I suggest to simply pass func to ipcRenderer like so:
on: (channel, func) => ipcRenderer.on (channel, func)
Then, any func parameter must have the signature (event, ...data) => {}.
(2) You want to keep the signature in your preload
I.e., you want to keep the code of your preload contextBridge definition. Then, any instance of ipcRenderer.on() in your renderer code will need to change to fit the signature (...data) => {} since there's no event parameter passed to the function.
As a side note, it is considered a best practice if you don't expose Electron API function (such as ipcRenderer.on(), ipcRenderer.send() etc) to the renderer when proxying using a preload script, but instead provide discrete functions for your renderer code to choose from, as shown in Electron's official IPC tutorial.
I'm using Formik to create a form for a React web app. The submission is as the following code.
const submitForm = (values) => {
console.log(JSON.stringify(values, null, 2));
setFormStatus(status.loading);
// handle request.
axios
.put("#", values)
.then(() => {
console.log("Submission Success");
setFormStatus(status.success);
})
.catch(() => {
console.log(`Submission Failure`);
setFormStatus(status.failure);
})
.then(() => {
console.log("Submission CleanUp");
setTimeout(() => {
console.log("Neutralizing Form");
setFormStatus(status.neutral);
// tell to animate.
setSwitchSubmitBtn(!switchSubmitBtn);
}, 2000);
});
};
After the axis request, there will be a 2s delay before I set the status state back to neutral.
However, I'm testing using Jest, waitFor doesn't work as expected. The timeout in submission seems blocked, as no matter how long I wait for the submission, it just won't occur. I found a solution to this by using jest.advanceTimer, but adding the same amount of delay in waitFor doesn't work.
it("INPUT_FORM_TC_008", async () => {
jest.useFakeTimers();
render(<InputForm />);
axios.put.mockImplementation(async () => {
console.log("MOCKED PUT");
return Promise.reject();
});
// click submit Button
user.click(screen.getByTestId("submitBtn"));
await waitFor(() => {
expect(screen.queryByTestId("crossIcon")).not.toBeNull();
});
act(() => {
jest.advanceTimersByTime(2000);
});
await waitFor(() => {
// crossIcon will be unmounted once `status` changes to neutral.
expect(screen.queryByTestId("crossIcon")).toBeNull();
});
});
The following code won't work if I don't use jest.advanceTimer, even I set timeout much longer than the one in submission.
await waitFor(() => {
expect(screen.queryByTestId("crossIcon")).toBeNull();
}, 5000);
I suspect that this is related to the event loop stuff, but I tried to set the timeout to be 20ms in the submission and it works. So I looking for a reason why this happens.
I tried to test a state change using setTimeOut using Jest. I expect after the amount of time I specified in setTimeOut the state should be changed. But using waitFor won't work even set a longer timeout.
The issue is that you are setting a setTimeout in a scope that is immediately exited. This code should still work when it's actually run due to a closure on your function, but in Jest the test will say, "welp, looks like there's no more synchronous code" and finish the test before waiting for the execution.
If you want more information on why setTimeout behaves this way you can check the MDN article here: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
But putting it very simply, it uses something called the "event loop" which is how JS handles asynchronous code while still being a synchronous language. When you use setTimeout, you're simply adding the function execution to the event loop and saying, "Don't execute this code now, run other code until the 2000 ms have gone by, then run this code." Which works fine in your implementation because you're allowing 2000ms to go by. But Jest doesn't wait, it just says "There's no more code to execute and nothing is ready in the event loop, the test must be complete" and cleaning everything up immediately.
You could resolve this by wrapping your setTimeout in a promise, like:
//........
.then(() => {
console.log("Submission CleanUp");
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("Neutralizing Form");
resolve(status.neutral);
}, 2000);
})
});
Then have your actual implementation code wait for the promise to resolve and set your formStatus and submissionButton states after the Promise is resolved. This would be a simpler API, would allow for greater abstraction, and would make testing easier since you'd now be able to wait for this execution to finish with a .then() block in your tests as well.
Based on the Twilio documentation examples, Actions Framework, I am not having much luck with capturing events for WrapupTask or beforeWrapupTask, it appears the events just never fire and I am not clear on how to go about troubleshooting this?
The code examples I've tired (even identical examples from the documentation) using the latest version of Twilio Flex and the --flexui2 deployment of the Twilio Flex plugin (#twilio-labs/plugin-flex 5.1.2) that don't fire are:
Actions.addListener("beforeWrapupTask", (payload) => {
console.log(`***Task Channel Unique Name: ${payload.task.taskChannelUniqueName}`);
alert("Fired - beforeWrapupTask")
})
or
Actions.addListener("WrapupTask", (payload) => {
console.log(`***Task Channel Unique Name: ${payload.task.taskChannelUniqueName}`);
alert("Fired - WrapupTask")
})
and no luck either with this approach (with many different variations of) - actually the below approach seemed to introduce issues with other events firing like afterAcceptTask for some unknown reason.
flex.Actions.replaceAction("WrapupTask", (payload, original) => {
return new Promise(function(resolve, reject) {
// Send the message:
console.log('***** THIS EVENT FIRED!!!! *****')
}).then(response => {
// Wait until the message is sent to wrap-up the task:
resolve(original(payload));
});
});
Any reason the examples don't work? Has anything changed? I can get beforeCompleteTask working but I really need beforeWrapupTask.
I've exhausted all attempts at finding any information in the documentation or other sources.
Thanks!
So for Voice tasks, it works differently from feedback I received back from a Twilio support ticket. You would take the approach below.
//start listening on reservation created
manager.workerClient.on("reservationCreated", (reservation) => {
//trigger code when wrap-up starts
reservation.on("wrapup", (reservation) => {
alert("End Media Capture - WrapupTask")
});
});
In my App I have two windows: mainWindow and actionWindow. On my mainWindow I use the ipcRenderer.on listener to receive as message from the main process when the actionWindow is closed. The message however doesn't come through.
The mainWindow is used to control actions that take place on the actionWindow (e.g. navigate to an URL, remotely close the window, ...). I want to give the user the power to move and close the actionWindow manually as well, which is why its title bar is visible and usable.
I expose ipcRenderer.invoke for two-way communication and ipcRenderer.on to the mainWindow's renderer via contextBridge in a preload file.
This is what the code looks like (based on vite-electron-builder template)
main process
const mainWindow = new BrowserWindow({
show: false, // Use 'ready-to-show' event to show window
webPreferences: {
nativeWindowOpen: true,
webviewTag: false,
preload: join(__dirname, "../../preload/dist/index.cjs"),
},
});
const actionWindow = new BrowserWindow({
// some props
})
actionWindow.on("close", () => {
console.log("window closed")
mainWindow.webContents.send("closed", { message: "window closed" });
});
preload
contextBridge.exposeInMainWorld("ipcRenderer", {
invoke: ipcRenderer.invoke,
on: ipcRenderer.on,
});
renderer (mainWindow)
window.ipcRenderer.on("closed", () => {
console.log("message received")
// do something
});
I know for a fact that
mainWindow has access to the exposed listeners, since invoke works and the actions it fires on the main process are executed on the actionWindow as supposed + the response also comes back to the renderer.
the close listener on the actionWindow works since I can see the log window closed in my console
message received doesn't appear in my dev tools console
To me this means that either
mainWindow.webContents.send doesn't work -> the message is never sent
window.ipcRenderer.on doesn't work -> the message never reaches its destination
So either my code is buggy or Electron has recently put some restrictions on one of these methods which I'm not aware of.
Any ideas?
If there is a smarter way to do this than IPC I'm also open to that.
Ok after hours of searching, trying and suffering I (almost accidentaly) found a solution to my problem. It really seems to be the case that electron simply doesn't do anything anymore when you call the on method from your renderer.
Studying the docs about contextBridge again I saw that the way I exposed invoke and on to the renderer, was considered bad code. The safer way to do this is expose a function for EVERY ipc channel you want to use. In my case using TypeScript it looks like this:
preload
contextBridge.exposeInMainWorld("ipcRenderer", {
invokeOpen: async (optionsString: string) => {
await ipcRenderer.invoke("open", optionsString);
},
onClose: (callback: () => void) => {
ipcRenderer.on("closed", callback);
},
removeOnClose: (callback: () => void) => {
ipcRenderer.removeListener("closed", callback);
},
});
renderer(mainWindow)
window.ipcRenderer.onClose(() => {
// do sth
});
window.ipcRenderer.invokeOpen(JSON.stringify(someData)).then(() => {
// do sth when response came back
});
NOTE: To prevent memory leaks by creating listeners on every render of the mainWindow you also have to use a cleanup function which is provided with removeOnClose (see preload). How to use this function differs depending on the frontend framework. Using React it looks like this:
const doSth= () => {
console.log("doing something")
...
};
useEffect(() => {
window.ipcRenderer.onClose(doSth);
return () => {
window.ipcRenderer.removeOnClose(doSth);
};
}, []);
Not only is this a safer solution, it actually suddenly works :O
Using the cleanup function we also take care of leaks.
I have an Ionic 4 app in which we have three tabs. Each tab contains data which will be retrieved from api call. The data will change frequently.
When we move between tabs the api will be called and the data will be re-binded. We had a requirement that when the app is minimized and open again the api has to be called and the data has to be re-binded.
I used the platform resume event as below in all the three tabs.
this.platform.ready().then(() => {
this.platform.resume.subscribe((e) => {
// API call of each function (different api for tabs)
});
});
Now, When the app is resumed after minimized, the platform resume event is called by it is calling multiple times as I used resume event in all the three tabs.
Please help to overcome this problem. Thanks in advance.
I'm not sure but what I gather from your question and comments, it would make sense to have a subject that will update on resume and on each tab have the function that request each API listening to that observable?
something like this: (on main app)
this.platform.ready().then(() => {
this.platform.resume.subscribe((e) => {
this.appResumedSubject.next(true);
});
});
and on tab1:
this.appResumedObservable.subscribe(result => {
if(result){
this.apiCall1();
}
});
and on tab2:
this.appResumedObservable.subscribe(result => {
if(result){
this.apiCall2();
}
});
to make it work seamlessly on both tabs it would be needed to have appResumeSubject defined on a service provider.