WebSockets & Realtime Systems Programming · Урок

Отправка и получение данных

Реализуйте методы отправки сообщений на сервер и обработки входящих данных от сервера.

Урок 2 из 411 шагов

«Отправка и получение данных» — бесплатный урок WebSockets & Realtime Systems Programming на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения WebSockets & Realtime Systems Programming, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс WebSockets & Realtime Systems Programming содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Client Data Exchange Intro

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.

Sending Data with `send()`

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.

Basic `send()` Example

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.

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

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

ws.onerror = (error) => {
  console.error('WS Error:', error);
};

// This example only sends; we'll cover receiving next.

Data Types for `send()`

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: `onmessage`

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.

Processing Received 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').

Basic `onmessage` Example

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.

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

ws.onopen = () => {
  console.log('Connected to server');
  ws.send('Requesting data...');
};

ws.onmessage = (event) => {
  console.log('Received from server:', event.data);
  // event.data could be string, Blob, or ArrayBuffer
};

ws.onerror = (error) => {
  console.error('WS Error:', error);
};

ws.onclose = () => {
  console.log('Disconnected');
};

Structured Data with JSON

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.

JSON Communication Example

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.

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

ws.onopen = () => {
  console.log('Connected to server');
  const message = { type: 'greeting', payload: 'Hello Server!' };
  ws.send(JSON.stringify(message));
};

ws.onmessage = (event) => {
  console.log('Raw message:', event.data);
  try {
    const data = JSON.parse(event.data);
    console.log('Parsed JSON:', data);
    if (data.type === 'response') {
      console.log('Server replied:', data.payload);
    }
  } catch (e) {
    console.error('Failed to parse JSON:', e);
  }
};

ws.onerror = (error) => {
  console.error('WS Error:', error);
};

Client Data Handling Quiz

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?

Ответь в интерактивном уроке

Recap: Send & Receive Data

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!

Можно начать бесплатно

Изучай WebSockets & Realtime Systems Programming с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 12
Уроки: 47

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Отправка и получение данных» бесплатный?

Да — полный текст урока «Отправка и получение данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс WebSockets & Realtime Systems Programming, подпишись на CoddyKit PRO. Курс WebSockets & Realtime Systems Programming содержит 4 уроков всего.

Чему я научусь в уроке «Отправка и получение данных»?

Реализуйте методы отправки сообщений на сервер и обработки входящих данных от сервера. Ты практикуешь WebSockets & Realtime Systems Programming с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать WebSockets & Realtime Systems Programming?

Предыдущий опыт не требуется. WebSockets & Realtime Systems Programming на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Отправка и получение данных»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке WebSockets & Realtime Systems Programming?

Да. Каждый урок WebSockets & Realtime Systems Programming включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к WebSockets & Realtime Systems Programming