WebSocket-Resources / websocket refactor

This commit provides the javascript complement to
[WebSocket-Resources](https://github.com/WhisperSystems/WebSocket-Resources),
allowing us to use a bi-directional request-response framework over
websockets.

See websocket-resources.js and websocket-resources_test.js
for usage details.

Along the way I also factored the websocket keepalive and reconnect
logic into its own file/wrapper object.

background.html

@@ -21,6 +21,8 @@
 	<script type="text/javascript" src="js/protobufs.js"></script>
   <script type="text/javascript" src="js/curve25519_compiled.js"></script>
   <script type="text/javascript" src="js/nativeclient.js"></script>
+	<script type="text/javascript" src="js/websocket.js"></script>
+	<script type="text/javascript" src="js/websocket-resources.js"></script>
 	<script type="text/javascript" src="js/helpers.js"></script>
   <script type="text/javascript" src="js/storage.js"></script>
   <script type="text/javascript" src="js/storage/devices.js"></script>

index.html

@@ -131,6 +131,8 @@
         <script type="text/javascript" src="js/protobufs.js"></script>
         <script type="text/javascript" src="js/curve25519_compiled.js"></script>
         <script type="text/javascript" src="js/nativeclient.js"></script>
+        <script type="text/javascript" src="js/websocket.js"></script>
+        <script type="text/javascript" src="js/websocket-resources.js"></script>
         <script type="text/javascript" src="js/helpers.js"></script>
         <script type="text/javascript" src="js/storage.js"></script>
         <script type="text/javascript" src="js/storage/devices.js"></script>

js/api.js

@@ -303,91 +303,16 @@ window.textsecure.api = function () {
 
     var getWebsocket = function(url, auth, reconnectTimeout) {
         var URL = URL_BASE.replace(/^http/g, 'ws') + url + '/?';
+        var params = '';
         if (auth) {
             var user = textsecure.storage.getUnencrypted("number_id");
             var password = textsecure.storage.getEncrypted("password");
             var params = $.param({
-                login: '+' + getString(user).substring(1),
+                login: '+' + user.substring(1),
-                password: getString(password)
+                password: password
             });
-        } else
+        }
-            var params = $.param({});
+        return window.textsecure.websocket(URL+params)
-
-        var keepAliveTimer;
-        var reconnectSemaphore = 0;
-        var socketWrapper = { onmessage: function() {}, ondisconnect: function() {}, onconnect: function() {} };
-
-        var connect = function() {
-            clearTimeout(keepAliveTimer);
-            reconnectSemaphore++;
-            if (reconnectSemaphore <= 0)
-                return;
-
-            if (socket) { socket.close(); }
-            var socket = new WebSocket(URL+params);
-
-            function resetKeepAliveTimer() {
-                clearTimeout(keepAliveTimer);
-                keepAliveTimer = setTimeout(function() {
-                    socket.send(JSON.stringify({type: 1, id: 0}));
-                    resetKeepAliveTimer();
-                }, 50000);
-            };
-
-            socket.onerror = function(socketEvent) {
-                console.log('Server is down :(');
-                reconnectSemaphore--;
-                setTimeout(function() { connect(); }, reconnectTimeout);
-                socketWrapper.ondisconnect();
-            };
-
-            socket.onclose = function(socketEvent) {
-                console.log('Server closed :(');
-                reconnectSemaphore--;
-                setTimeout(function() { connect(); }, reconnectTimeout);
-                socketWrapper.ondisconnect();
-            };
-
-            socket.onopen = function(socketEvent) {
-                console.log('Connected to server!');
-                socketWrapper.onconnect();
-                resetKeepAliveTimer();
-            };
-
-            //TODO: wrap onmessage so that we reconnect on missing pong
-            socket.onmessage = function(response) {
-                var blob = response.data;
-                var reader = new FileReader();
-                reader.addEventListener("loadend", function() {
-                    // reader.result contains the contents of blob as a typed array
-                    try {
-                        var message = textsecure.protobuf.WebSocketMessage.decode(reader.result);
-                        console.log(message);
-                        if (message.type === textsecure.protobuf.WebSocketMessage.Type.REQUEST ) {
-                            socketWrapper.onmessage(message.request);
-                        }
-                        else {
-                            throw "Got invalid message from server: " + message;
-                        }
-
-                    } catch (e) {
-                        console.log('Error parsing server JSON message: ' + response);
-                        return;
-                    }
-                });
-
-                reader.readAsArrayBuffer(blob);
-
-                resetKeepAliveTimer();
-            };
-
-            socketWrapper.send = function(msg) {
-                socket.send(msg);
-            }
-        };
-        connect();
-
-        return socketWrapper;
     }
 
     self.getMessageWebsocket = function() {

js/helpers.js

@@ -240,19 +240,14 @@ window.textsecure.replay = function() {
 window.textsecure.subscribeToPush = function(message_callback) {
     var socket = textsecure.api.getMessageWebsocket();
 
-    socket.onmessage = function(message) {
+    var resource = new WebSocketResource(socket, function(request) {
-        textsecure.protocol.decryptWebsocketMessage(message.body).then(function(plaintext) {
+        // TODO: handle different types of requests. for now we only receive
+        // PUT /messages <base64-encoded encrypted IncomingPushMessageSignal>
+        textsecure.protocol.decryptWebsocketMessage(request.body).then(function(plaintext) {
             var proto = textsecure.protobuf.IncomingPushMessageSignal.decode(plaintext);
             // After this point, a) decoding errors are not the server's fault, and
             // b) we should handle them gracefully and tell the user they received an invalid message
-            console.log("Successfully decoded message with id: " + message.id);
+            request.respond(200, 'OK');
-
-            socket.send(
-                new textsecure.protobuf.WebSocketMessage({
-                    response: { id: message.id, message: 'OK', status: 200 },
-                    type: textsecure.protobuf.WebSocketMessage.Type.RESPONSE
-                }).encode().toArrayBuffer()
-            );
 
             return textsecure.protocol.handleIncomingPushMessageProto(proto).then(function(decrypted) {
                 // Delivery receipt
@@ -348,7 +343,7 @@ window.textsecure.subscribeToPush = function(message_callback) {
             console.log("Error handling incoming message: ");
             console.log(e);
         });
-    };
+    });
 };
 
 window.textsecure.registerSingleDevice = function(number, verificationCode, stepDone) {

js/websocket-resources.js

@@ -0,0 +1,134 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+;(function(){
+    'use strict';
+
+    /*
+     * WebSocket-Resources
+     *
+     * Create a request-response interface over websockets using the
+     * WebSocket-Resources sub-protocol[1].
+     *
+     * var client = new WebSocketResource(socket, function(request) {
+     *    request.respond(200, 'OK');
+     * });
+     *
+     * client.sendRequest({
+     *    verb: 'PUT',
+     *    path: '/v1/messages',
+     *    body: '{ some: "json" }',
+     *    success: function(message, status, request) {...},
+     *    error: function(message, status, request) {...}
+     * });
+     *
+     * 1. https://github.com/WhisperSystems/WebSocket-Resources
+     *
+     */
+
+    var Request = function(options) {
+        this.verb    = options.verb || options.type;
+        this.path    = options.path || options.url;
+        this.body    = options.body || options.data;
+        this.success = options.success
+        this.error   = options.error
+        this.id      = options.id;
+
+        if (this.id === undefined) {
+            var bits = new Uint32Array(2);
+            window.crypto.getRandomValues(bits);
+            this.id = dcodeIO.Long.fromBits(bits[0], bits[1], true);
+        }
+    };
+
+    var IncomingWebSocketRequest = function(options) {
+        var request = new Request(options);
+        var socket = options.socket;
+
+        this.verb = request.verb;
+        this.path = request.path;
+        this.body = request.body;
+
+        this.respond = function(status, message) {
+            socket.send(
+                new textsecure.protobuf.WebSocketMessage({
+                    type: textsecure.protobuf.WebSocketMessage.Type.RESPONSE,
+                    response: { id: request.id, message: message, status: status }
+                }).encode().toArrayBuffer()
+            );
+        };
+    };
+
+    var outgoing = {};
+    var OutgoingWebSocketRequest = function(options, socket) {
+        var request = new Request(options);
+        outgoing[request.id] = request;
+        socket.send(
+            new textsecure.protobuf.WebSocketMessage({
+                type: textsecure.protobuf.WebSocketMessage.Type.REQUEST,
+                request: {
+                    verb : request.verb,
+                    path : request.path,
+                    body : request.body,
+                    id   : request.id
+                }
+            }).encode().toArrayBuffer()
+        );
+    };
+
+    window.WebSocketResource = function(socket, handleRequest) {
+        this.sendRequest = function(options) {
+            return new OutgoingWebSocketRequest(options, socket);
+        };
+
+        socket.onmessage = function(socketMessage) {
+            var blob = socketMessage.data;
+            var reader = new FileReader();
+            reader.onload = function() {
+                var message = textsecure.protobuf.WebSocketMessage.decode(reader.result);
+                if (message.type === textsecure.protobuf.WebSocketMessage.Type.REQUEST ) {
+                    handleRequest(
+                        new IncomingWebSocketRequest({
+                            verb   : message.request.verb,
+                            path   : message.request.path,
+                            body   : message.request.body,
+                            id     : message.request.id,
+                            socket : socket
+                        })
+                    );
+                }
+                else if (message.type === textsecure.protobuf.WebSocketMessage.Type.RESPONSE ) {
+                    var response = message.response;
+                    var request = outgoing[response.id];
+                    if (request) {
+                        request.response = response;
+                        var callback = request.error;
+                        if (response.status >= 200 && response.status < 300) {
+                            callback = request.success;
+                        }
+
+                        if (typeof callback === 'function') {
+                            callback(response.message, response.status, request);
+                        }
+                    } else {
+                        throw 'Received response for unknown request ' + message.response.id;
+                    }
+                }
+            };
+            reader.readAsArrayBuffer(blob);
+        };
+    };
+
+}());

js/websocket.js

@@ -0,0 +1,72 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+;(function(){
+    'use strict';
+
+    /*
+     * var socket = textsecure.websocket(url);
+     *
+     * Returns an adamantium-reinforced super socket, capable of sending
+     * app-level keep alives and automatically reconnecting.
+     *
+     */
+
+    window.textsecure.websocket = function (url) {
+        var socketWrapper = { onmessage: function() {}, ondisconnect: function() {} };
+        var socket;
+        var keepAliveTimer;
+        var reconnectSemaphore = 0;
+        var reconnectTimeout = 1000;
+
+        function resetKeepAliveTimer() {
+            clearTimeout(keepAliveTimer);
+            keepAliveTimer = setTimeout(function() {
+                socket.send(JSON.stringify({type: 1, id: 0}));
+                resetKeepAliveTimer();
+            }, 50000);
+        };
+
+        function reconnect(e) {
+            reconnectSemaphore--;
+            setTimeout(connect, reconnectTimeout);
+            socketWrapper.ondisconnect(e);
+        };
+
+        var connect = function() {
+            clearTimeout(keepAliveTimer);
+            if (++reconnectSemaphore <= 0) { return; }
+
+            if (socket) { socket.close(); }
+            socket = new WebSocket(url);
+
+            socket.onerror = reconnect;
+            socket.onclose = reconnect;
+            socket.onopen  = resetKeepAliveTimer;
+
+            socket.onmessage = function(response) {
+                socketWrapper.onmessage(response);
+                resetKeepAliveTimer();
+            };
+
+            socketWrapper.send = function(msg) {
+                socket.send(msg);
+            }
+        };
+
+        connect();
+        return socketWrapper;
+    };
+})();

options.html

@@ -100,6 +100,8 @@
   <script type="text/javascript" src="js/protobufs.js"></script>
 	<script type="text/javascript" src="js/curve25519_compiled.js"></script>
   <script type="text/javascript" src="js/nativeclient.js"></script>
+  <script type="text/javascript" src="js/websocket.js"></script>
+  <script type="text/javascript" src="js/websocket-resources.js"></script>
   <script type="text/javascript" src="js/helpers.js"></script>
   <script type="text/javascript" src="js/storage.js"></script>
   <script type="text/javascript" src="js/storage/devices.js"></script>

test/index.html

@@ -126,6 +126,8 @@
 	<script type="text/javascript" src="../js/components.js"></script>
 
 	<script type="text/javascript" src="../js/protobufs.js" data-cover></script>
+  <script type="text/javascript" src="../js/websocket.js"></script>
+  <script type="text/javascript" src="../js/websocket-resources.js"></script>
 	<script type="text/javascript" src="../js/helpers.js" data-cover></script>
   <script type="text/javascript" src="../js/storage.js"></script>
   <script type="text/javascript" src="../js/storage/devices.js"></script>
@@ -165,6 +167,7 @@
 	<script type="text/javascript" src="views/message_list_view_test.js"></script>
 	<script type="text/javascript" src="models/conversations_test.js"></script>
 	<script type="text/javascript" src="models/messages_test.js"></script>
+	<script type="text/javascript" src="websocket-resources_test.js"></script>
 	<script type="text/javascript" src="protocol_test.js"></script>
 </body>
 </html>

test/websocket-resources_test.js

@@ -0,0 +1,98 @@
+/* vim: ts=4:sw=4
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+;(function() {
+    'use strict';
+
+    describe('WebSocket-Resource', function() {
+        it('receives requests and sends responses', function(done) {
+            // mock socket
+            var request_id = '1';
+            var socket = {
+                send: function(data) {
+                    var message = textsecure.protobuf.WebSocketMessage.decode(data);
+                    assert.strictEqual(message.type, textsecure.protobuf.WebSocketMessage.Type.RESPONSE);
+                    assert.strictEqual(message.response.message, 'OK');
+                    assert.strictEqual(message.response.status, 200);
+                    assert.strictEqual(message.response.id.toString(), request_id);
+                    done();
+                }
+            };
+
+            // actual test
+            var resource = new WebSocketResource(socket, function (request) {
+                assert.strictEqual(request.verb, 'PUT');
+                assert.strictEqual(request.path, '/some/path');
+                assertEqualArrayBuffers(request.body.toArrayBuffer(), new Uint8Array([1,2,3]).buffer);
+                request.respond(200, 'OK');
+            });
+
+            // mock socket request
+            socket.onmessage({
+                data: new Blob([
+                    new textsecure.protobuf.WebSocketMessage({
+                        type: textsecure.protobuf.WebSocketMessage.Type.REQUEST,
+                        request: {
+                            id: request_id,
+                            verb: 'PUT',
+                            path: '/some/path',
+                            body: new Uint8Array([1,2,3]).buffer
+                        }
+                    }).encode().toArrayBuffer()
+                ])
+            });
+        });
+
+        it('sends requests and receives responses', function(done) {
+            // mock socket and request handler
+            var request_id;
+            var socket = {
+                send: function(data) {
+                    var message = textsecure.protobuf.WebSocketMessage.decode(data);
+                    assert.strictEqual(message.type, textsecure.protobuf.WebSocketMessage.Type.REQUEST);
+                    assert.strictEqual(message.request.verb, 'PUT');
+                    assert.strictEqual(message.request.path, '/some/path');
+                    assertEqualArrayBuffers(message.request.body.toArrayBuffer(), new Uint8Array([1,2,3]).buffer);
+                    request_id = message.request.id;
+                }
+            };
+
+            // actual test
+            var resource = new WebSocketResource(socket, function() {});
+            resource.sendRequest({
+                verb: 'PUT',
+                path: '/some/path',
+                body: new Uint8Array([1,2,3]).buffer,
+                error: done,
+                success: function(message, status, request) {
+                    assert.strictEqual(message, 'OK');
+                    assert.strictEqual(status, 200);
+                    done();
+                }
+            });
+
+            // mock socket response
+            socket.onmessage({
+                data: new Blob([
+                    new textsecure.protobuf.WebSocketMessage({
+                        type: textsecure.protobuf.WebSocketMessage.Type.RESPONSE,
+                        response: { id: request_id, message: 'OK', status: 200 }
+                    }).encode().toArrayBuffer()
+                ])
+            });
+        });
+    });
+}());