feat: 测试

src/pages/index/index.jsx

@@ -27,31 +27,34 @@ import testmpkv from "../../images/test.mp4";
 
 const Index = () => {
   // ws://（或者 wss:// 对于 HTTPS 环境
-  const [message, setMessage] = useState('11');
+  const [message, setMessage] = useState("");
+  const [messageArr, setMessageArr] = useState([]);
+
   useEffect(() => {
     // 创建 WebSocket 连接
-    const socket = new WebSocket('ws://127.0.0.1:8888'); // 注意使用 ws://
+    const socket = new WebSocket("ws://127.0.0.1:8888"); // 注意使用 ws://
 
     // WebSocket 打开时触发
     socket.onopen = () => {
-      console.log('WebSocket 连接已建立');
-      socket.send('Hello from the client!');
+      console.log("WebSocket 连接已建立");
+      // socket.send('Hello from the client!');
     };
 
     // WebSocket 接收到消息时触发
     socket.onmessage = (event) => {
-      console.log('接收到消息:', event.data);
+      console.log("接收到消息:", event.data);
       setMessage(event.data); // 更新消息状态
+      setMessageArr((messageArr) => [event.data,...messageArr]); // 更新消息数组
     };
 
     // WebSocket 关闭时触发
     socket.onclose = () => {
-      console.log('WebSocket 连接已关闭');
+      console.log("WebSocket 连接已关闭");
     };
 
     // WebSocket 错误时触发
     socket.onerror = (error) => {
-      console.error('WebSocket 错误:', error);
+      console.error("WebSocket 错误:", error);
     };
 
     // 清理 WebSocket 连接
@@ -59,7 +62,6 @@ const Index = () => {
       socket.close();
     };
   }, []);
-  
 
   // TTS播放语言
   const speak = (text) => {
@@ -99,9 +101,18 @@ const Index = () => {
     // speak("欢迎使用"); // 语音播报
   }, []);
 
+  // 在线测试地址
+  // http://wstool.jackxiang.com/
+
   return (
     <View className="index">
-    <View>{message}</View>
+      <View className="messageArr">
+      {messageArr.map((item, index) => (
+        <View key={index} className="message_item">
+          {item}
+        </View>
+      ))}
+      </View>
       {/* <View className="index_backImg">
         <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
       </View> */}

src/pages/index/index.scss

@@ -4,13 +4,24 @@
   // overflow: hidden; // 防止溢出
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  // align-items: center;
+  // justify-content: center;
   // background-image: url('../../images/iphone.jpg');
   // background-size: cover;        // 拉伸铺满容器
   // background-position: center;   // 居中
   // background-repeat: no-repeat;  // 不重复
 
+  .messageArr{
+    padding: 40px;
+    font-size: 30px;
+      display: flex;
+  flex-direction: column;
+    .message_item{
+   
+    }
+  }
+ 
+
   .index_backImg {
     width: 100%;
     height: 100%;
@@ -55,12 +66,26 @@
     transform-origin: top left;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    // align-items: center;
+    // justify-content: center;
     background-image: url('../../images/iphone.jpg');
     background-size: cover;        // 拉伸铺满容器
     background-position: center;   // 居中
     background-repeat: no-repeat;  // 不重复
+    color: white;
+
+    .messageArr{
+      // padding: 40px;
+      font-size: 40px;
+      display: flex;
+      flex-direction: column;
+          align-items: center;
+    justify-content: center;
+      .message_item{
+     
+      }
+    }
+   
 
     .index_backImg {
       width: 100%;