From c2535e000a311b163dd6b9ddc7c18c49d62e3d00 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Tue, 9 May 2023 18:15:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 17a5516..d000ee4 100644
--- a/index.html
+++ b/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;
       }