WebSocket

Что такое WebSocket простыми словами?

WebSocket — это технология, которая позволяет браузеру (клиенту) и серверу общаться друг с другом в реальном времени по постоянному каналу связи.

💡 Аналогия из жизни

Чтобы понять разницу между обычным интернетом и WebSocket, представим два способа общения:

1. Обычный HTTP (как в старом интернете) — это как переписка бумажными письмами. Вы хотите узнать, есть ли новые данные? Пишете письмо на сервер: "Есть что-то новое?". Сервер отвечает: "Нет". Связь обрывается. Через минуту вы снова пишете: "А теперь?". Это называется опрос (polling). Это медленно, неудобно и тратит много ресурсов.
2. WebSocket — это как телефонный звонок. Вы один раз звоните (устанавливаете соединение), и пока вы не положите трубку, вы и собеседник можете говорить в любой момент, перебивать друг друга и слушать. Связь не обрывается после каждого слова.

---

️ Разбор схемы

На изображении выше отлично показана эта разница:

• Слева (HTTP Polling): Клиент постоянно отправляет запросы (Request), сервер отвечает, и соединение сразу закрывается (Connection Closed). Чтобы получить новые данные, нужно создавать соединение заново.
• Справа (WebSocket): Сначала происходит одно "рукопожатие" (Handshake) — установка связи. После этого между клиентом и сервером образуется постоянный "туннель" (Real-time, Persistent Connection), по которому данные летят в обе стороны одновременно без задержек.

---

⚙️ Как это работает под капотом?

1. Рукопожатие (Handshake): Клиент отправляет обычный HTTP-запрос, но с особым заголовком: "Привет, давай перейдем на WebSocket?".
2. Апгрейд: Сервер отвечает: "Ок, давай!". Протокол переключается с HTTP на WebSocket.
3. Full-duplex (Дуплексная связь): Теперь и клиент, и сервер могут отправлять сообщения друг другу в любой момент, не дожидаясь запроса.

---

💻 Примеры кода

Вот как просто это выглядит на практике.

Клиент (JavaScript прямо в браузере):

// 1. Открываем соединение с сервером
const socket = new WebSocket('wss://echo.websocket.org');

// 2. Когда соединение открыто
socket.onopen = function() {
  console.log("Связь установлена!");
  socket.send("Привет, сервер!"); // Отправляем сообщение
};

// 3. Когда получаем сообщение от сервера (в любой момент!)
socket.onmessage = function(event) {
  console.log("Получено от сервера:", event.data);
};

// 4. Если связь оборвалась
socket.onclose = function() {
  console.log("Соединение закрыто");
};

Сервер (Node.js с популярной библиотекой ws):

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Клиент подключился!');

  // Когда получаем сообщение от клиента
  ws.on('message', function incoming(message) {
    console.log('Получено: %s', message);
    
    // Отправляем ответ обратно клиенту
    ws.send('Привет, клиент! Я получил твое сообщение.');
  });
});

---

🚀 Где это используется?

WebSocket незаменим там, где важна скорость и мгновенная доставка данных:

• 💬 Мессенджеры и чаты (Telegram Web, Slack, Discord) — сообщения прилетают мгновенно, без необходимости обновлять страницу.
• 📈 Финансовые графики и биржи — котировки акций и криптовалют обновляются каждую секунду.
• Онлайн-игры — координаты игроков и действия передаются в реальном времени.
• 🔔 Уведомления — когда вам приходит пуш-уведомление или "лайк" на сайте, скорее всего, это работает через WebSocket.
• Совместное редактирование (Google Docs, Figma) — вы видите, как курсор другого человека двигается в реальном времени.

🎯 Короткий итог

WebSocket нужен тогда, когда серверу нужно самому "толкнуть" (push) данные клиенту, или когда данные обновляются очень часто. Он экономит трафик, снижает задержки (пинг) и делает веб-приложения по-настоящему живыми.

Основные: #WebSocket #HTTP #WebDev #Программирование #JavaScript #NodeJS #Сети #RealTime #Backend #Frontend