Grundlagen der WebSocket-API im Browser

Welcome to the world of real-time web! The browser's native WebSocket API is your direct link to instant data exchange.

It lets web pages talk to servers constantly, without needing to refresh. Imagine live chats, multiplayer game updates, or real-time stock tickers – all powered by WebSockets!

To start, you create a new WebSocket object in JavaScript. You need the server's URL, which begins with ws:// for unsecure connections or wss:// for secure, encrypted ones (like https://).

A WebSocket connection goes through different states, which you can check using the readyState property. This tells you the current status:

• 0 (CONNECTING): The connection is not yet open.
• 1 (OPEN): The connection is established and ready for communication.
• 2 (CLOSING): The connection is in the process of closing.
• 3 (CLOSED): The connection has been closed or could not be opened.

The onopen event fires when your WebSocket connection has successfully established. This is the perfect moment to confirm the connection and perhaps send your first message to the server!

Once the connection is OPEN (i.e., after onopen fires), you can use the send() method to transmit data to the server. You can send strings, Blobs, or ArrayBuffers.

The onmessage event is triggered whenever the client receives data from the server. The actual data payload is available in event.data.

To close a WebSocket connection gracefully, use the close() method. You can optionally provide a numeric code and a human-readable reason for the closure.

The onclose event provides useful details about why the connection closed. The event object includes:

• event.wasClean: A boolean indicating if the connection closed cleanly.
• event.code: A numeric status code (e.g., 1000 for Normal Closure).
• event.reason: A human-readable string explaining the closure.

These details help you debug and manage your connection's lifecycle.

Network issues, invalid server URLs, or server-side problems can cause a WebSocket connection to fail. The onerror event is crucial for catching these issues and reacting appropriately.

Note: The error object itself often provides limited details for security reasons, but its occurrence signals a problem.

Here's a conceptual look at how you might combine all these event handlers for a basic client flow:

const ws = new WebSocket("wss://echo.websocket.events");

ws.onopen = () => {
  console.log("Connected to server!");
  ws.send("Hello from client!");
};

ws.onmessage = (event) => {
  console.log("Server says:", event.data);
  ws.close(); // Close after receiving the first message
};

ws.onclose = (event) => {
  console.log(`Disconnected: ${event.code} - ${event.reason}`);
};

ws.onerror = (err) => {
  console.error("WebSocket Error:", err);
};

This structure ensures you react to all key stages of the connection.

Great job! You've successfully explored the essentials of the browser's native WebSocket API:

• How to create a new WebSocket instance with new WebSocket().
• Understanding connection states using the readyState property.
• Handling crucial connection events: onopen, onmessage, onclose, and onerror.
• Sending data to the server using the send() method.
• Gracefully closing connections with close().

Next, we'll dive deeper into handling different types of data and managing client-side events more robustly to build truly interactive applications!