How to find how much bytes were sent on fetch request?-CodePudding

I am fetching data from different API with javascript's fetch API. But how can I find out how many bytes are sent on each request for analytics?

The request could be in any method. I know that I can get the amount of bytes received with response.headers["content-length"]. I need to find out a way to get the amount of bytes sent on the frontend (browser or mobile using React Native). Ideally, it would be the total size of the request, but just the size of the request body would be good enough.

CodePudding user response：

You can get the value that will be set in the Content-Length header by reading the Request's body as text and checking the length of the returned string:

(async () => {
  const formdata = new FormData();
  const file = new Blob(["data".repeat(1024)])
  formdata.append("key", file)
  const req = new Request("/", { method: "POST", body: formdata });
  console.log((await req.clone().text()).length);
  fetch(req);
  console.log("check the Network panel of your dev tools to see the sent header");
})();

However this only applies for requests where this header is sent, i.e not for GET and HEAD requests.

CodePudding user response：

A quick solution that I used - a tiny middleware (I use Express):

const socketBytes = new Map();
app.use((req, res, next) => {
    req.socketProgress = getSocketProgress(req.socket);
    next();
});

/**
 * return kb read delta for given socket
 */
function getSocketProgress(socket) {
    const currBytesRead = socket.bytesRead;
    let prevBytesRead;
    if (!socketBytes.has(socket)) {
        prevBytesRead = 0;
    } else {
        prevBytesRead = socketBytes.get(socket).prevBytesRead;
    }
    socketBytes.set(socket, {prevBytesRead: currBytesRead})
    return (currBytesRead-prevBytesRead)/1024;
}

And then you can use req.socketProgress in your middlewares.