web-dev-qa-db-ja.com

puppeteerを使用してWebSocketデータをダンプする方法

このページでWebSocketデータを取得したい https://upbit.com/exchange?code=CRIX.UPBIT.KRW-BTC 、そのWebSocket URLは動的であり、最初の接続時にのみ有効です。 2回目に接続すると、データは送信されなくなります。

enter image description here

したがって、おそらくヘッドレスchromeがWebSocketデータの監視に役立つと思います。

何か案は？ありがとう！

websocketpuppeteergoogle-chrome-headless
14
soulmachine

実際には、これについて複雑なことをする必要はありません。ただし、URLは動的に見えますが、コードでも正常に機能します。それが機能しない理由は、バックグラウンドで何が起こっているかを理解する必要があるためです。

まず、[ネットワーク]タブを見てみましょう。

Websocket URL

CookieとOriginは接続に重要な場合があります。したがって、これらを書き留めます。

次に、ソケット上のデータ交換を見てみましょう

Starting frames

Middle frames

フレームを見ると、最初のフレームはデータとしてoを受け取ります。これは、接続が開いていることを示している可能性があります。次に、Webサイトがデータをソケットに送信します。これは、照会する対象に関連している可能性があります。しばらく接続が停止すると、ソケットはデータとしてhを受け取ります。これは保留または何かを示している可能性があります（2番目の画像に示すように）

正確なデータを取得するには、コードにブレークポイントを配置します

Breakpoint

そして、値をコンソールに出力します

data sent

これで、コーディング部分に到達するのに十分な情報が得られました。以下に、これに適したWebSocketライブラリであることがわかりました

https://github.com/websockets/ws

だから私たちは

yarn add ws || npm install ws --save

次に、コードを記述します

const WebSocket = require("ws")
const ws = new WebSocket("wss://example.com/sockjs/299/enavklnl/websocket",null,{
    headers: {
        "Cookie":"<cookie data noted earlier>",
        "User-Agent": "<Your browser agent>"
    },
    Origin: "https://example.com",
})
const opening_message = '["[{\\"ticket\\":\\"ram macbook\\"},{\\"type\\":\\"recentCrix\\",\\"codes\\":[\\"CRIX.UPBIT.KRW-BTC\\",\\"CRIX.BITFINEX.USD-BTC\\",\\"CRIX.BITFLYER.JPY-BTC\\",\\"CRIX.OKCOIN.CNY-BTC\\",\\"CRIX.KRAKEN.EUR-BTC\\",\\"CRIX.UPBIT.KRW-DASH\\",\\"CRIX.UPBIT.KRW-ETH\\",\\"CRIX.UPBIT.KRW-NEO\\",\\"CRIX.UPBIT.KRW-BCC\\",\\"CRIX.UPBIT.KRW-MTL\\",\\"CRIX.UPBIT.KRW-LTC\\",\\"CRIX.UPBIT.KRW-STRAT\\",\\"CRIX.UPBIT.KRW-XRP\\",\\"CRIX.UPBIT.KRW-ETC\\",\\"CRIX.UPBIT.KRW-OMG\\",\\"CRIX.UPBIT.KRW-SNT\\",\\"CRIX.UPBIT.KRW-WAVES\\",\\"CRIX.UPBIT.KRW-PIVX\\",\\"CRIX.UPBIT.KRW-XEM\\",\\"CRIX.UPBIT.KRW-ZEC\\",\\"CRIX.UPBIT.KRW-XMR\\",\\"CRIX.UPBIT.KRW-QTUM\\",\\"CRIX.UPBIT.KRW-LSK\\",\\"CRIX.UPBIT.KRW-STEEM\\",\\"CRIX.UPBIT.KRW-XLM\\",\\"CRIX.UPBIT.KRW-ARDR\\",\\"CRIX.UPBIT.KRW-KMD\\",\\"CRIX.UPBIT.KRW-ARK\\",\\"CRIX.UPBIT.KRW-STORJ\\",\\"CRIX.UPBIT.KRW-GRS\\",\\"CRIX.UPBIT.KRW-VTC\\",\\"CRIX.UPBIT.KRW-REP\\",\\"CRIX.UPBIT.KRW-EMC2\\",\\"CRIX.UPBIT.KRW-ADA\\",\\"CRIX.UPBIT.KRW-SBD\\",\\"CRIX.UPBIT.KRW-TIX\\",\\"CRIX.UPBIT.KRW-POWR\\",\\"CRIX.UPBIT.KRW-MER\\",\\"CRIX.UPBIT.KRW-BTG\\",\\"CRIX.COINMARKETCAP.KRW-USDT\\"]},{\\"type\\":\\"crixTrade\\",\\"codes\\":[\\"CRIX.UPBIT.KRW-BTC\\"]},{\\"type\\":\\"crixOrderbook\\",\\"codes\\":[\\"CRIX.UPBIT.KRW-BTC\\"]}]"]'
ws.on('open', function open() {
    console.log("opened");
});

ws.on('message', function incoming(data) {
    if (data == "o" || data == "h") {
        console.log("sending opening message")
        ws.send(opening_message)
    }
    else {
        console.log("Received", data)

    }
});

そして、取得したコードを実行します

Working code

今私が交換した場合

const ws = new WebSocket("wss://example.com/sockjs/299/enavklnl/websocket",null,{
    headers: {
        "Cookie":"<cookie data noted earlier>",
        "User-Agent": "<Your browser agent>"
    },
    Origin: "https://example.com",
})

に

const ws = new WebSocket("wss://example.com/sockjs/299/enavklnl/websocket")

つまり、cookiesとOriginはそのように必要になることはありませんでした。しかし、それらを使用することをお勧めします

21
Tarun Lalwani
const client = page._client

client.on('Network.webSocketCreated', ({requestId, url}) => {
  console.log('Network.webSocketCreated', requestId, url)
})

client.on('Network.webSocketClosed', ({requestId, timestamp}) => {
  console.log('Network.webSocketClosed', requestId, timestamp)
})

client.on('Network.webSocketFrameSent', ({requestId, timestamp, response}) => {
  console.log('Network.webSocketFrameSent', requestId, timestamp, response.payloadData)
})

client.on('Network.webSocketFrameReceived', ({requestId, timestamp, response}) => {
  console.log('Network.webSocketFrameReceived', requestId, timestamp, response.payloadData)
})

これは、DevToolsプロトコルを直接使用することによって行われます- https://chromedevtools.github.io/devtools-protocol/tot/Network#event-webSocketClosed

11
zag2art

私はまだ操り人形師がこれをサポートしているとは思いませんが、低レベルのプロトコルはここにあります： https：//chromedevtools.github .io/devtools-protocol/tot/Network /＃event-webSocketFrameSent および https://chromedevtools.github.io/devtools-protocol/tot/Network#type-WebSocketResponse 。これは、必要に応じてライブラリに自分で実装できることを意味します。

3
browserless