103 lines
4.0 KiB
JavaScript
103 lines
4.0 KiB
JavaScript
const { createApp } = Vue;
|
|
|
|
const App = {
|
|
template: `
|
|
<div class="app-container">
|
|
<div class="grid-container">
|
|
<div class="square" v-for="(square, index) in squares" :key="index">
|
|
<div class="connection-dot" :class="{ connected: square.connected }"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
squares: [
|
|
{ connected: false, ws: null },
|
|
{ connected: false, ws: null },
|
|
{ connected: false, ws: null },
|
|
{ connected: false, ws: null }
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
// 为每个正方形建立独立的WebSocket连接
|
|
this.squares.forEach((square, index) => {
|
|
this.connectWebSocket(square, index);
|
|
});
|
|
},
|
|
methods: {
|
|
connectWebSocket(square, index) {
|
|
// 替换为实际的WebSocket服务器地址
|
|
const wsUrl = `ws://localhost:8501/?token=${index + 1}`;
|
|
|
|
try {
|
|
square.ws = new WebSocket(wsUrl);
|
|
|
|
square.ws.onopen = () => {
|
|
square.connected = true;
|
|
console.log(`WebSocket ${index + 1} connected`);
|
|
|
|
// 连接建立后发送初始消息
|
|
try {
|
|
square.ws.send(JSON.stringify({
|
|
type: "init"
|
|
}));
|
|
console.log(`Initial message sent to WebSocket ${index + 1}`);
|
|
} catch (error) {
|
|
console.error(`Failed to send initial message to WebSocket ${index + 1}:`, error);
|
|
}
|
|
};
|
|
|
|
square.ws.onclose = (e) => {
|
|
square.connected = false;
|
|
console.log(`WebSocket ${index + 1} disconnected`);
|
|
console.log(e.code, e.reason, e.wasClean)
|
|
// 尝试重新连接
|
|
// setTimeout(() => this.connectWebSocket(square, index), 1000);
|
|
};
|
|
|
|
square.ws.onerror = (error) => {
|
|
console.error(`WebSocket ${index + 1} error:`, error);
|
|
};
|
|
|
|
square.ws.onmessage = (event) => {
|
|
console.log(`WebSocket ${index + 1} message:`, event.data);
|
|
// 处理接收到的消息
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
const arr = JSON.parse(message.data);
|
|
|
|
if (Array.isArray(arr) && arr.length === 2) {
|
|
const [x, y] = arr;
|
|
console.log(`Creating dot at (${x}, ${y}) for square ${index}`);
|
|
|
|
const squareElement = document.querySelectorAll('.square')[index];
|
|
if (!squareElement) {
|
|
console.error('Square element not found');
|
|
return;
|
|
}
|
|
|
|
// 创建圆点元素
|
|
const dot = document.createElement('div');
|
|
dot.className = 'game-dot';
|
|
dot.style.left = `${x}px`;
|
|
dot.style.top = `${y}px`;
|
|
dot.style.zIndex = '10';
|
|
|
|
// 添加到游戏场景
|
|
squareElement.appendChild(dot);
|
|
console.log('Dot added successfully');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error processing message:', error);
|
|
}
|
|
};
|
|
} catch (error) {
|
|
console.error(`WebSocket ${index + 1} init error:`, error);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
createApp(App).mount('#app'); |