如何使用 Chrome DevTools 控制 websocket？答案

【问题标题】：How to control a websocket with Chrome DevTools?如何使用 Chrome DevTools 控制 websocket？
【发布时间】：2022-01-18 15:54:54
【问题描述】：

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

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

【问题讨论】：

标签： websocket google-chrome-devtools puppeteer

【解决方案1】：

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

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();

【讨论】：