На каком протоколе основан WebSocket

WebSocket протокол

Краткий ответ

WebSocket основан на HTTP/HTTPS протоколе. Он начинает как HTTP соединение (handshake), а затем переходит на собственный двусвязный протокол. WebSocket работает поверх TCP (на транспортном уровне) и использует порты 80 (WS) и 443 (WSS).

История: от HTTP к WebSocket

Проблема HTTP

HTTP — это запрос-ответ протокол:

• Клиент отправляет запрос
• Сервер отправляет ответ
• Соединение закрывается

Для real-time приложений это медленно и неэффективно.

Решение: WebSocket

WebSocket установил постоянное двусвязное соединение между клиентом и сервером. Данные отправляются полнодуплексно (в обе стороны одновременно).

WebSocket Handshake: HTTP переход

1. Клиент инициирует HTTP запрос с Upgrade заголовком

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

Ключевые заголовки:

• Upgrade: websocket — просим перейти на WebSocket
• Connection: Upgrade — хотим обновить соединение
• Sec-WebSocket-Key — случайный ключ для безопасности
• Sec-WebSocket-Version: 13 — версия протокола

2. Сервер отвечает 101 Switching Protocols

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

101 Switching Protocols означает:

• Переходим на WebSocket
• HTTP соединение закрывается
• Начинается новое WebSocket соединение

WebSocket фреймы: собственный протокол

После handshake данные отправляются фреймами:

Клиент: {message: Hello} → Фрейм
Сервер ← ← ← ← ← ← ← ← ←
Сервер: {response: Hi} → Фрейм
Клиент ← ← ← ← ← ← ← ← ←

Структура WebSocket фрейма:

• FIN: 1 бит (последний ли это фрейм)
• opcode: 4 бита (тип: текст, бинарные, контроль)
• length: 7-64 бита (размер данных)
• mask: 1 бит (маскированы ли данные)
• data: основная нагрузка

Реализация WebSocket на Java

Spring Boot + WebSocket

import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.TextMessage;

public class ChatWebSocketHandler implements WebSocketHandler {
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) 
            throws IOException {
        String payload = (String) message.getPayload();
        TextMessage response = new TextMessage("Echo: " + payload);
        session.sendMessage(response);
    }
    
    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        System.out.println("WebSocket соединение установлено");
    }
}

@Configuration
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new ChatWebSocketHandler(), "/chat");
    }
}

Клиентский код (JavaScript)

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

ws.onopen = () => {
    console.log('WebSocket соединение открыто');
    ws.send('Hello Server!');
};

ws.onmessage = (event) => {
    console.log('Сообщение от сервера:', event.data);
};

ws.onerror = (error) => {
    console.error('WebSocket ошибка:', error);
};

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

Сравнение: HTTP vs HTTP/2 vs WebSocket

WebSocket vs Server-Sent Events (SSE)

SSE — для одностороннего потока (сервер к клиенту):

const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
    console.log('Данные от сервера:', event.data);
};

WebSocket — для двусторонний обмен:

ws.send('message to server');
ws.onmessage = (event) => {
    console.log('Ответ от сервера:', event.data);
};

Выбор:

• SSE для новостей, уведомлений (только чтение)
• WebSocket для chat, совместного редактирования, игр

Безопасность WebSocket

1. WSS (WebSocket Secure) с TLS

const ws = new WebSocket('wss://server.com/chat');

2. Аутентификация при handshake

@Configuration
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatHandler(), "/chat")
                .addInterceptors(new HandshakeInterceptor() {
                    @Override
                    public boolean beforeHandshake(ServerHttpRequest request, 
                            ServerHttpResponse response, WebSocketHandler handler,
                            Map<String, Object> attributes) {
                        String token = extractToken(request);
                        return isValidToken(token);
                    }
                });
    }
}

Вывод

✅ WebSocket основан на HTTP — начинается как HTTP handshake

✅ После успешного handshake переходит на собственный двусвязный протокол

✅ Использует те же порты (80 для WS, 443 для WSS)

✅ Построен на TCP (как и HTTP)

✅ Идеален для real-time приложений:

• Chat приложения
• Live notifications
• Collaborative editing
• Online games
• Live data streaming

❌ Не используй WebSocket для обычного REST API