Working with JSON Data in WebSockets

# CHAPTER 13

Working with JSON Data in WebSockets #

1. Introduction #

2. Learning Objectives #

• Explain why WebSockets require an internal routing mechanism.

• Design standardized JSON payload structures.

• Implement a switch/case router on the client and server.

• Safely serialize and deserialize JSON data.

3. Beginner-Friendly Explanation #

4. Real-World Examples #

• Multiplayer Game: The client might receive 100 messages a second. Some messages update player positions ({"event": "move"}), others update the game clock ({"event": "tick"}). The client uses the event type to decide which JavaScript function should process the data.

5. Designing the Payload Structure #

6. JSON Structure Examples #

{
  "type": "send_message",
  "payload": {
    "room_id": 10,
    "text": "Hello everyone!"
  }
}

Every message sent by the Server to the Client should look like this:

{
  "type": "new_message",
  "payload": {
    "user": "Alice",
    "text": "Hello everyone!",
    "timestamp": "10:04 AM"
  }
}

7. Client-Side Routing Example #

socket.onmessage = function(event) {
    try {
        const data = JSON.parse(event.data);
        
        // The Router
        switch(data.type) {
            case 'new_message':
                displayChat(data.payload);
                break;
            case 'user_joined':
                showNotification(data.payload.username + " joined.");
                break;
            case 'error':
                alert("Error: " + data.payload.message);
                break;
            default:
                console.warn("Unknown message type:", data.type);
        }
    } catch (e) {
        console.error("Received non-JSON data:", event.data);
    }
};

function displayChat(payload) {
    console.log(`[${payload.timestamp}] ${payload.user}: ${payload.text}`);
}

8. Server-Side Routing Concept #

<?php
// Conceptual PHP Router
$data = json_decode($incomingMsg, true);

switch($data[&#039;type']) {
    case &#039;join_room':
        $roomManager->addUserToRoom($conn, $data[&#039;payload']['room_id']);
        break;
    case &#039;send_message':
        $roomManager->broadcast($data[&#039;payload']);
        break;
}

9. Handling Errors via JSON #

{
  "type": "error",
  "payload": {
    "code": 403,
    "message": "You do not have permission to join this room."
  }
}

10. Best Practices #

• Always use try...catch: Malformed JSON will cause JSON.parse() to throw a fatal error, which will crash your entire JavaScript execution and freeze the UI. Always wrap parsing in a try/catch block.

• Keep Payloads Flat: Avoid infinitely deeply nested JSON objects. Flat, simple structures are faster to parse and easier to debug.

11. Common Mistakes #

• Sending raw strings mixed with JSON: If you decide to use JSON, use it for *everything*. Do not send socket.send("Ping") one minute and socket.send(JSON.stringify({...})) the next. It makes the parser logic messy. Send {"type": "ping"} instead.

12. Mini Exercises #

1. 1. Look at the JSON structure in Section 6.

1. 2. Write a JSON object that represents a user clicking a "Like" button on a specific photo. What is the type? What is in the payload?

13. Coding Challenges #

14. MCQs with Answers #

15. Interview Questions #

• Q: Contrast routing in a traditional REST API versus routing over a WebSocket connection.

• Q: Explain why a standard envelope structure (e.g., type and payload) is a best practice for real-time messaging.

16. FAQs #

17. Summary #

18. Next Chapter Recommendation #