feat: 增加tts和websocket

src/pages/index/index.jsx

@@ -26,6 +26,62 @@ import iphone from "../../images/iphone.jpg";
 import testmpkv from "../../images/test.mp4";
 
 const Index = () => {
+  // ws://（或者 wss:// 对于 HTTPS 环境
+  const [message, setMessage] = useState('');
+  useEffect(() => {
+    // 创建 WebSocket 连接
+    const socket = new WebSocket('ws://127.0.0.1:8888'); // 注意使用 ws://
+
+    // WebSocket 打开时触发
+    socket.onopen = () => {
+      console.log('WebSocket 连接已建立');
+      socket.send('Hello from the client!');
+    };
+
+    // WebSocket 接收到消息时触发
+    socket.onmessage = (event) => {
+      console.log('接收到消息:', event.data);
+      setMessage(event.data); // 更新消息状态
+    };
+
+    // WebSocket 关闭时触发
+    socket.onclose = () => {
+      console.log('WebSocket 连接已关闭');
+    };
+
+    // WebSocket 错误时触发
+    socket.onerror = (error) => {
+      console.error('WebSocket 错误:', error);
+    };
+
+    // 清理 WebSocket 连接
+    return () => {
+      socket.close();
+    };
+  }, []);
+  
+
+  // TTS播放语言
+  const speak = (text) => {
+    const synth = window.speechSynthesis;
+    const speakNow = () => {
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = "zh-CN";
+      utterance.rate = 1;
+      utterance.pitch = 1;
+      synth.speak(utterance);
+    };
+
+    if (synth.getVoices().length === 0) {
+      // 有些浏览器语音列表异步加载
+      synth.onvoiceschanged = () => {
+        speakNow();
+      };
+    } else {
+      speakNow();
+    }
+  };
+
   useEffect(() => {
     const isPC = window.innerWidth > 1600;
 
@@ -39,11 +95,15 @@ const Index = () => {
     }
   }, []);
 
+  useEffect(() => {
+    // speak("欢迎使用"); // 语音播报
+  }, []);
+
   return (
     <View className="index">
-      <View className="index_backImg">
+      {/* <View className="index_backImg">
         <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
-      </View>
+      </View> */}
 
       {/* video元素 */}
       {/* <View className="index_video">
@@ -58,8 +118,6 @@ const Index = () => {
           <source src={testmpkv} type="video/mp4"></source>
         </video>
       </View> */}
-
-      
     </View>
   );
 };

src/pages/index/index.scss

@@ -6,6 +6,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  // background-image: url('../../images/iphone.jpg');
+  // background-size: cover;        // 拉伸铺满容器
+  // background-position: center;   // 居中
+  // background-repeat: no-repeat;  // 不重复
 
   .index_backImg {
     width: 100%;
@@ -53,6 +57,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    background-image: url('../../images/iphone.jpg');
+    background-size: cover;        // 拉伸铺满容器
+    background-position: center;   // 居中
+    background-repeat: no-repeat;  // 不重复
 
     .index_backImg {
       width: 100%;