Geek Answers Handbook

Transferring huge amounts of data from a web server to a client

I am starting a new project that will display a complex graph using an HTML5 canvas.

We currently have an implementation of Windows Forms, and we want to transfer it to the Internet. Thus, the layout, drawing objects, and all drawing metadata are generated in C #. We only need to implement the drawing, and we will use the HTML5 canvas.

On the server side there will be ASP MVC. He will calculate the drawing model and send it to the client. The client will then use the canvas to represent the data.

The problem is that the drawing model can sometimes be huge. Possibly 10Mb-50Mb metadata. What is the best way to send all drawing data from the server to the client?

Use the model for the script on the page that creates the drawing objects in JavaScript

This will be the standard way. I will generate a model with drawing objects in C #, and then I will convert these objects to JavaScript.

  • PROS: easy to implement
  • CONS: the page will be heavy.

Return JsonResult from the controller returning drawing data

I could get it, for example, using jQuery. This option failed because I reached the maxJsonLength property. I know that it can be changed in web.config, but it seems like this is not a good idea. 3.

  • PROS: Simple implementation, can use ajax to load drawing objects from the server and report progress to the user.
  • CONS: It does not seem like a good idea to change the maxJsonLength property in Web.config.

Creating a temp script file with drawing data on the server and including it on the client page

The server will generate drawing data in a JS script file. Then the server will include this page as JavaScript on the client page, so the drawing data will be loaded in the client. This load can also be accomplished with ajax.

  • PROS: This is like downloading a file, if it is very large, it will not be a problem.
  • CONS: harder to implement. We need to manage temporary files, and we need to know when the file was transferred, and then delete it.

Another alternative

Any other options would be welcome , as I am not an expert in HTML programming.

+6
source share
2 answers

I think I’ll take a slightly different approach. I will use servicestack , here I assume that you have a bus for business. Now, instead of canvas, I will switch from backbone js or angular js . There are many other frameworks for creating a user interface. Now, using js as a library, I click only the details that are needed to create the user interface or click HTML with the user interface that is needed for the user interface. So, here the speed will be more, and the page will be easy. As soon as miniature Javascript arrives at the client, it is not loaded, but is used only for calculating and rendering the html part on the page. And the one-page application will run as fast as the desktop. Almost so much. I hope this is useful to you. I have added links, if you need more information, please let me know.

+1
source

Put the heavy part (script and data on the subpage) in the iframe on the lightweight page so that the heavy material can be loaded asynchronously. This has the advantages of simple implementation of the first script-on-page option, while getting the pro (and not one of the temporary file management files) of the third parameter load-as-separate-script-file.

During iframe loading, you can display the loaded image so that the user knows what is happening.

0
source

More articles:


All Articles