Javascript protobuf example

http://stackoverflow.com/q/21802866/1928023

by Daedalus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<h1>Javascript protobuf example</h1>
Demo for <a href="http://stackoverflow.com/q/21802866/1928023">this SO question</a>.

<h2>Initial Object</h2>
<pre id="obj"></pre>
<h2>Encoded buffer</h2>
<pre id="buff"></pre>
<h2>Decoded Object</h2>
<pre id="result"></pre>

JavaScript

require.config({
    paths : {
        'long'  : '//rawgit.com/dcodeIO/long.js/master/dist/long.min',
        'bytebuffer' : '//rawgit.com/dcodeIO/bytebuffer.js/master/dist/bytebuffer.min',
        'ProtoBuf'   : '//cdn.rawgit.com/dcodeIO/protobuf.js/6.X.X/dist/protobuf.min.js'
    }
})

require(['message'], function(message) {
    
    var data = {
        repos : ['a', 'b', 'c'],
        labels: ['d', 'e', 'f'],
        milestones : ['g', 'h', 'i'],
        username : 'jgb'
    }
    document.getElementById('obj').innerHTML = JSON.stringify(data, null, 2);
    
    var request = new message.arguments(data);
    
    // Convert request data to base64
    var base64String = request.toBase64();
    console.log(base64String);
    document.getElementById('buff').innerHTML = base64String;
    
    // Convert base64 back
    var decodedRequest = message.arguments.decode64(base64String);
    console.log(decodedRequest);
    document.getElementById('result').innerHTML = JSON.stringify(decodedRequest, null, 2);
});

// Protobuf message definition
// Message definition could also be stored in a .proto definition file
// See: https://github.com/dcodeIO/ProtoBuf.js/wiki
define('message', ['ProtoBuf'], function(ProtoBuf) {
    var proto = {
        package : 'message',
        messages : [
            {
                name : 'arguments',
                fields : [
                    {
                        rule : 'repeated',
                        type : 'string',
                        name : 'repos',
                        id : 1
                    },
                    {
                        rule : 'repeated',
                        type : 'string',
                        name : 'labels',
                        id : 2
                    },
                    {
                        rule : 'repeated',
                        type : 'string',
                        name : 'milestones',
                        id : 3
                    },
               ...