|
|
@@ -1,11 +1,95 @@
|
|
|
-import React from 'react';
|
|
|
+import React, { useState, useEffect, useRef } from 'react';
|
|
|
import { useAuth } from '@/client/home/hooks/AuthProvider';
|
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
+import io, { Socket } from 'socket.io-client';
|
|
|
|
|
|
const HomePage: React.FC = () => {
|
|
|
const { user } = useAuth();
|
|
|
const navigate = useNavigate();
|
|
|
-
|
|
|
+
|
|
|
+ // Socket.IO相关状态和引用
|
|
|
+ const [socket, setSocket] = useState<Socket | null>(null);
|
|
|
+ const [isConnected, setIsConnected] = useState(false);
|
|
|
+ const [connectionStatus, setConnectionStatus] = useState('未连接');
|
|
|
+ const [messages, setMessages] = useState<string[]>([]);
|
|
|
+ const [messageInput, setMessageInput] = useState('');
|
|
|
+ const socketRef = useRef<Socket | null>(null);
|
|
|
+
|
|
|
+ // 连接到Socket.IO服务器
|
|
|
+ const connectToSocket = () => {
|
|
|
+ // 替换为你的Socket.IO服务器地址
|
|
|
+ // const newSocket = io('/socket.io');
|
|
|
+ const newSocket = io('/', {
|
|
|
+ path: '/socket.io',
|
|
|
+ transports: ['websocket'],
|
|
|
+ withCredentials: true,
|
|
|
+ query: {
|
|
|
+ socket_token:'3424242423'
|
|
|
+ },
|
|
|
+ auth:{
|
|
|
+ token: 'wfwfw2342424'
|
|
|
+ },
|
|
|
+ reconnection: true,
|
|
|
+ reconnectionAttempts: 5,
|
|
|
+ reconnectionDelay: 1000,
|
|
|
+ });
|
|
|
+ socketRef.current = newSocket;
|
|
|
+ setSocket(newSocket);
|
|
|
+
|
|
|
+ newSocket.on('connect', () => {
|
|
|
+ setIsConnected(true);
|
|
|
+ setConnectionStatus('已连接 (ID: ' + newSocket.id + ')');
|
|
|
+ addMessage('成功连接到服务器');
|
|
|
+ });
|
|
|
+
|
|
|
+ newSocket.on('disconnect', () => {
|
|
|
+ setIsConnected(false);
|
|
|
+ setConnectionStatus('已断开连接');
|
|
|
+ addMessage('与服务器断开连接');
|
|
|
+ });
|
|
|
+
|
|
|
+ newSocket.on('message', (data: string) => {
|
|
|
+ addMessage('收到服务器消息: ' + data);
|
|
|
+ });
|
|
|
+
|
|
|
+ newSocket.on('error', (error: any) => {
|
|
|
+ addMessage('错误: ' + error.message);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 断开Socket.IO连接
|
|
|
+ const disconnectFromSocket = () => {
|
|
|
+ if (socket) {
|
|
|
+ socket.disconnect();
|
|
|
+ setSocket(null);
|
|
|
+ socketRef.current = null;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加消息到消息列表
|
|
|
+ const addMessage = (message: string) => {
|
|
|
+ const timestamp = new Date().toLocaleTimeString();
|
|
|
+ setMessages(prev => [...prev, `[${timestamp}] ${message}`].slice(-10)); // 只保留最近10条消息
|
|
|
+ };
|
|
|
+
|
|
|
+ // 发送消息到服务器
|
|
|
+ const sendMessage = () => {
|
|
|
+ if (socket && messageInput.trim()) {
|
|
|
+ socket.emit('message', messageInput.trim());
|
|
|
+ addMessage('发送: ' + messageInput.trim());
|
|
|
+ setMessageInput('');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 清理函数，组件卸载时断开连接
|
|
|
+ useEffect(() => {
|
|
|
+ return () => {
|
|
|
+ if (socket) {
|
|
|
+ socket.disconnect();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }, [socket]);
|
|
|
+
|
|
|
return (
|
|
|
<div className="min-h-screen bg-gray-50 flex flex-col">
|
|
|
{/* 顶部导航 */}
|
|
|
@@ -82,6 +166,78 @@ const HomePage: React.FC = () => {
|
|
|
<p className="text-gray-600 text-sm">适配各种设备屏幕，提供良好的用户体验</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ {/* Socket.IO连接测试区域 */}
|
|
|
+ <div className="mt-12 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
|
|
+ <h3 className="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-indigo-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
|
+ </svg>
|
|
|
+ Socket.IO 连接测试
|
|
|
+ </h3>
|
|
|
+
|
|
|
+ <div className="flex flex-col md:flex-row gap-4 mb-6">
|
|
|
+ <div className="flex-1">
|
|
|
+ <p className="text-sm text-gray-600 mb-2">连接状态:</p>
|
|
|
+ <div className={`p-3 rounded border ${isConnected ? 'border-green-200 bg-green-50 text-green-700' : 'border-red-200 bg-red-50 text-red-700'}`}>
|
|
|
+ {connectionStatus}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="flex gap-3">
|
|
|
+ <button
|
|
|
+ onClick={connectToSocket}
|
|
|
+ disabled={isConnected}
|
|
|
+ className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:bg-indigo-300"
|
|
|
+ >
|
|
|
+ 连接
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ onClick={disconnectFromSocket}
|
|
|
+ disabled={!isConnected}
|
|
|
+ className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 disabled:bg-gray-300"
|
|
|
+ >
|
|
|
+ 断开
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 消息发送区域 */}
|
|
|
+ <div className="mb-6">
|
|
|
+ <p className="text-sm text-gray-600 mb-2">发送消息:</p>
|
|
|
+ <div className="flex gap-2">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ value={messageInput}
|
|
|
+ onChange={(e) => setMessageInput(e.target.value)}
|
|
|
+ onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
|
|
|
+ placeholder="输入消息并发送..."
|
|
|
+ className="flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ onClick={sendMessage}
|
|
|
+ disabled={!isConnected || !messageInput.trim()}
|
|
|
+ className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:bg-indigo-300"
|
|
|
+ >
|
|
|
+ 发送
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 消息记录区域 */}
|
|
|
+ <div>
|
|
|
+ <p className="text-sm text-gray-600 mb-2">消息记录:</p>
|
|
|
+ <div className="h-64 bg-white border border-gray-200 rounded p-3 overflow-y-auto text-sm">
|
|
|
+ {messages.length === 0 ? (
|
|
|
+ <p className="text-gray-400 italic">暂无消息</p>
|
|
|
+ ) : (
|
|
|
+ messages.map((msg, index) => (
|
|
|
+ <p key={index} className="mb-1">{msg}</p>
|
|
|
+ ))
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
@@ -100,4 +256,4 @@ const HomePage: React.FC = () => {
|
|
|
);
|
|
|
};
|
|
|
|
|
|
-export default HomePage;
|
|
|
+export default HomePage;
|
yourname