How To Monitor Websocket Communication In Phantom.js?

Phantom.js documentation shows how to monitor HTTP communication: http://phantomjs.org/network-monitoring.html However, it does not work for WebSockets. How can I monitor WebSocket

Solution 1:

PhantomJS 1.x does not support WebSockets, so you cannot monitor them. If the page uses some fallback for WebSockets, then the page.onResourceRequested and page.onResourceReceived can be used to log the meta data of the messages. PhantomJS does not expose the actual data sent in any way.

WebSockets work correctly in PhantomJS 2. Since no fallback is necessary, it is not possible to observe the traffic with those events. The event handlers mentioned above don't show anything. The only way to see the messages would be to proxy the WebSocket object as early as possible:

page.onInitialized = function(){
    page.evaluate(function(){
        (function(w){
            var oldWS = w.WebSocket;
            w.WebSocket = function(uri){
                this.ws = newoldWS(uri);
                ...
            };
            w.WebSocket.prototype.send = function(msg){
                w.callPhantom({type: "ws", sent: "msg"});
                this.ws.send(msg);
            };
            ...
        })(window);
    });
};
page.onCallback = function(data){
    console.log(JSON.stringify(data, undefined, 4));
};

My tests actually show that the websocket echo page works with v1.9.6 and up, but not v1.9.0.

Solution 2:

If the page uses some fallback for WebSockets, then the page.onResourceRequested and page.onResourceReceived can be used to log the meta data of the messages. PhantomJS does not expose the actual data sent in any way.

Slimer JS helped solve this problem. Slimer JS will let you capture the response body. Which is not possible with phantom JS 1.x and this feature is removed from latest 2.x.

https://github.com/ariya/phantomjs/issues/10158

Using slimerjs, you can capture content for XHR requests, but you cannot do it for websocket requests. So we will be explicitly disabling websockets for the webpage when the page is initialized, ( page.onInitialized ), so that the webpage will be using the fallback, which is XHR, and then you can capture the content.

page.captureContent = [ /application\/javascript/ ]; 

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

        (function(w) {
            window.WebSocket = undefined; // we are explicitly disabling websockets for the page. so that the website will be using the fallback

        })(window);
    });
};

page.open(url, function(status) {

})