diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index d9e9b94..b1778b6 100644 --- a/src/pages/index/index.jsx +++ b/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 ( - + {/* - + */} {/* video元素 */} {/* @@ -58,8 +118,6 @@ const Index = () => { */} - - ); }; diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 0ca19d6..89fd423 100644 --- a/src/pages/index/index.scss +++ b/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%;