Is It Possible Capture And Log My Own Websocket (wss) Traffic

How I can use PhantomJs to capture and log my own data traffic coming from a websocket and destined to my browser ?

Solution 1:

You can try an approach with the following working example for PhantomJS 2.1.1. It opens sample page at http://www.websocket.org/echo.html and prints data traffic (input and output), along with some extra debug information. The traffic itself is not very interesting, but fits for the demonstration purpose. Hope, this helps.

var webPage = require('webpage');
var page = webPage.create();

page.onConsoleMessage = function(msg) {
    console.log('\n' + msg);
};

page.onError = function() {};

page.onInitialized = function() {
    page.evaluate(function proxyWebSocket() {

        var WS = window.WebSocket;

        var WebSocket = function(url, protocols) {
            var self = this;
            console.log('Creating websocket: ' + url);

            var ws = new WS(url, protocols);

            self.addEventListener = function(type, listener, useCapture, wantsUntrusted) {
                console.log('addEventListener: ' + type + '; ' + listener + '; ' + useCapture + '; ' + wantsUntrusted);

                var newListener = function(event) {
                    console.log('dispatching event: ', JSON.stringify(event));
                    return listener(event);
                };
                return ws.addEventListener.call(ws, type, newListener, useCapture, wantsUntrusted);
            };

            self.dispatchEvent = ws.dispatchEvent.bind(ws);
            self.removeEventListener = ws.removeEventListener.bind(ws);

            self.send = function(data) {
                console.log('websocket send: ' + data);
                return ws.send(data);
            };

            self.close = function(code, reason) {
                self.trace && console.log('websocket close: ' + code + ' ' + reason);
                return ws.close(code, reason);
            };

            // https://developer.mozilla.org/en-US/docs/Web/API/WebSocket#Attributes
            var properties = [
                { name: "binaryType" },
                { name: "bufferedAmount", readOnly: true },
                { name: "extensions" },
                { name: "onclose", traceData: true },
                { name: "onmessage", traceData: true },
                { name: "onopen", traceData: true },
                { name: "onerror", traceData: true },
                { name: "protocol" },
                { name: "readyState", readOnly: true },
                { name: "url", readOnly: true }
            ];
            properties.forEach(defineProperty, self);

            function defineProperty(prop) {
                var descriptor = {
                    get: function() {
                        var result = ws[prop.name];
                        console.log('websocket get ' + prop.name + ': ' + result);
                        return result;
                    }
                };

                if (!prop.readOnly) {
                    descriptor.set = function(value) {
                        console.log('websocket set ' + prop.name + ': ' + value);
                        if (prop.traceData) {
                            var traceFn = function(event) {
                                console.log('websocket ' + prop.name + (event.data ? ': ' + JSON.stringify(event.data) : ''));
                                return value(event);
                            };
                            ws[prop.name] = traceFn;
                        } else {
                            ws[prop.name] = value;
                        }
                        return value;
                    };
                }

                Object.defineProperty(self, prop.name, descriptor);
            }
        };

        WebSocket.CONNECTING = WS.CONNECTING;
        WebSocket.OPEN = WS.OPEN;
        WebSocket.CLOSING = WS.CLOSING;
        WebSocket.CLOSED = WS.CLOSED;

        window.WebSocket = WebSocket;
    });
};

page.open("http://www.websocket.org/echo.html", function testWebSocket(status) {
    if (status === "success") {
        console.log('open status: ' + status);

        window.setTimeout(function() {
            phantom.exit();
        }, 5000);
    }
});