Sending data in chunks using Vue.js

Question

Sending data in chunks using Vue.js

I'm interested in sending the data in chunks. Currently, what I send to the server looks like this: for loop - 1, 2, 3. However, the server receives it asynchronously as 3, 1, 2 and I need it to be received synchronously in the order of my for loop: 1, 2, 3. How can I achieve this?

//52428800
                const chunkSize = 1377628
                let beginUpload = data;
                let component = this;
                let start = 0;
                let startCount = 0;
                let callStoreCouunt = 0;

                for (start; start < zipedFile.length; start += chunkSize) {
                    const chunk = zipedFile.slice(start, start + chunkSize + 1)
                    startCount +=1;
                        // debugger
                        // var base64Image = new Buffer( zipedFile ).toString('base64');
                        var base64Image = new Buffer( chunk ).toString('base64');
                        console.log(chunk, startCount);

                    let uploadPackage: documentInterfaces.UploadPackage = {
                        transaction: {
                            documentId: {value: data.documentId.value},
                            transactionId: data.transactionId,
                            fileGuid: data.fileGuid
                        },
                        packageBuffer: base64Image
                    };
                    // debugger

                    


                    component.$store.dispatch('documents/uploadPackage', uploadPackage)
                    .then(({ data, status }: { data: documentInterfaces.ReciveAttachScene , status: number }) => {
                        // debugger
                        if(status !== 200){
                            component.$message({
                                message: data,
                                type: "error"
                            });
                            component.rejectUpload(beginUpload);
                        }
                        else{
                            callStoreCouunt+=1;
                            console.log(chunk, "res" + callStoreCouunt)
                            debugger
                            if(callStoreCouunt === startCount){

                                let commitPackage = {
                                    transaction: {
                                        documentId: {value: uploadPackage.transaction.documentId.value},
                                        transactionId: uploadPackage.transaction.transactionId,
                                        fileGuid: uploadPackage.transaction.fileGuid
                                    }
                                };
                              debugger
                                component.commitUpload(commitPackage);
                            }
                        }
                        });
                    }

javascript vue.js asynchronous async-await

Answer 1

Answer №1

Data transmission can be unpredictable, with chunks of data taking different paths and potentially circling the globe before reaching the server due to network issues.

Even if one chunk is sent a few milliseconds earlier than another, it doesn't guarantee it will reach the server first.

To address this issue, there are several solutions:

Solution 1:

Wait for the server response before sending the next chunk:

let state = {
  isPaused: false
}
let sentChunks = 0
let totalChunks = getTotalChunksAmount()
let chunkToSend = ...

setInterval(() => {
  if (!isPaused && sentChunks < totalChunks) {
    state.isPaused = true
    send(chunkToSend)
    sentChunks += 1
  }
}, 100)

onServerReachListener(response => {
  if (response === ...) {
    state.isPaused = false
  }
})

Solution 2:

If real-time sequential processing isn't necessary, wait for all chunks to arrive at the server and then sort them before processing:

let chunks = []
onChunkReceived (chunk) {
  if (chunk.isLast) {
    chunks.push(chunk)
    chunks.sort()
    processChunks()  
  }
  else {
    chunks.push(chunk)
  }
}

Solution 3:

If real-time sequential processing is required, assign an id property to each chunk for sequential processing while storing any out-of-order chunks for later:

let chunksToProcess = []
let lastProcessedChunkId = -1 
 
onChunkReceived (chunk) {
  if (chunk.id === lastProcessedChunkId) { 
    processChunk()
    lastProcessedChunkId += 1
    processStoredChunks()
  }
  else {
    chunksToProcess.push(chunk)
  }
}

Answer 2

Data transmission can be unpredictable, with chunks of data taking different paths and potentially circling the globe before reaching the server due to network issues.

Even if one chunk is sent a few milliseconds earlier than another, it doesn't guarantee it will reach the server first.

To address this issue, there are several solutions:

Solution 1:

Wait for the server response before sending the next chunk:

let state = {
  isPaused: false
}
let sentChunks = 0
let totalChunks = getTotalChunksAmount()
let chunkToSend = ...

setInterval(() => {
  if (!isPaused && sentChunks < totalChunks) {
    state.isPaused = true
    send(chunkToSend)
    sentChunks += 1
  }
}, 100)

onServerReachListener(response => {
  if (response === ...) {
    state.isPaused = false
  }
})

Solution 2:

If real-time sequential processing isn't necessary, wait for all chunks to arrive at the server and then sort them before processing:

let chunks = []
onChunkReceived (chunk) {
  if (chunk.isLast) {
    chunks.push(chunk)
    chunks.sort()
    processChunks()  
  }
  else {
    chunks.push(chunk)
  }
}

Solution 3:

If real-time sequential processing is required, assign an id property to each chunk for sequential processing while storing any out-of-order chunks for later:

let chunksToProcess = []
let lastProcessedChunkId = -1 
 
onChunkReceived (chunk) {
  if (chunk.id === lastProcessedChunkId) { 
    processChunk()
    lastProcessedChunkId += 1
    processStoredChunks()
  }
  else {
    chunksToProcess.push(chunk)
  }
}

Sending data in chunks using Vue.js

Answer №1

Solution 1:

Solution 2:

Solution 3:

Similar questions

Retrieving data from a React state in one component and utilizing it in a separate component

What is the functionality of the save callback in Mongoose?

Seems like JavaScript's .active functionality is failing to function properly in my case

Error: Attempting to access property 'setData' of an undefined object results in a TypeError [Slider]

Is it possible to use an angular expression as the ng-click function?

Error message: Attempting to access the property '_layerAdd' of an undefined object in the context of vue and leaflet integration

JS filter function is not functioning as expected. It's unclear what the issue might be

Unexpected loading glitches occurring in vue-material components

Hiding the C3 tooltip after engaging with it

Troubleshooting: AngularJS Form Submission Failure

Compare the precise value of $(window).height() to a specific scroll value

Does catching errors cause the for loop to stop in JavaScript?

Error: The method specified in $validator.methods[method] does not exist

Choose a navigation item from the list containing a nested span element

What is the most efficient way to execute a method multiple times concurrently in C# using tasks?

React is having trouble loading the page and is displaying the message "Please enable JavaScript to use this application."

Incorporating an NPM module with dependencies within the Meteor framework

nodejs callbacks and their return values

Why is my Angular form submitting twice?

trigger an event once an element has completed cycling using cycle.js