美化

index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="
+https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.umd.min.js
+"></script>
     <title>Document</title>
     <style>
       *,
@@ -969,8 +972,14 @@
           const messageWrap = document.querySelector("#message_wrap");
           const div = document.createElement("div");
           div.classList = ["message"];
-          div.textContent = `Rx: ${evt.data}`;
-          messageWrap.appendChild(div);
+          const formatter = new JSONFormatter(JSON.parse(evt.data), 2);
+          const formatted = formatter.render();
+          // div.textContent = `Rx: ${evt.data}`;
+          const p = document.createElement("p");
+          p.innerHTML = `Rx:`;
+          p.style.background = "#ddd";
+          messageWrap.appendChild(p);
+          messageWrap.appendChild(formatted);
           messageWrap.scrollTop =
             messageWrap.scrollHeight - messageWrap.clientHeight;
           // 对消息进行处理
@@ -1015,8 +1024,13 @@
         const messageWrap = document.querySelector("#message_wrap");
         const div = document.createElement("div");
         div.classList = ["message"];
-        div.textContent = `Tx: ${msg}`;
-        messageWrap.appendChild(div);
+        const formatter = new JSONFormatter(JSON.parse(msg), 2);
+        const formatted = formatter.render();
+        const p = document.createElement("p");
+        p.innerHTML = `Tx:`;
+        p.style.background = "#ddd";
+        messageWrap.appendChild(p);
+        messageWrap.appendChild(formatted);
         messageWrap.scrollTop =
           messageWrap.scrollHeight - messageWrap.clientHeight;
       }