Update devtools html protocol interaction example (#411)

artygus · web-flow · commit a2c7d2894e2e · 2024-04-08T18:01:01.000+01:00
* updated example demonstrating the devtools protocol interaction
* removed nodejs example which is basically duplicate of html example
diff --git a/design.md b/design.md
@@ -15,7 +15,7 @@ Source
 
 - [src/ios_webkit_debug_proxy.c](src/ios_webkit_debug_proxy.c)    
    \- WebInspector to WebKit Remote Debugging Protocol translator   
-   \- See [examples/wdp_client.js](examples/wdp_client.js) and <http://localhost:9221>   
+   \- See [examples/wdp_client.html](examples/wdp_client.html) and <http://localhost:9221>   
 
 - [src/webinspector.c](src/webinspector.c)   
    \- iOS WebInspector library   
diff --git a/examples/README.md b/examples/README.md
@@ -13,9 +13,6 @@ Example Proxy Clients
 - Browser JS
    \- [wdp_client.html](wdp_client.html) demonstrates DevTools command I/O, e.g. "Page.navigate".
 
-- NodeJS
-   \- [wdp_client.js](wdp_client.js) is the command-line equivalent of [wdp_client.html](wdp_client.html).
-
 - C
    \- [wi_client.c](wi_client.c) a minimal webinspector client.
 
diff --git a/examples/wdp_client.html b/examples/wdp_client.html
@@ -5,51 +5,30 @@
 An example browser-based client.
 -->
 <html><head><script type="text/javascript">
-function onSubmit() {
-  if (!("WebSocket" in window)) {
-    alert("Your browser doesn't support WebSockets!");
-    return;
-  }
+var ws, target_id, cmd_id = 1000, commands = [];
+function onConnect() {
   ol_clear("send_ol");
   ol_clear("recv_ol");
+  ws && ws.close();
 
-  var form = document.getElementById('f');
+  var form = document.getElementById("f");
   var port = form.elements["port"].value;
   var page_num = form.elements["page_num"].value;
   var url = "ws://localhost:"+port+"/devtools/page/"+page_num;
-
-  var text = document.getElementById('commands');
-  var lines = text.value.split("\n");
-  var commands = [];
-  for (var i = 0; i < lines.length; i++) {
-    line = lines[i].trim();
-    if (line && line.charAt(0) != '#') {
-      commands.push(line);
-    }
-  }
-
-  var count = 0;
-  ol_append("send_ol", "open "+url);
-  var ws = new WebSocket(url);
-
-  function send_next_command(in_msg) {
-    ol_append("recv_ol", in_msg);
-    if (count < commands.length) {
-      out_msg = commands[count++];
-      ol_append("send_ol", out_msg);
-      ws.send(out_msg);
-    } else if (count == commands.length) {
-      count++;
-      ol_append("send_ol", "close");
-      ws.close();
-    }
-  };
+  ws = new WebSocket(url);
 
   ws.onopen = function() {
-    send_next_command("opened "+url);
+    ol_append("recv_ol", "opened "+url);
   };
   ws.onmessage = function(evt) {
-    send_next_command(evt.data);
+    ol_append("recv_ol", evt.data);
+
+    var in_cmd = JSON.parse(evt.data);
+    if (in_cmd.method === "Target.targetCreated") {
+      target_id = in_cmd.params.targetInfo.targetId;
+    }
+
+    send_next_command();
   };
   ws.onclose = function() {
     ol_append("recv_ol", "closed");
@@ -58,6 +37,35 @@
     ol_append("recv_ol", "error: "+e.data);
   };
 }
+function onCommand() {
+  if (!ws) {
+    return alert("WebSocket is not connected!");
+  } else if (ws.readyState !== 1) {
+    return alert("WebSocket is not open, current state: "+ws.readyState);
+  } else if (!target_id) {
+    return alert("Page target was not received yet, waiting for \"Target.targetCreated\" message");
+  }
+
+  var text = document.getElementById("commands");
+  var lines = text.value.split("\n");
+
+  lines.forEach((line) => {
+    var msg = line.trim();
+    if (msg) {
+      commands.push({id: cmd_id++, method: "Target.sendMessageToTarget", params: {targetId: target_id, message: msg}});
+    }
+  });
+
+  send_next_command();
+}
+
+function send_next_command() {
+  if (commands.length > 0) {
+    var out_msg = JSON.stringify(commands.shift());
+    ol_append("send_ol", out_msg);
+    ws.send(out_msg);
+  }
+};
 
 function ol_clear(id) {
   var o_ol = document.getElementById(id);
@@ -88,16 +96,15 @@
 /><sup><a href="http://localhost:9221" target="_new">?</a></sup
 >/devtools/page/<input name="page_num" class="right" size="5" value="1"
 /><sup><a href="http://localhost:9222" target="_new">?</a></sup>
-<input type="button" onclick="onSubmit()" value="run"/><p>
+<input type="button" onclick="onConnect()" value="connect"/>
+<input type="button" onclick="onCommand()" value="send"/><p>
 <textarea id="commands" rows="5" cols="80">
 {"id":1,"method":"Page.navigate","params": {"url":"http://www.google.com/"}}
 </textarea>
 </form>
 <table>
 <tr><td width="50%" class="top">
-<form onSubmit="return send();">
 <ol id="send_ol"></ol>
-<form>
 </td><td class="top">
 <ol id="recv_ol"></ol>
 </td>
diff --git a/examples/wdp_client.js b/examples/wdp_client.js
