Python Full Stack Web Developer Course

Advanced Request-Response Patterns

Beyond the basic request-response cycle, several advanced patterns have evolved to address specific needs in web applications:

AJAX and Partial Page Updates

Asynchronous JavaScript and XML (AJAX) allows parts of a webpage to be updated without reloading the entire page:

// JavaScript - Updating a specific section of the page
document.getElementById('refresh-button').addEventListener('click', async function() {
  const notificationContainer = document.getElementById('notifications');
  notificationContainer.innerHTML = '<div class="loading">Loading...</div>';
  
  try {
    const response = await fetch('/api/notifications');
    const notifications = await response.json();
    
    // Update just this section of the page
    notificationContainer.innerHTML = '';
    if (notifications.length === 0) {
      notificationContainer.innerHTML = '<p>No new notifications.</p>';
    } else {
      notifications.forEach(notification => {
        const element = document.createElement('div');
        element.className = 'notification';
        element.innerHTML = `
          <h4>${notification.title}</h4>
          <p>${notification.message}</p>
          <span class="time">${notification.time}</span>
        `;
        notificationContainer.appendChild(element);
      });
    }
  } catch (error) {
    notificationContainer.innerHTML = '<p class="error">Failed to load notifications.</p>';
  }
});
            

This pattern:

• Improves user experience by avoiding full page reloads
• Reduces bandwidth usage by transferring only the needed data
• Creates more responsive applications

Long Polling

Long polling is a technique where the server holds a request open until new data is available:

// JavaScript - Client-side long polling
function longPoll() {
  fetch('/api/messages/poll')
    .then(response => response.json())
    .then(data => {
      // Process new messages
      data.messages.forEach(message => {
        displayMessage(message);
      });
      
      // Immediately start a new long poll request
      longPoll();
    })
    .catch(error => {
      console.error('Long polling error:', error);
      // Wait before retrying to avoid flooding server on error
      setTimeout(longPoll, 5000);
    });
}

// Start long polling when page loads
longPoll();

// Server-side in Python/Flask
@app.route('/api/messages/poll')
def poll_messages():
    user_id = get_current_user_id()
    
    # Check for new messages with a timeout
    for i in range(30):  # 30-second maximum polling time
        new_messages = check_new_messages(user_id)
        if new_messages:
            return jsonify({'messages': new_messages})
        
        # No messages yet, wait a second before checking again
        time.sleep(1)
    
    # No new messages after timeout
    return jsonify({'messages': []})
            

Long polling provides:

• Near real-time updates without constant polling
• Works across all browsers, including older ones
• Simpler implementation than WebSockets

Server-Sent Events (SSE)

SSE enables servers to push updates to clients over a single HTTP connection:

// JavaScript - Client-side SSE
const eventSource = new EventSource('/api/events');

eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('Received event:', data);
  updateUI(data);
};

eventSource.onerror = function(error) {
  console.error('SSE error:', error);
  eventSource.close();
  // Reconnect after delay
  setTimeout(() => {
    setupEventSource();
  }, 5000);
};

// Server-side in Python/Flask
@app.route('/api/events')
def events():
    def generate():
        # SSE requires specific format
        yield "data: {\"message\": \"Connected to event stream\"}\n\n"
        
        while True:
            # Check for new events
            event = check_for_new_events()
            if event:
                yield f"data: {json.dumps(event)}\n\n"
            
            time.sleep(1)
    
    return Response(generate(), mimetype='text/event-stream')
            

Server-Sent Events are useful for:

• One-way server-to-client notifications
• Applications that need real-time updates (dashboards, news feeds)
• Lighter weight than WebSockets for one-way communication

WebSockets

WebSockets provide a persistent, bidirectional communication channel:

// JavaScript - Client-side WebSocket
const socket = new WebSocket('wss://example.com/socket');

socket.onopen = function(event) {
  console.log('Connection established');
  // Send authentication information
  socket.send(JSON.stringify({
    type: 'auth',
    token: localStorage.getItem('auth_token')
  }));
};

socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('Message from server:', data);
  
  switch (data.type) {
    case 'chat_message':
      displayChatMessage(data.message);
      break;
    case 'user_status':
      updateUserStatus(data.user_id, data.status);
      break;
    // Handle other message types
  }
};

// Send messages to the server
function sendMessage(text) {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({
      type: 'chat_message',
      text: text,
      room_id: currentRoomId
    }));
  }
}

// Python server-side WebSocket with Flask-SocketIO
from flask_socketio import SocketIO, emit, join_room, leave_room

socketio = SocketIO(app)

@socketio.on('connect')
def handle_connect():
    print('Client connected')

@socketio.on('auth')
def handle_auth(data):
    user = authenticate_user(data.get('token'))
    if user:
        # Store user info in session
        session['user_id'] = user.id
        emit('auth_success', {'user': user.to_dict()})
    else:
        emit('auth_failed', {'message': 'Invalid token'})

@socketio.on('chat_message')
def handle_message(data):
    if 'user_id' not in session:
        return
    
    # Process and store the message
    message = create_message(
        user_id=session['user_id'],
        room_id=data.get('room_id'),
        text=data.get('text')
    )
    
    # Broadcast to everyone in the room
    emit('chat_message', message.to_dict(), room=data.get('room_id'))
            

WebSockets excel for:

• Real-time applications requiring bidirectional communication
• Chat applications, collaborative editors, multiplayer games
• Scenarios where low latency is critical