Compress requests from Angular to web API

Question

I am trying to optimize bandwidth usage by compressing requests from my angular client to a AspNet Web API. Is there any way to achieve this?

I wonder why was this perfectly valid question voted to be closed. — Darin Dimitrov, Dec 13 '15 at 13:56
@DarinDimitrov Too broad perhaps. No MCVE is another possibility. Also it could be considered a [dupe](http://stackoverflow.com/questions/32246690/angularjs-compress-http-post-data) — DavidG, Dec 13 '15 at 14:08
I don't think that the question is too broad. Quite the contrary - it's straight on the point: looking for a way to optimize HTTP requests sent from a javascript client. As far as MCVE is concerned, in this specific case there's no code or example to be provided as this is more of a design kind of question. On the other hand I agree that it could be a dupe. — Darin Dimitrov, Dec 13 '15 at 14:12
@DavidG if you are looking for questions that have only one possible single answer ever, then I think you are looking on the wrong place. Or at least not in this industry. With this reasoning I invite you to go ahead and vote to close every possible question that you encounter on this very same site. Because believe me, all questions here can have more than one answer. For me only the *dupe* close argument stands here. — Darin Dimitrov, Dec 13 '15 at 14:15
I see this conversation is going nowhere other than to a possible argument so I'm out. — DavidG, Dec 13 '15 at 14:17
Maybe you could use `MessagePack`? There is an implementation of such a mediatypeformatter in the webapicontrib project. I dont know what the best lib is to use it on the client side though. — peco, Dec 13 '15 at 14:29
You could use jsonpack if you're server can run it to unpack the JSON (ie if you're running Node): https://github.com/sapienlab/jsonpack/ — Shaun Scovil, Dec 13 '15 at 14:49
Actually he doesn't seem to be using Node on the server because his question is tagged with `asp.net-web-api` which could provide some directions as to which framework is being used. — Darin Dimitrov, Dec 13 '15 at 16:01

Darin Dimitrov · Accepted Answer · 2015-12-13T16:31:14.600

One possibility is to use industry standard algorithms for compressing data such as gzip. They provide very good compression for raw strings and if you are sending large objects to the server then you can definitely gain performance by reducing the size of your requests. Not to mention the benefits you get when your app runs on mobile devices with limited bandwidth.

But enough of chattering, let's get to practice. The biggest challenge here is to generate valid gzip request in javascript. One possibility is to read the specification of this format and roll your own implementation or use some existing library. One that I find particularly interesting is pako.

It's trivial to install in your application using bower by simply issuing the following command:

bower install pako

Now let's see how a sample request would look from a client perspective. Let's suppose that you would like to send the following JSON to the server (either as POST or PUT verbs):

{ my: 'super', puper: [456, 567], awesome: 'pako' }

You could achieve that as simply as using the plain XMLHttpRequest object available in modern browsers (read below if you are interested in an Angular specific solution):

<script src="bower_components/pako/dist/pako.min.js"></script>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/myresource', true);

    // Indicate to the serve that you will be sending data in JSON format
    xhr.setRequestHeader('Content-Type', 'application/json');
    // Indicate to the server that your data is encoded using the gzip format
    xhr.setRequestHeader('Content-Encoding', 'gzip');

    xhr.onreadystatechange = function (e) {
        if (this.readyState == 4 && this.status == 200) {
            alert('We have just successfully sent a gzip encoded payload to the server');
        }
    };

    var data = { my: 'super', puper: [456, 567], awesome: 'pako' };
    var binaryString = pako.gzip(JSON.stringify(data));
    xhr.send(binaryString);
</script>

and since you asked about an Angular request, let's Angularify this sample AJAX request using the native $http object:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body ng-app="myapp">
    <div ng-controller="HomeController"></div>
    <script src="bower_components/pako/dist/pako.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        angular.module('myapp', []).controller('HomeController', ['$http', function ($http) {
            var data = { my: 'super', puper: [456, 567], awesome: 'pako' };
            var binaryString = pako.gzip(JSON.stringify(data));
            var req = {
                method: 'POST',
                url: '/api/myresource',
                headers: {
                    'Content-Type': 'application/json',
                    'Content-Encoding': 'gzip'
                },
                data: binaryString,
                transformRequest: []
            }

            $http(req).then(function (result) {
                alert('We have just successfully sent a gzip encoded payload to the server');
            }, function () {
                alert('OOPS, something went wrong, checkout the Network tab in your browser for more details');
            });
        }]);
    </script>
</body>
</html>

OK, basically we have now covered the client side sending part which uses an AJAX request and specifies the proper Content-Encoding request header.

Now let's deal with the server side part. Let's suppose that you use Web API 2 hosted in IIS.

So basically you would have a Startup class in your ASP.NET application that will bootstrap your Web API:

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        var config = GlobalConfiguration.Configuration;
        config.MapHttpAttributeRoutes();
        app.UseWebApi(config);
        config.EnsureInitialized();
    }
}

and then obviously you have a view model to map your payload to:

public class MyViewModel
{
    public string My { get; set; }
    public int[] Puper { get; set; }
    public string Awesome { get; set; }
}

and a Web API controller that will serve the purpose of a server side handler of your AJAX requests:

public class TestController : ApiController
{
    [HttpPost]
    [Route("api/myresource")]
    public HttpResponseMessage Post(MyViewModel viewModel)
    {
        // We will simply echo out the received request object to the response
        var response = Request.CreateResponse(HttpStatusCode.OK, viewModel);
        return response;
    }
}

So far so good. Unfortunately Web API doesn't support gzip request encoding out of the box. But since this is a pretty extensible framework all you have to do is write a custom delegating handler that will know how to unzip the request coming from the client.

Let's start by writing a custom HttpContent:

public class DecompressedHttpContent: HttpContent
{
    private readonly HttpContent _content;
    public DecompressedHttpContent(HttpContent content)
    {
        _content = content;
        foreach (var header in _content.Headers)
        {
            Headers.TryAddWithoutValidation(header.Key, header.Value);
        }
    }

    protected override async Task SerializeToStreamAsync(Stream stream, TransportContext context)
    {
        using (var originalStream = await _content.ReadAsStreamAsync())
        using (var gzipStream = new GZipStream(originalStream, CompressionMode.Decompress))
        {
            await gzipStream.CopyToAsync(stream);
        }
    }

    protected override bool TryComputeLength(out long length)
    {
        length = -1;
        return false;
    }
}

and then our delegating handler:

public class GzipDecompressionHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request,
        CancellationToken cancellationToken
    )
    {
        var isCompressedPayload = request.Content.Headers.ContentEncoding.Any(x => string.Equals(x, "gzip", StringComparison.InvariantCultureIgnoreCase));
        if (!isCompressedPayload)
        {
            return await base.SendAsync(request, cancellationToken);
        }

        request.Content = new DecompressedHttpContent(request.Content);
        return await base.SendAsync(request, cancellationToken);
    }
}

All that's left now is to register this custom handler in our Startup class:

config.MessageHandlers.Add(new GzipDecompressionHandler());

And that's pretty much it. Now when the TestController.Post action is called from client side AJAX request, the input body will contain the proper headers and our delegating handler will take care of decoding it so that when the Post action is called you would get the expected view model already deserialized.

Now to recap you should be aware that for small requests such as the one shown in this example you probably won't gain much by using gzip - you could even make things worse because of the magic gzip numbers that will add to the payload. But for bigger requests this approach will definitely boost reduce your requests size and I strongly encourage you to use gzip.

And here's the result of this effort:

The above has proved very helpful. However, I've run into an issue trying to make it work with non-standard characters such as Ø. If this is included in the object then it's not preserved in the same format after using pako. It seems like pako's string option may be helpful but I haven't been able to make that work. — Andrew, Mar 12 '19 at 03:20

Compress requests from Angular to web API

1 Answers1

Linked