eric/gitlab-instance-0a899031_douyinlive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'd'

Browse Source
This commit is contained in:
eric
2025-08-02 10:48:22 +08:00
parent 745e786fcd
commit e37edd16b5
2 changed files with 113 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/pages/index/index.jsx
View File

@@ -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("click", handlePlay, { once: true });
// document.addEventListener("touchstart", 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} />

27
src/pages/index/index.scss
View File

@@ -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;
top: 0;
left: 0;
width: 750px; // 根据标准宽度调整
height: 1334px; // 保持竖屏比例
// width: 100vw; // 使容器宽度始终填满视口
// height: 100vh; // 使容器高度始终填满视口
transform: rotate(-90deg) translate(-100vh, 0);
// position: absolute;
// top: 0;
// left: 0;
// width: 750px; // 根据标准宽度调整
// height: 1334px; // 保持竖屏比例
width: 100vw; // 使容器宽度始终填满视口
height: 100vh; // 使容器高度始终填满视口
// transform: rotate(-90deg) translate(-100vh, 0);
transform-origin: top left;
display: flex;
flex-direction: column;