90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useDraftSocket } from "~/hooks/useDraftSocket";
|
|
|
|
export default function TestSocket() {
|
|
const [messages, setMessages] = useState<string[]>([]);
|
|
const { socket, isConnected, on, off } = useDraftSocket("test-season-123");
|
|
|
|
useEffect(() => {
|
|
// Listen for test messages
|
|
const handleTestMessage = (data: any) => {
|
|
console.log("Received test message:", data);
|
|
setMessages((prev) => [...prev, JSON.stringify(data)]);
|
|
};
|
|
|
|
on("test-message", handleTestMessage);
|
|
|
|
return () => {
|
|
off("test-message", handleTestMessage);
|
|
};
|
|
}, [on, off]);
|
|
|
|
const sendTestMessage = () => {
|
|
if (socket) {
|
|
socket.emit("test-event", {
|
|
message: "Hello from client!",
|
|
timestamp: new Date().toISOString(),
|
|
});
|
|
setMessages((prev) => [...prev, "Sent: Hello from client!"]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto p-8">
|
|
<h1 className="text-3xl font-bold mb-4">Socket.IO Test Page</h1>
|
|
|
|
<div className="mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className={`w-3 h-3 rounded-full ${
|
|
isConnected ? "bg-green-500" : "bg-red-500"
|
|
}`}
|
|
/>
|
|
<span className="font-semibold">
|
|
Status: {isConnected ? "Connected" : "Disconnected"}
|
|
</span>
|
|
</div>
|
|
{socket && (
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Socket ID: {socket.id}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={sendTestMessage}
|
|
disabled={!isConnected}
|
|
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
|
|
>
|
|
Send Test Message
|
|
</button>
|
|
|
|
<div className="mt-6">
|
|
<h2 className="text-xl font-semibold mb-2">Messages:</h2>
|
|
<div className="bg-gray-100 p-4 rounded max-h-96 overflow-y-auto">
|
|
{messages.length === 0 ? (
|
|
<p className="text-gray-500">No messages yet...</p>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{messages.map((msg, idx) => (
|
|
<li key={idx} className="text-sm font-mono bg-white p-2 rounded">
|
|
{msg}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded">
|
|
<h3 className="font-semibold mb-2">Instructions:</h3>
|
|
<ol className="list-decimal list-inside space-y-1 text-sm">
|
|
<li>Check that the status shows "Connected"</li>
|
|
<li>Open browser console to see connection logs</li>
|
|
<li>Check server logs for "Client connected" message</li>
|
|
<li>Click "Send Test Message" to test two-way communication</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|