Is it possible capture and log my own Websocket (wss) traffic

Question

如何使用PhantomJs捕获和记录来自Websocket并发往浏览器的数据流量？

Answer 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);
    }
});