Learning Objectives

• Implement WebSocket connections
• Build real-time notifications
• Handle concurrent updates

Flask-SocketIO Backend

python
Run Inline
from flask_socketio import SocketIO, emit, join_room
socketio = SocketIO(app, cors_allowed_origins="*")
@socketio.on('connect')
def handle_connect():
    emit('message', {'msg': 'Connected'})
@socketio.on('join')
def handle_join(data):
    join_room(data['room'])
    emit('notification', f'User joined {data["room"]}', room=data['room'])

React Socket.IO Client

jsx
import { io } from 'socket.io-client';
const socket = io('http://localhost:5000');
socket.on('notification', (msg) => {
  console.log('New notification:', msg);
});

Q1: Difference between WebSocket and HTTP?

HTTP: request-response (client initiates). WebSocket: persistent, bidirectional (server can push data). Q2: How to scale WebSocket across servers?

Use Redis as message broker (socketio.RedisManager). All servers subscribe to Redis channels, receive broadcasts from any server. Q3: How to handle reconnection?

Socket.IO auto-reconnects. Track connection state in Redux. Queue messages during disconnection, send on reconnect. Join Discord PreviousMilestone 4: Frontend State Management with ReduxNextMilestone 6: Testing & CI/CD Pipeline