feat: integrate Socket.io global provider

[gelluisaac]

closes #22

Summary

This PR integrates a comprehensive Socket.io global provider system into the ChenPilot frontend application, enabling real-time WebSocket communication with robust connection management and React integration.

Changes Made

📦 Dependencies

• Added socket.io-client package for WebSocket communication

🏗️ Core Infrastructure

• SocketManager Service (src/services/socketManager.ts)
  • Singleton pattern for global socket instance management
  • Automatic reconnection with configurable attempts and delays
  • Connection status monitoring and error handling
  • Full event emission/listening API

⚛️ React Integration

• SocketProvider Component (src/components/providers/SocketProvider.tsx)
  • React Context provider for global socket state
  • Auto-connect functionality with lifecycle management
  • TypeScript support with comprehensive type definitions
  • Integrated into main Providers component

🪝 Custom Hooks

• useSocket Hook (src/hooks/useSocket.ts)
  • useSocket() - Main hook for socket access and operations
  • useSocketEvent() - Event-specific hook with automatic cleanup
  • useSocketConnection() - Connection status monitoring

🎨 UI Components

• SocketStatusIndicator (src/components/examples/SocketStatusIndicator.tsx)
  • Visual connection status indicator
  • Real-time connection state display

📚 Documentation

• Comprehensive README (src/services/README.md)
  • Detailed usage examples and API documentation
  • Configuration guidelines and best practices

Features

✅ Automatic Reconnection - Configurable reconnection logic with exponential backoff
✅ Connection Status - Real-time connection monitoring and status indicators
✅ Event Management - Easy event emission and listening with proper cleanup
✅ Type Safety - Full TypeScript support throughout the stack
✅ React Integration - Context-based provider pattern following React best practices
✅ Environment Configuration - Flexible configuration via environment variables
✅ Error Handling - Comprehensive error handling and logging

Configuration

The socket connection is configured via environment variable:

NEXT_PUBLIC_SOCKET_URL=http://localhost:3001

Usage Examples

// Basic socket usage
import { useSocket } from '@/hooks/useSocket';

function MyComponent() {
  const { socket, isConnected, emit, on } = useSocket();
  
  // Your socket logic here
}

// Event listening with auto-cleanup
import { useSocketEvent } from '@/hooks/useSocket';

function ChatComponent() {
  useSocketEvent('message', (data) => {
    console.log('New message:', data);
  });
}

Testing

The integration includes:

• SocketStatusIndicator component for visual testing
• Comprehensive error handling and logging
• Connection status monitoring

Impact

This integration provides the foundation for real-time features such as:

• Live chat functionality
• Real-time notifications
• Live data updates
• Collaborative features
• Real-time market data

Breaking Changes

None. This is a non-breaking addition that integrates seamlessly with the existing codebase.

Checklist

• Code follows project style guidelines
• TypeScript types are properly defined
• Components are properly documented
• Error handling is implemented
• Environment variables are documented
• Usage examples are provided
• Tests are included where applicable

[vercel]

@gelluisaac is attempting to deploy a commit to the Fishon Amos' projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@gelluisaac Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits