Один из часто встречаемых вопросов на собеседовании - это WebSocket. Многие на нем валятся, а когда спрашивают про SSE, у многих глаза на лоб лезут. Если заходит вопрос: «что использовать, SSE или WebSocket?», часто отдают приоритет WebSocket, даже не задумываясь о SSE.

На самом деле эти механизмы очень простые, но как и большинство тем, их обычно описывают сложно и запутанно. Здесь я расскажу про них простым языком и покажу особенности каждого.

WebSocket

Что это?

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

Это не как обычный HTTP-запрос: нам что-то нужно? Иди и отправляй каждый раз запрос...

WebSocket - это: тебе что-то нужно? Открой меня один раз, и дальше просто получай и отправляй.

WebSocket работает поверх TCP, который гарантирует доставку и порядок данных (потерянные пакеты будут отправлены повторно).

Если WebSocket-соединение обрывается, это не всегда обнаруживается сразу, поэтому на практике используют механизм ping/pong, чтобы вовремя понять, что соединение разорвано, и корректно его закрыть или переподключить.

Как работает?

Перед тем как WebSocket заработает у нас происходит три важные вещи:

  1. Когда ты открываешь WebSocket браузер делает TCP - handshake (протокол тройного рукопожатия).

    1. SYN - клиент говорит: “Бро, давай поговорим”
    2. SYN-ACK - сервер подтверждает
    3. ACK - клиент подтверждает

    На этом уровне данные WebSocket еще не идут - TCP просто открытое соединение.
    TCP гарантирует: надежную доставку (пакеты не теряются), порядок (пакеты приходят в том же порядке, что отправлены), контроль целостности.

  2. После TCP клиент отправляет HTTP GET с заголовком Upgrade: websocket.

    Этот HTTP запрос служит для “рукопожатия WebSocket”: сервер проверяет, поддерживает ли он протокол, версию и т.д.

    Если все ок, сервер отвечает 101 Switching Protocols и соединение апгрейдится в WebSocket.

  3. После успешного апгрейда, HTTP больше не используется для этого соединения. TCP остается открытым, но теперь данные идут по протоколу WebSocket.

Как открыть?

Чтобы открыть WebSocket соединение нам нужно использовать new WebSocket

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

ws:// — обычный WebSocket (без шифрования)
wss:// — защищённый WebSocket (с шифрованием, как HTTPS)

После открытия, нужно слушать его события, их всего 4:

  1. open - соединение установлено.

  2. close - соединение закрыто.

  3. message - получены данные.

  4. error  - ошибка.

Так же есть метод send - позволяет отправлять сообщения на сервер.

Вот как все выглядит вместе:

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

ws.onopen = () => {
  console.log("open"); // соединение установлено
  ws.send("hello"); // отправляем сообщение на сервер
};

ws.onmessage = (event) => {
  console.log("message:", event.data); // получаем данные от сервера
};

ws.onerror = (error) => {
  console.log("error:", error); // произошла ошибка
};

ws.onclose = () => {
  console.log("close"); // соединение закрыто
};

SSE

Что это?

SSE - это механизм однонаправленной передачи данных от сервера к клиенту через открытое HTTP-соединение. Т.е. клиент не может отправлять данные на сервер, он их может только получать.

SSE работает поверх HTTP и имеет встроенный механизм автоматического переподключения: если соединение обрывается, браузер сам закрывает его и открывает новое.

SSE - это как радио, ты не можешь говорить, но можешь слушать

Как работает?

Перед тем как SSE заработает у нас происходит три важные вещи:

  1. Когда ты открываешь SSE браузер делает TCP - handshake (протокол тройного рукопожатия), тоже самое что и у WebSocket.

  2. После TCP клиент отправляет HTTP GET. В котором просит подписаться на поток событий, сервер отвечает и НЕ закрывает соединение.

  3. Сервер начинает стримить данные, по сути сервер просто периодически «дописывает» данные в тот же самый HTTP response.

Как открыть?

Чтобы открыть SSE соединение, используется new EventSource 

const events = new EventSource('...');

Тут используется обычный http:// или https://

После открытия, нужно слушать его события, их всего 3:

  1. open - соединение установлено

  2. message - получены данные

  3. error  - ошибка / потеря соединения

Вот как все выглядит вместе:

const events = new EventSource('...');

// срабатывает, когда соединение успешно установлено
events.onopen = () => {
  console.log('SSE подключено');
};

// срабатывает при получении обычного сообщения от сервера
events.onmessage = (event) => {
  console.log('Новое сообщение:', event.data);
};

// срабатывает при ошибке соединения
events.onerror = () => {
  console.log('Ошибка соединения');
};

// закрыть соединение можно вручную методом close()
// events.close();

WebSocket vs SSE

Разница:

WebSocket

SSE

Направление связи

Клиент ↔ сервер (двусторонняя)

Только сервер - клиент

Протокол

Отдельный протокол поверх TCP

Работает поверх обычного HTTP

Авто-переподключение

Нет

Есть

Что когда использовать:

WebSocket лучше использовать когда обе стороны активно общаются, например: чаты, онлайн-игры, трейдинг.

SSE лучше использовать когда клиент в основном только слушает, например: уведомления, новости, обновление статусов.

Надеюсь, после прочтения этой статьи вы поняли, что такое SSE и WebSocket, в чем их ключевые отличия и когда лучше использовать каждый из них. Теперь вы можете спокойно отвечать на собеседованиях и выбирать подходящий инструмент под конкретную задачу, а не автоматически тянуться к WebSocket только потому, что он популярнее.