Practice & Assessment
Test your understanding of Socket.IO for Production Real-Time Apps
Multiple Choice Questions
5Can a native browser WebSocket connect directly to a Socket.IO server?
What is the difference between io.to(room).emit() and socket.to(room).emit() in Socket.IO?
In Socket.IO middleware, what happens when you call next(new Error('reason'))?
What does socket.data provide in Socket.IO v4?
What does socket.timeout(5000).emit() provide over a plain socket.emit() with an ack?
Coding Challenges
1Build a Socket.IO Typing Indicator
Using Socket.IO, implement a typing indicator for a chat room. When a user starts typing, the client emits typing:start with { room, username }. When they stop (300ms after last keypress), the client emits typing:stop. The server broadcasts to everyone else in the room. The client renders a '...' indicator listing who is currently typing. Requirements: debounce the stop event properly using setTimeout/clearTimeout; clean up typing state on disconnect for all rooms the user was in; support multiple users typing simultaneously showing 'Alice and Bob are typing...'. Input: Socket.IO events from clients. Output: typing state updates broadcast to room members. Estimated time: 25 minutes.
Mini Project
Real-Time Collaborative Whiteboard
Build a shared whiteboard using Socket.IO where multiple users in the same room can draw simultaneously. Features: rooms identified by a URL hash (#room-name); drawing events (pencil tool only) emitted as { type: 'draw', x1, y1, x2, y2, color, width } and broadcast to all room members; new joiners receive the full drawing history replayed from a server-side in-memory array (max 1000 strokes, drop oldest on overflow); a Clear button that emits clear:canvas, clears the server history, and notifies all room members; a live user count badge showing how many users are in the room; Socket.IO middleware validates that room names are alphanumeric and under 30 characters, rejecting invalid rooms with a connect_error. Use vanilla HTML/CSS/JS canvas on the client.