如何使用 Chrome DevTools 控制 websocket？

Question

我目前正致力于从 OKEX 获取加密货币价格信息。我发现，当一个页面导航到 https://www.okex.com/trade-spot/eth-usdt 时，它会启动一个名为 public 的 websocket 并通过这个 websocket 发送订阅订单。然后，对应发送订阅的数据将流经相同的 websocket。

我的问题是，除了被动检查这个websocket中的数据流之外，还有什么方法可以控制它，即发送订阅吗？如果是这样，这个方法可以自动化（通过木偶操纵者或类似的东西）吗？

Answer 1

经过一番研究和学习，我用evaluateHandle()和queryObjects()解决了这个问题。但是，必须在 DOM 上下文中通过选定的 websockets 进行通信。

const puppeteer = require('puppeteer');

async function unsubscrible(page, wsHandle){
    page.evaluate(arr=>{
        arr[0].send(JSON.stringify({"op": "unsubscribe","args":[{"channel":"instruments","instType":"SPOT"},{"channel":"instruments","instType":"FUTURES"},{"channel":"instruments","instType":"SWAP"},{"channel":"instruments","instType":"OPTION"},{"channel":"tickers","instId":"ETH-USDT"},{"channel":"cup-tickers-3s","ccy":"USDT"},{"channel":"mark-price","instId":"ETH-USDT"},{"channel":"index-tickers","instId":"ETH-USDT"},{"channel":"itn-status"},{"channel":"optimized-books","instId":"ETH-USDT"},{"channel":"trades","instId":"ETH-USDT"}]}));
    }, wsHandle);
};

async function ping(page, wsHandle){
    page.evaluate(arr=>{
        arr[0].send('ping');
    }, wsHandle);
}


async function main() {  
    const browser = await puppeteer.launch({
        headless : false,
        args : [
            '--auto-open-devtools-for-tabs',
        ]
    });

    const page = (await browser.pages())[0];
    page.setDefaultNavigationTimeout(0);  
    await page.goto('https://www.okex.com/trade-spot/eth-usdt');

    const wsHandle = await page.evaluateHandle(()=>WebSocket.prototype);
    
    const ws = await page.queryObjects(wsHandle);
      
    await unsubscrible(page, ws);

    setTimeout(()=>{
        for (i=0; i<10; i++) ping(page, ws);
    }, 20000)
    
}


main();

如何使用 Chrome DevTools 控制 websocket？

How to control a websocket with Chrome DevTools?

websocket

google-chrome-devtools

puppeteer