网络层

2025-06-28 17:38:22 +08:00
parent 54dc7ba173
commit 605197345b
20 changed files with 482 additions and 376 deletions
--- a/Client/web/game.js
+++ b/Client/web/game.js
@@ -0,0 +1,103 @@
+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');