How to stop downloading when the client cancels the request in nodejs - node.js

In the nodeJs application, I'm downloading a file with Axios. when the client cancels the request I have to stop downloading. After starting downloading How can I stop downloading?
with the following code, I notice that the client cancel its request:
req.on('close', function (err){
// Here I want to stop downloading
});
complete code :
const express = require('express')
const app = express()
const Axios = require('axios')
app.get('/download', (req, res) => {
req.on('close', function (err){
// Here I want to stop downloading
});
downloadFile(res)
})
async function downloadFile(res) {
const url = 'https://static.videezy.com/system/resources/previews/000/000/161/original/Volume2.mp4'
console.log('Connecting …')
const { data, headers } = await Axios({
url,
method: 'GET',
responseType: 'stream'
})
const totalLength = headers['content-length']
let offset = 0
res.set({
"Content-Disposition": 'attachment; filename="filename.mp4"',
"Content-Type": "application/octet-stream",
"Content-Length": totalLength,
// "Range": `bytes=${offset}` // my problem is here ....
});
data.on('data', (chunk) => {
res.write(chunk)
})
data.on('close', function () {
res.end('success')
})
data.on('error', function () {
res.send('something went wrong ....')
})
}

Axios documentation has a section about cancelation.
The code would look like:
// before sending the request
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// then pass-in the token with request config object
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
});
// upon cancelation
source.cancel('Operation canceled by the user');
Moreover, looks like there's an open issue for supporting AbortController/AbortSignal in Node.js 15+. You can check it out here.

Related

Simple Fetch API Post Request Fails No Matter What

I have been working on this issue for 2 days, looked at various pages and cannot find a single solution that would work.
Please only reply if you know how to write them with async await functions and please reply if you know the answer of fetch api. I am not looking for axios solutions for the time being.
I have a backend server which runs on port 8000 of localhost, frontend runs on port 3000. Front end is written in React, backend is written in Node/Express.
I am able to successfully make a GET request from backend server but the POST request fails for some reason with the error "VM942:1 POST http://localhost:8000/frontend-to-backend 500 (Internal Server Error)"
Backend server has this error: SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()
// React-To-Node-Connection
// React "App.js" file
// "package.json" file contains this
// "proxy": "http://localhost:8000"
useEffect(() => {
const getBackend = async () => {
const res = await fetch('backend-to-frontend');
const data = await res.json();
if (!res.ok) {
throw new Error(`Cannot get data from backend server. HTTP Status: ${res.status}`);
}
console.log(data.message);
// Prints "Hi from backend!"
}
getBackend();
const postBackend = async () => {
try {
const res = await fetch('http://localhost:8000/frontend-to-backend',
{
method: 'POST',
mode: 'no-cors',
body: JSON.stringify({ message: 'Hi from frontend!' }),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
);
if (res.ok) {
const data = await res.json();
console.log(data);
}
} catch (error) {
console.error(error);
}
}
postBackend();
}, []);
Now the backend code:
app.get('/backend-to-frontend', (req, res) => {
res.json({ message: 'Hi from backend!' });
});
app.post('/frontend-to-backend', (req, res) => {
try {
const reactMessage = JSON.parse(req.body.data);
console.log(`message: ${reactMessage}`);
} catch (err) {
console.error(err);
}
});
How to fix this? Please help!
Full backend server code can be found here:
const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.get('/backend-to-frontend', (req, res) => {
res.json({ message: 'Hi from backend!' });
});
app.post('/frontend-to-backend', (req, res) => {
try {
const reactMessage = JSON.parse(req.body.data);
console.log(`message: ${reactMessage}`);
} catch (err) {
console.error(err);
}
});
const port = process.env.PORT || 8000;
app.listen(port, function () {
console.log(`Backend server started on port ${port}.`);
});
with no-cors, you can only use simple headers, so you cannot POST JSON (see: Supplying request options)
Try urlencoded:
const postBackend = async() => {
try {
const res = await fetch('http://localhost:8000/frontend-to-backend', {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
'message': 'Hi from frontend!'
})
});
if (res.ok) {
const data = await res.json();
console.log(data);
}
} catch (error) {
console.error(error);
}
}
postBackend();
and on the server, don't parse req.body, as it's already done by middleware:
app.post('/frontend-to-backend', (req, res) => {
console.log('req.body: ', req.body);
try {
const reactMessage = req.body.message;
req.body.data may be an object (check with debugger). If so, you might try to stringify before parsing :
JSON.parse(JSON.stringify(req.body.data))
I finally found the answer, here is my sample code. I did not change the React code that much so it is pretty much same, I removed the no cors section and added cors to Express JS code.
Here is my React code.
// React-To-Node-Connection
// "package.json" file has the following line
// "proxy": "http://localhost:8000"
// React Code
useEffect(() => {
const getBackend = async () => {
const res = await fetch('/backend-to-frontend');
const data = await res.json();
if (!res.ok) {
throw new Error(`Cannot get data from backend server. HTTP Status: ${res.status}`);
}
console.log(data.message);
}
getBackend();
const postBackend = async () => {
try {
await fetch('http://localhost:8000/frontend-to-backend',
{
method: 'POST',
body: JSON.stringify({ message: 'Hi from frontend!' }),
headers: {
'Content-Type': 'application/json'
}
}
);
} catch (err) {
console.error(err);
}
}
postBackend();
}, []);
And here is my Express JS code.
const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
// Express JS Code
const cors = require('cors');
app.use(express.json());
app.use(cors());
app.get('/backend-to-frontend', (req, res) => {
res.json({ message: 'Hi from backend!' });
});
app.post('/frontend-to-backend', (req, res) => {
try {
console.log(req.body.message);
} catch (err) {
console.error(err);
}
});
const port = process.env.PORT || 8000;
app.listen(port, function () {
console.log(`Backend server started on port ${port}.`);
});
Thanks.

How to make sure that the file is downloaded and then return a response to client side?

I have to download a json file using nodejs and react.
So, when the user clicks on download button, a request is sent to nodejs, then I make an http request passing the user, pass, and the url to download json file on the server and then download this file on client side
The file download on server side takes almost 5 min, the problem is that I'm getting an network error before the download file is finished:
GET http://127.0.0.1:4000/downloadFile net::ERR_EMPTY_RESPONSE
Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:80)
When download button is clicked this function on react side is called:
downloadFile() {
this.setState({ buttonDownloadText: 'Wait ...' })
axios.get(process.env.REACT_APP_HOST + '/downloadFile')
.then(resp => {
window.open(process.env.REACT_APP_HOST + '/download?namefile=' + resp.data.fileName, '_self')
this.setState({ buttonDownloadText: 'Start download' })
})
.catch((error) => {
console.log(error) //here is where the Network Error is returned
this.setState({ buttonDownloadText: 'Error. Try again' })
})
}
Server side:
const http = require('http');
const fs = require('fs');
app.get('/downloadFile', function (req, res, next) {
try {
const headers = new Headers();
const URL = env.URL_API + '/api/downloadFile'
const DOWNLOADURL = env.URL_API + '/api/download'
headers.set('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch(URL, {
method: 'GET',
headers: headers,
})
.then(r => r.json())
.then(data =>
fetch(DOWNLOADURL + '/' + data.fileName, {
method: 'GET',
headers: headers,
}).then(result => {
const url = 'http://user:pass#url' + data.fileName
const arq = __dirname + '/download/' + data.fileName
var file = fs.createWriteStream(arq);
http.get(url, function (response) {
response.pipe(file);
file.on('finish', () => file.close(() => res.status(200).send({ file: data.fileName });)) //I have to return the file name to react function
});
}).catch(error => {
logger.error(`${error}`);
})
})
.catch(error => {
logger.error(`${error.status || 500} - ${error} - ${req.originalUrl} - ${req.method} - ${req.ip}`);
res.sendStatus(500)
})
....
});
downloadFile function must return the fileName, so I call download route to make a download on clint side
app.get('/download', function (req, res) {
try {
const file = __dirname + '/download/' + req.query.namefile;
res.download(file);
} catch (error) {
logger.error(`${error.status || 500} - ${error} - ${req.originalUrl} - ${req.method} - ${req.ip}`);
}
});
So, my point is, Why my downloadFile route is not waiting the download file finish to return it res.status(200).send({ file: data.fileName })?
As browsers cannot be forced to wait for a long response from the server, I suggest a different approach: upload the file to the cloud (e.g. AWS or Firebase) and return a link to the client.
If using Firebase (or another real time database) the server can set a flag in the db as the file upload is finished. Therefore client gets notified asynchronously when the file is available for the download.
Try to use XMLHttpRequest to get response from client side

How to send data from first server to other and get other server response in first server in nodejs?

I want to make a request or api call on server 1, this server then automatically request to Server 2 and send the response back to server 1. I am using NodeJs and Express.
Example:
app.post('/api/Is', function(req, response, callback) {
})
I am calling that API in postmain as : http://localhost:3000//api/Is
So it should automatically go on http://localhost:5000//api/Is and send the response back to http://localhost:3000//api/Is call.
I should only call http://localhost:3000//api/Is and in backend code it will take request body and pass it to http://localhost:5000//api/Is and send the response back to http://localhost:3000//api/Is
I think you can consider use the the proxy lib like 'node-http-proxy', the most easy way.
otherwise, you must be transfer the request and response use 'http moudle', like this(no debug, not sure it will work perfectly~):
const http = require('http');
app.post('/api/Is', function(req, response, callback) {
const options = {
host:'localhost',
port:'5000',
path:'/api/Is',
method: 'POST'
// maybe need pass 'headers'?
};
let proxyBody = '';
const req2 = http.request(options, function(res2) {
res2.on('data',function(chunk){
proxyBody += chunk;
}).on('end', function(){
// here can feedback the result to client, like:
// const { headers } = res2;
// response.send(proxyBody)
});
});
// .on('error'){} here handle the error response
req2.end();
});
you need to use any library to make API call from server1 to server2. below code I am using fetch library.
To install the fetch library
npm install node-fetch --save
//SERVER1//
const fetch = require('node-fetch');
router.get("/api/Is", async (req, res) => {
try{
let {success, data} = await getDataFromServer2(req);
if(success) return res.send({success: true, data: data})
res.send({success: false})
}catch(e){
res.send({success: false})
}
});
function getDataFromServer2(req){
return fetch('http://localhost:5000//api/Is', {
method: 'post',
body: req,
headers: { 'Content-Type': 'application/json' },
}).then(res => res.json())
.then((response)=>{
return {
success: true,
data: response
}
}).catch((error) => {
throw new Error("unable to fetch the roles ")
})
}

Fetch and post text in NodeJS

I'm trying to grab text from an API that only returns a string of text ((here)) and having troubles throwing that out in a response. When posting, it comes out as [object Response], and the console.log doesn't show the text I want out of it.
The code I'm using:
fetch('http://taskinoz.com/gdq/api').then(
function(response) {
console.log(response);
throttledSendMessage(channel, response);
return response;
})
.catch(function(error) {
throttledSendMessage(channel, "An error has occured");
})
Log can be found here
Thanks for looking with me, couldn't find a solution :/
I think that because fetch returns a Response you need to call one of the functions on Response in order to get at the body's text. Here's an example:
fetch('https://github.com/')
.then(res => res.text())
.then(body => console.log(body));
Probably the problem is in async behavior of node.js. You can read more here
Also, I'm assume you use this package to make fetch request in node.js.
And assume that throttledSendMessage function is synchronous.
About your problem, just try to rewrite co de to use async/await for cleaner solution.
// We'll use IIFE function
(async () => {
const fetchResult = await fetch('http://taskinoz.com/gdq/api')
// Here fetch return the promise, so we need to await it again and parse according to our needs. So, the result code would be this
const data = await fetchResult.text();
throttledSendMessage(channel, data);
return data;
})()
Fetch is not available in nodejs , you could use the node-fetch https://www.npmjs.com/package/node-fetch , or you could use this fetch function:
const https = require('https');
const http = require('http');
function fetch(url, options = {}) {
return new Promise((resolve, reject) => {
if (!url) return reject(new Error('Url is required'));
const { body, method = 'GET', ...restOptions } = options;
const client = url.startsWith('https') ? https : http;
const request = client.request(url, { method, ...restOptions }, (res) => {
let chunks = '';
res.setEncoding('utf8');
res.on('data', (chunk) => {
chunks += chunk;
});
res.on('end', () => {
resolve({ statusCode: res.statusCode, body: chunks });
});
});
request.on('error', (err) => {
reject(err);
});
if (body) {
request.setHeader('Content-Length', body.length);
request.write(body);
}
request.end();
});
}
module.exports = fetch;
you could use it like this inside your code :
const result = await fetch(
`https://YOUR_URL`,
{
method: 'PUT',
body: JSON.stringify({ test: 'This is just a test', prio: 1 }),
},
);

How to test response data from Express in Jest

I'm writing unit tests for separate middleware functions in Node/Express using Jest.
A simple example of the middleware:
function sendSomeStuff(req, res, next) {
try {
const data = {'some-prop':'some-value'};
res.json(data);
next();
} catch (err) {
next(err);
}
}
And a sample of my test suite:
const httpMocks = require('node-mocks-http');
const { sendSomeStuff } = require('/some/path/to/middleware');
describe('sendSomeStuff', () => {
test('should send some stuff', () => {
const request = httpMocks.createRequest({
method: 'GET',
url: '/some/url'
});
let response = httpMocks.createResponse();
sendSomeStuff(request, response, (err) => {
expect(err).toBeFalsy();
// How to 'capture' what is sent as JSON in the function?
});
});
});
I have to provide a callback to populate the next parameter, which is called in the function. Normally, this would 'find the next matching pattern', and pass the req and res objects to that middleware. However, how can I do this in a test set-up? I need to verify the JSON from the response.
I don't want to touch the middleware itself, it should be contained in the test environment.
Am I missing something here?
Found a fix!
Leaving this here for someone else who might struggle with the same.
When returning data using res.send(), res.json() or something similar, the response object (from const response = httpMocks.createResponse();)
itself is updated. The data can be collected using res._getData():
const httpMocks = require('node-mocks-http');
const { sendSomeStuff } = require('/some/path/to/middleware');
describe('sendSomeStuff', () => {
test('should send some stuff', () => {
const request = httpMocks.createRequest({
method: 'GET',
url: '/some/url'
});
const response = httpMocks.createResponse();
sendSomeStuff(request, response, (err) => {
expect(err).toBeFalsy();
});
const { property } = JSON.parse(response._getData());
expect(property).toBe('someValue');
});
});
});
I did a different way by utilising jest.fn(). For example:
if you wanna test res.json({ status: YOUR_RETURNED_STATUS }).status(200);
const res = {};
res.json = jest.fn(resObj => ({
status: jest.fn(status => ({ res: { ...resObj, statusCode: status }
})),
}));
Basically, I mock the res chain methods(json and status).
That way you can do expect(YOUR_TEST_FUNCTION_CALL).toEqual({ res: { status: 'successful', statusCode: 200 }}); if your response structure is like that.

Resources