用websocket 实现 helloworld的翻转效果,给出前端实现代码
时间: 2024-09-21 13:10:09 浏览: 33
使用WebSocket实现一个简单的Hello World翻转效果,通常是在服务器端发送一个字符串(例如,一个表示翻转标志的状态),然后前端接收并根据这个状态切换显示的文本。下面是一个简单的HTML和JavaScript(前端)代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>WebSocket Hello World</title>
<style>
#helloworld {
transition: transform 0.5s;
}
</style>
</head>
<body>
<p id="helloworld">Hello, World!</p>
<script>
// 创建WebSocket连接
const socket = new WebSocket('ws://your-server-url'); // 替换为你的WebSocket服务器地址
// 连接建立成功时触发
socket.addEventListener('open', (event) => {
socket.send('Toggle Flip');
});
// 接收服务器消息
socket.addEventListener('message', (event) => {
const message = event.data;
if (message === 'Flipped') {
// 翻转文字
const helloworld = document.getElementById('helloworld');
helloworld.style.transform = 'rotateY(180deg)';
} else if (message === 'Unflipped') {
helloworld.style.transform = 'rotateY(0deg)';
}
});
// 断开连接时关闭动画
socket.addEventListener('close', () => {
setTimeout(() => {
helloworld.style.transform = 'none';
}, 500);
});
</script>
</body>
</html>
```
在这个例子中,当连接打开时,前端发送一个请求告诉服务器开始翻转;服务器响应后,前端会改变文本的旋转方向,模拟翻转效果。关闭时,停止翻转动画。