Sending and Receiving Data

Welcome back! In the previous lessons, we learned about establishing WebSocket connections. Now, let's dive into the core of realtime communication: sending and receiving data.

This lesson will show you how to implement methods for clients to send messages to a WebSocket server and how to handle incoming data from that server.

To send data from your client to the WebSocket server, you'll use the WebSocket.send() method. It's quite straightforward!

• You can send various data types: plain text (strings), binary data (like Blob or ArrayBuffer).
• The server will receive this data and can then process it or even broadcast it to other connected clients.

Here's a simple JavaScript example demonstrating how to send a text message once the WebSocket connection is open. Remember, ws://localhost:8080 is a common address for a local test server.

While sending simple strings is common, WebSockets also support binary data. This is crucial for applications needing to transfer images, audio, or other non-textual information efficiently.

• String: Most common for text messages, JSON.
• ArrayBuffer: Raw binary data buffer.
• Blob: File-like object representing raw data.

The send() method automatically handles the framing for these types.

Receiving data from the server is just as important. The WebSocket API provides an event handler called onmessage for this purpose.

When the server sends a message, your client's onmessage function will be triggered. It receives a MessageEvent object, which contains the actual data.

Inside the onmessage handler, you access the message content through event.data. The type of event.data depends on what the server sent:

• If the server sent text, event.data will be a string.
• If the server sent binary data, event.data will be an ArrayBuffer or a Blob, depending on the WebSocket's binaryType property (default is 'blob').

Let's combine sending and receiving! This client code connects, sends a message, and then listens for any incoming messages, logging them to the console. You'd need a server sending messages back for this to fully demonstrate.

For most modern web applications, sending and receiving structured data is crucial. JSON (JavaScript Object Notation) is the de-facto standard for this.

• Sending JSON: Use JSON.stringify() to convert your JavaScript object into a JSON string before calling ws.send().
• Receiving JSON: Use JSON.parse() to convert the incoming JSON string (event.data) back into a JavaScript object.

This example shows how a client can send a structured JSON object to the server and process a JSON response. This pattern is very common for building interactive applications.

Consider the following client-side WebSocket code snippet:

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  ws.send(JSON.stringify({ action: 'subscribe', topic: 'news' }));
};

ws.onmessage = (event) => {
  let msg = event.data;
  if (typeof msg === 'string') {
    msg = JSON.parse(msg);
  }
  console.log(msg.action);
};

If the server sends the string '{"action":"update","data":"new article"}', what will be logged to the console?

Great job! You've learned the fundamental methods for exchanging data over WebSockets from the client side.

• Use ws.send() to send text (strings) or binary data (Blob, ArrayBuffer) to the server.
• Listen for incoming messages using the ws.onmessage event handler.
• Access the message content via event.data, which can be a string, Blob, or ArrayBuffer.
• For structured communication, always use JSON.stringify() before sending and JSON.parse() after receiving JSON strings.

Next, we'll explore how to handle other crucial client-side events like connection errors and closures!