Introduction to WebSockets

# CHAPTER 1

Introduction to WebSockets #

1. Introduction #

2. Learning Objectives #

• Understand what WebSockets are and how they differ from traditional web requests.

• Explain why real-time communication is critical in modern applications.

• Identify common use cases for WebSockets.

• Connect to a public echo server using basic JavaScript.

3. Beginner-Friendly Explanation #

4. Real-World Examples #

• Chat Applications: WhatsApp, Slack, and Discord use real-time connections so you see messages the millisecond they are sent.

• Multiplayer Games: When you move your character in an online game, WebSockets instantly send that movement to all other players.

• Financial Dashboards: Cryptocurrency trackers or stock market tickers that flash green and red use WebSockets for live price feeds.

• Collaborative Tools: Google Docs or Figma, where you can see another person's cursor moving on your screen in real time.

5. Step-by-Step Tutorial #

Step 1: Create a new WebSocket object, pointing to a server URL. (Notice it starts with wss:// instead of https://). Step 2: Attach an event listener to know when the connection is open. Step 3: Send a message to the server. Step 4: Listen for messages coming back from the server.

6. WebSocket Examples #

7. JavaScript Examples #

// Step 1: Connect to a public test server (echo server)
const socket = new WebSocket("wss://echo.websocket.org/");

// Step 2: Connection opened
socket.onopen = (event) => {
    console.log("Connected to the WebSocket server!");
    
    // Step 3: Send a message
    socket.send("Hello, Server! I am learning WebSockets.");
};

// Step 4: Listen for incoming messages
socket.onmessage = (event) => {
    console.log("Message from server: " + event.data);
};

8. PHP Examples #

<?php
// Conceptual WebSocket connection in PHP (Requires libraries like Ratchet)
// The server waits for connections and instantly broadcasts messages
$server->on(&#039;message', function ($connection, $message) {
    echo "Received message: " . $message;
    // Echo the message back
    $connection->send("You said: " . $message);
});
?>

9. JSON Examples #

{
  "type": "greeting",
  "text": "Hello, Server! I am learning WebSockets.",
  "timestamp": "2026-05-15T10:00:00Z"
}

10. Best Practices #

• Use Secure WebSockets: Always use wss:// (WebSocket Secure) instead of ws:// in production, just like you use HTTPS.

• Handle Disconnections: Networks are unreliable. Always write code to reconnect if the WebSocket connection drops unexpectedly.

• Keep Payloads Small: Send only the data you need to ensure fast, low-latency transmission.

11. Common Mistakes #

• Assuming WebSockets replace HTTP: WebSockets are great for real-time data, but HTTP is still better for loading standard web pages, images, and heavy files. Use both!

• Forgetting to stringify JSON: You cannot send a raw JavaScript object over a WebSocket; you must use JSON.stringify() before sending and JSON.parse() when receiving.

12. Mini Exercises #

1. 1. Open your browser's Developer Tools (F12) right now.

1. 2. Go to the "Console" tab.

1. 3. Paste the JavaScript example from Section 7 into the console and press Enter.

1. 4. Watch the console to see the server echo your message back to you!

13. Coding Challenges #

14. MCQs with Answers #

15. Interview Questions #

• Q: Explain WebSockets to a non-technical person.

• Q: When would you choose to use a WebSocket instead of standard REST API requests?

• Q: Why do we use JSON over WebSockets instead of raw text?

16. FAQs #

Q: Are WebSockets only for JavaScript? A: No, the client is usually JavaScript (in the browser), but the server can be written in PHP, Node.js, Python, Java, or any other backend language.

17. Summary #

18. Next Chapter Recommendation #