126 lines
3.3 KiB
JavaScript
126 lines
3.3 KiB
JavaScript
import { Component } from "react";
|
|
import Taro from "@tarojs/taro";
|
|
import { View, Text, Image, Button } from "@tarojs/components";
|
|
import "./index.scss";
|
|
import { AtTabBar } from "taro-ui";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
import { AtGrid } from "taro-ui";
|
|
import { Swiper, SwiperItem } from "@tarojs/components";
|
|
import { AtCard } from "taro-ui";
|
|
import { AtImagePicker } from "taro-ui";
|
|
import { AtButton } from "taro-ui";
|
|
import { AtSearchBar } from "taro-ui";
|
|
import { Picker } from "@tarojs/components";
|
|
import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
|
|
import {
|
|
AtModal,
|
|
AtModalHeader,
|
|
AtModalContent,
|
|
AtModalAction,
|
|
AtAvatar,
|
|
AtAccordion,
|
|
} from "taro-ui";
|
|
import { AtToast } from "taro-ui";
|
|
import { AtIcon } from "taro-ui";
|
|
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;
|
|
|
|
if (isPC) {
|
|
const app = document.querySelector(".index");
|
|
if (app) {
|
|
// 设置旋转后容器为屏幕高度宽、屏幕宽度高（注意：旋转后逻辑反转）
|
|
app.style.width = `${window.innerHeight}px`;
|
|
app.style.height = `${window.innerWidth}px`;
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// speak("欢迎使用"); // 语音播报
|
|
}, []);
|
|
|
|
return (
|
|
<View className="index">
|
|
{/* <View className="index_backImg">
|
|
<Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
|
|
</View> */}
|
|
|
|
{/* video元素 */}
|
|
{/* <View className="index_video">
|
|
<video
|
|
id="my-player"
|
|
className="video_js"
|
|
controls
|
|
preload="auto"
|
|
poster="//vjs.zencdn.net/v/oceans.png"
|
|
data-setup="{}"
|
|
>
|
|
<source src={testmpkv} type="video/mp4"></source>
|
|
</video>
|
|
</View> */}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Index;
|