echo test

trigo-web/app/src/composables/useSocket.ts

@@ -0,0 +1,101 @@
+import { ref, onUnmounted } from "vue";
+import { io, Socket } from "socket.io-client";
+
+
+// Singleton socket instance
+let socketInstance: Socket | null = null;
+
+
+export function useSocket() {
+	const connected = ref(false);
+	const error = ref<string | null>(null);
+
+
+	// Get or create socket instance
+	const getSocket = (): Socket => {
+		if (!socketInstance) {
+			// Determine the server URL based on environment
+			const isDev = import.meta.env?.DEV ?? (import.meta.env?.MODE === "development");
+			const serverUrl = isDev
+				? "http://localhost:3000" // Development: backend port
+				: window.location.origin; // Production: same origin
+
+			socketInstance = io(serverUrl, {
+				autoConnect: true,
+				reconnection: true,
+				reconnectionDelay: 1000,
+				reconnectionAttempts: 5
+			});
+
+			// Connection event handlers
+			socketInstance.on("connect", () => {
+				connected.value = true;
+				error.value = null;
+				console.log("[Socket.io] Connected:", socketInstance?.id);
+			});
+
+			socketInstance.on("disconnect", (reason) => {
+				connected.value = false;
+				console.log("[Socket.io] Disconnected:", reason);
+			});
+
+			socketInstance.on("connect_error", (err) => {
+				error.value = err.message;
+				console.error("[Socket.io] Connection error:", err.message);
+			});
+		}
+
+		return socketInstance;
+	};
+
+
+	// Send echo test message
+	const sendEcho = (message: string): Promise<string> => {
+		return new Promise((resolve, reject) => {
+			const socket = getSocket();
+
+			if (!socket.connected) {
+				reject(new Error("Socket not connected"));
+				return;
+			}
+
+			// Send echo request and wait for response
+			socket.emit("echo", { message, timestamp: new Date().toISOString() }, (response: any) => {
+				if (response.error) {
+					reject(new Error(response.error));
+				} else {
+					resolve(response.message);
+				}
+			});
+
+			// Timeout after 5 seconds
+			setTimeout(() => {
+				reject(new Error("Echo request timeout"));
+			}, 5000);
+		});
+	};
+
+
+	// Clean up on unmount
+	onUnmounted(() => {
+		// Note: We don't disconnect the singleton instance
+		// It will be reused by other components
+	});
+
+
+	return {
+		socket: getSocket(),
+		connected,
+		error,
+		sendEcho
+	};
+}
+
+
+// Export function to manually disconnect (for cleanup)
+export function disconnectSocket() {
+	if (socketInstance) {
+		socketInstance.disconnect();
+		socketInstance = null;
+	}
+}

trigo-web/app/src/views/TrigoView.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="trigo-view">
 		<div class="view-header">
-			<div class="logo-container" title="K.L. Trigo">
+			<div class="logo-container" @click="handleLogoClick">
 				<img :src="logoImage" alt="Trigo Logo" class="app-logo" />
 			</div>
 			<div class="view-status">
@@ -202,6 +202,7 @@ import { Stone, validateMove, StoneType, validateTGN } from "../../../inc/trigo"
 import { TrigoGameFrontend } from "@/utils/TrigoGameFrontend";
 import { encodeAb0yz } from "../../../inc/trigo/ab0yz";
 import logoImage from "@/assets/logo.png";
+import { useSocket } from "@/composables/useSocket";
 
 // Helper functions for board shape parsing
 const parseBoardShape = (shapeStr: string): BoardShape => {
@@ -253,6 +254,11 @@ const tgnValidationState = ref<'idle' | 'valid' | 'invalid'>('idle');
 const tgnValidationError = ref<string>('');
 let tgnValidationTimeout: ReturnType<typeof setTimeout> | null = null;
 
+
+// Socket.io connection
+const { sendEcho, connected: socketConnected } = useSocket();
+
+
 // Canvas reference and viewport
 const viewportCanvas = ref<HTMLCanvasElement | null>(null);
 const moveHistoryContainer = ref<HTMLDivElement | null>(null);
@@ -440,6 +446,20 @@ const handleInspectGroup = (groupSize: number, liberties: number) => {
 };
 
 
+// Handle logo click - WebSocket echo test
+const handleLogoClick = async () => {
+	try {
+		console.log("[Echo Test] Sending echo request...");
+		console.log("[Echo Test] Socket connected:", socketConnected.value);
+
+		const response = await sendEcho("Echo test from Trigo!");
+		console.log("[Echo Test] Response:", response);
+	} catch (error) {
+		console.error("[Echo Test] Error:", error);
+	}
+};
+
+
 // Game control methods
 const newGame = () => {
 	// Parse selected board shape

trigo-web/backend/src/server.ts

@@ -46,6 +46,23 @@ app.get("/health", (_req: any, res: any) => {
 io.on("connection", (socket: any) => {
 	console.log(`New client connected: ${socket.id}`);
 
+	// Echo test handler
+	socket.on("echo", (data: any, callback: any) => {
+		const timestamp = new Date().toISOString();
+		const responseMessage = `Hello from server! Received: "${data.message}" at ${timestamp}`;
+
+		console.log(`[Echo] Client ${socket.id}: ${data.message}`);
+
+		// Send response via callback
+		if (callback && typeof callback === "function") {
+			callback({
+				message: responseMessage,
+				serverTime: timestamp,
+				clientTime: data.timestamp
+			});
+		}
+	});
+
 	socket.on("disconnect", () => {
 		console.log(`Client disconnected: ${socket.id}`);
 	});