2.1.3.3 Real-Time Data Flow (Socket.io)

• Use Case: Live chat, real-time price updates, copy trading signals.

• Approach:

• Initialize Socket.io client on app load.

• Listen for events like chatMessage, tradeUpdate, etc.

• Dispatch Redux actions to update state for relevant features.

// src/services/socket.js
import { io } from 'socket.io-client';

let socket;

export const initSocket = (token) => {
  socket = io('http://localhost:4000', {
    auth: { token }
  });
  return socket;
};

export const getSocket = () => socket;

Integration:

// src/App.js
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { initSocket } from './services/socket';

function App() {
  const token = useSelector((state) => state.user.token);

  useEffect(() => {
    if (token) {
      const s = initSocket(token);
      s.on('connect', () => {
        console.log('Socket connected');
      });
      s.on('tradeUpdate', (data) => {
        // Dispatch Redux action or update local state
        console.log('Incoming trade update:', data);
      });
    }
  }, [token]);

  return <div className="App">/* Render routes & components */</div>;
}

export default App;