'd'

src/pages/index/index.jsx

@@ -15,12 +15,13 @@ const Index = () => {
   // ws://（或者 wss:// 对于 HTTPS 环境
   const [message, setMessage] = useState("");
   const [status, setStatus] = useState("0"); //0无状态,1是小新
+  const [userInfoArr, setuserInfoArr] = useState([]); // 用户信息
 
   const [messageArr, setMessageArr] = useState([]);
 
   useEffect(() => {
     // 创建 WebSocket 连接
-    const socket = new WebSocket("ws://127.0.0.1:8888"); // 注意使用 ws://
+    const socket = new WebSocket("ws://192.168.31.222:8888"); // 注意使用 ws://
 
     // WebSocket 打开时触发
     socket.onopen = () => {
@@ -37,13 +38,15 @@ const Index = () => {
           const user = data.data; // 就是你后端推送的 user_data 字典
 
           console.log("✅ 新观众进场:", user);
+          // let newuserInfoArr = userInfoArr
+          // newuserInfoArr.push(user);
+          // console.log('newuserInfoArr---',newuserInfoArr)
+          // setuserInfoArr(newuserInfoArr);
+          setuserInfoArr((prev) => [user, ...prev]);
 
           // ✅ 举例使用
-          setMessage(`${user.user_name} 进入了直播间`);
-          speak(`${user.user_name} 进入了直播间`);
-          setStatus("1");
 
-          setMessageArr((arr) => [`${user.user_name} 进入了直播间`, ...arr]);
+          speak(`${user?.nick_name} 进入了直播间`);
         }
       } catch (e) {
         console.log("❌ 非 JSON 消息:", event.data);
@@ -67,26 +70,81 @@ const Index = () => {
   }, []);
 
   // 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();
+  //   }
+  // };
+
   const speak = (text) => {
+    if (typeof window === "undefined" || !window.speechSynthesis) {
+      console.warn("当前环境不支持 speechSynthesis");
+      return;
+    }
+
     const synth = window.speechSynthesis;
+
     const speakNow = () => {
+      // 防止连续播放冲突
+      synth.cancel();
+
       const utterance = new SpeechSynthesisUtterance(text);
-      utterance.lang = "zh-CN";
+      utterance.lang = "zh-CN"; // 中文语音
       utterance.rate = 1;
       utterance.pitch = 1;
+      utterance.volume = 1;
+
+      // ✅ 添加事件调试
+      utterance.onstart = () => console.log("开始播报:", text);
+      utterance.onend = () => console.log("播报结束");
+      utterance.onerror = (e) => console.error("播报失败:", e);
+
       synth.speak(utterance);
     };
 
     if (synth.getVoices().length === 0) {
-      // 有些浏览器语音列表异步加载
+      // ✅ 声音列表可能异步加载，监听一次
-      synth.onvoiceschanged = () => {
+      const handleVoicesChanged = () => {
+        console.log("voiceschanged 触发");
         speakNow();
+        synth.removeEventListener("voiceschanged", handleVoicesChanged);
       };
+      synth.addEventListener("voiceschanged", handleVoicesChanged);
     } else {
       speakNow();
     }
   };
 
+  useEffect(() => {
+    const unlockTTS = () => {
+      try {
+        const utterance = new SpeechSynthesisUtterance("语音已解锁");
+        utterance.lang = "zh-CN";
+        window.speechSynthesis.speak(utterance);
+      } catch (e) {
+        console.warn("TTS 解锁失败:", e);
+      }
+
+      document.removeEventListener("click", unlockTTS);
+    };
+
+    document.addEventListener("click", unlockTTS);
+  }, []);
+
   useEffect(() => {
     const isPC = window.innerWidth > 1600;
 
@@ -100,27 +158,7 @@ const Index = () => {
     }
   }, []);
 
-  // useEffect(() => {
-  //   // speak("欢迎使用"); // 语音播报
-
-  //   const innerAudioContext = Taro.createInnerAudioContext();
-  //   innerAudioContext.src = baby;
-  //   innerAudioContext.autoplay = true;
-
-  //   // 可选设置
-  //   innerAudioContext.onPlay(() => {
-  //     console.log("开始播放");
-  //   });
-  //   innerAudioContext.onError((res) => {
-  //     console.log(res.errMsg);
-  //     console.log(res.errCode);
-  //   });
-  // }, []);
-
   useEffect(() => {
-    // const env = Taro.getEnv()
-    // if (env !== Taro.ENV_TYPE.WEB) return
-
     const innerAudioContext = Taro.createInnerAudioContext();
     innerAudioContext.src = baby;
     innerAudioContext.loop = true;
@@ -132,8 +170,8 @@ const Index = () => {
       document.removeEventListener("click", handlePlay);
     };
 
-    document.addEventListener("touchstart", handlePlay, { once: true });
+    // document.addEventListener("touchstart", handlePlay, { once: true });
-    document.addEventListener("click", handlePlay, { once: true });
+    // document.addEventListener("click", handlePlay, { once: true });
 
     return () => {
       document.removeEventListener("touchstart", handlePlay);
@@ -142,19 +180,16 @@ const Index = () => {
     };
   }, []);
 
-  // 在线测试地址
-  // http://wstool.jackxiang.com/
-
   return (
     <View className="index">
-      <View>
+      {/* <View>
         扣 <span style={{ color: "green" }}>11</span> 变小新
       </View>
       <View>
         扣 <span style={{ color: "green" }}>22</span> 娜娜子
-      </View>
+      </View> */}
 
-      <View className="messageArr">
+      {/* <View className="messageArr">
         {messageArr?.slice(0, 5)?.map((item, index) => (
           <View
             key={index}
@@ -163,17 +198,37 @@ const Index = () => {
             {item}
           </View>
         ))}
+      </View> */}
+
+      <View className="userInfoArr">
+        {/* .slice(0, 5) */}
+        {userInfoArr?.map((item, index) => (
+          <View
+            key={index}
+            className={index === 0 ? "message_item_first" : "message_item"}
+          >
+            <span style={{color:'white'}}>{item?.nick_name}</span>
+            <View className="gifImg1">
+              <Image
+                className="index_gif"
+                mode={"scaleToFill"}
+                src={item?.avatar_thumb.url_list_list?.[0]}
+              />
+            </View>
+          </View>
+        ))}
       </View>
 
       {/* 添加doro的gif组合场景 */}
 
-      <View className="gifImg">
+      {/* <View className="gifImg">
         <Image
           className="index_gif"
           mode={"scaleToFill"}
-          src={status === "1" ? gif11 : status === "2" ? gif22 : doro11}
+          // src={status === "1" ? gif11 : status === "2" ? gif22 : doro11}
+          src={doro11}
         />
-      </View>
+      </View> */}
 
       {/* <View className="index_backImg">
         <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />

src/pages/index/index.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: black;
   // justify-content: center;
   // background-image: url('../../images/iphone.jpg');
   // background-size: cover;        // 拉伸铺满容器
@@ -53,20 +54,30 @@
     }
   }
 
+  .gifImg{
+    position: absolute;
+    bottom: 0;
+  }
+
 }
 
 
 // PC 浏览器下旋转
 @media (min-width: 1600px) {
   .index {
-    position: absolute;
+    // position: absolute;
-    top: 0;
+    // top: 0;
-    left: 0;
+    // left: 0;
-    width: 750px; // 根据标准宽度调整
+    // width: 750px; // 根据标准宽度调整
-    height: 1334px; // 保持竖屏比例
+    // height: 1334px; // 保持竖屏比例
-    // width: 100vw; // 使容器宽度始终填满视口
+
-    // height: 100vh; // 使容器高度始终填满视口
+
-    transform: rotate(-90deg) translate(-100vh, 0);
+
+    width: 100vw; // 使容器宽度始终填满视口
+    height: 100vh; // 使容器高度始终填满视口
+    // transform: rotate(-90deg) translate(-100vh, 0);
+
+
     transform-origin: top left;
     display: flex;
     flex-direction: column;