|
| 1 | +import './style.css' |
| 2 | +import { EventEmitter } from "./event-emitter"; |
| 3 | + |
| 4 | +let socket = null |
| 5 | +let requestId = 1 |
| 6 | +// TODO: なんでeventEmitterを使ったら動くのか調べるところから |
| 7 | +const eventEmitter = new EventEmitter() |
| 8 | + |
| 9 | +function addLog(log) { |
| 10 | + const p = document.createElement('p') |
| 11 | + p.textContent = log |
| 12 | + document.querySelector('#result').appendChild(p) |
| 13 | +} |
| 14 | + |
| 15 | +function reset() { |
| 16 | + if (socket) { |
| 17 | + socket.close() |
| 18 | + socket = null |
| 19 | + } |
| 20 | + document.querySelector('#result').textContent = '' |
| 21 | +} |
| 22 | + |
| 23 | +function formatMessage(msg) { |
| 24 | + const obj = JSON.parse(msg) |
| 25 | + return JSON.stringify(obj, null, 2) |
| 26 | +} |
| 27 | + |
| 28 | +function onMessage (e) { |
| 29 | + console.log('Message received from server:', e) |
| 30 | + eventEmitter.emit('websocket-message', JSON.parse(e.data)) |
| 31 | + // addLog(`Message received from server: ${formatMessage(e.data)}`) |
| 32 | +} |
| 33 | + |
| 34 | +function connect() { |
| 35 | + reset() |
| 36 | + |
| 37 | + const input = document.querySelector('input[name="url"]') |
| 38 | + let url = '' |
| 39 | + if (input.value.includes('/session')) { |
| 40 | + url = `ws://${input.value}` |
| 41 | + } else { |
| 42 | + url = `ws://${input.value}/session` |
| 43 | + } |
| 44 | + socket = new WebSocket(url) |
| 45 | + |
| 46 | + socket.onopen = (e) => { |
| 47 | + console.log('WebSocket connection opened') |
| 48 | + // addLog('WebSocket connection opened') |
| 49 | + } |
| 50 | + socket.onmessage = onMessage |
| 51 | + socket.onclose = (e) => { |
| 52 | + console.log('WebSocket connection closed') |
| 53 | + // addLog('WebSocket connection closed') |
| 54 | + } |
| 55 | +} |
| 56 | + |
| 57 | +const btn = document.querySelector('#connect') |
| 58 | +btn.addEventListener('click', connect) |
| 59 | + |
| 60 | +function sendMessage(msg) { |
| 61 | + if (!socket) return null |
| 62 | + |
| 63 | + const id = requestId++ |
| 64 | + msg.id = id |
| 65 | + console.log(`Message sent to server:`, msg) |
| 66 | + // addLog(`Message sent to server: ${formatMessage(msg)}`) |
| 67 | + socket.send(JSON.stringify(msg)) |
| 68 | + return id |
| 69 | +} |
| 70 | + |
| 71 | +// リモートエンドにコマンドを送り、帰ってきたIDをみて、同一のIDの場合にresolveする |
| 72 | +function sendCommand(method, params) { |
| 73 | + const id = sendMessage({ method, params }) |
| 74 | + |
| 75 | + return new Promise((resolve) => { |
| 76 | + const listener = (eventName, data) => { |
| 77 | + if (data.id === id) { |
| 78 | + eventEmitter.off('websocket-message', listener) |
| 79 | + // socket.removeEventListener('message', listener) |
| 80 | + resolve(data) |
| 81 | + } |
| 82 | + } |
| 83 | + eventEmitter.on('websocket-message', listener) |
| 84 | + // socket.addEventListener('message', listener) |
| 85 | + }) |
| 86 | +} |
| 87 | + |
| 88 | +const navigateBtn = document.querySelector('#navigate') |
| 89 | +navigateBtn.addEventListener('click', async () => { |
| 90 | + await sendCommand("session.new", { capabilities: {} }); |
| 91 | + |
| 92 | + const res = await sendCommand("browsingContext.getTree", {}, {}); |
| 93 | + console.log('browsingContext.getTree', res); |
| 94 | + |
| 95 | + const context = res.result.contexts[0].context; |
| 96 | + await sendCommand("browsingContext.navigate", { |
| 97 | + context, |
| 98 | + url: "https://example.com", |
| 99 | + wait: "complete" |
| 100 | + }); |
| 101 | +}) |
0 commit comments